파파비의 블로그

넣는 방법? 매우 쉽다. Scaffold의 속성에 drawer가 있다. 거기에 Drawer 위젯을 넣으면 된다 . 이렇게 좌측 상단에 햄버거가 뜬다. 다만 Scaffold에 Appbar가 없다면, drawer도 사라진다. Drawer는 새로운 화면하고 같아서. 속성에 child로 원하는 위젯을 다 넣을 수 있다.

TabBar를 위에 다는 것을 알아보았으니, 이제 아래쪽에 다는 것을 알아보자, 방식이 약간 다르니 알아두면 좋을 것 같다. 아래쪽에 tabbar를 단다는 것은 이런 느낌이다. 이제 순서대로 살펴보자 1) 위에 다는 것과는 달리, 화면이 되는 위젯의 뿌리 위젯은 Scaffold이다. 대신 Scaffold의 bottomNavigationBar 속성에 > BottomNavigationBar위젯을 넣는다. 2) BottomNavigationBar 속성으로 items를 설정해야 한다 - items는 tap 들과 똑같다. - BottomNavigationBarItem위젯의 리스트를 값으로 받는다. - BottomNavigationBarItem위젯은 icon과 타이틀 등을 속성으로 정할 수 있다. 3) onTap을..

이런 것이 탭 bar이다. 누르는 것에 따라 보여지는 화면이 달라진다. 어떻게 만드는 것일까? 꽤 복잡할 수 있으나 이해하면 쉽다. 1) screen 위젯을 stateful 위젯으로 설정하기 > 상관없다. 2) 화면 위젯에 사용될 scaffold 위젯을, DefaultTabController 위젯으로 감싸기 이렇게 하면 된다. TabsScreen이라는 위젯을 우리는 화면으로 사용할 것이며, Scaffold를 DefaultTabController 위젯으로 감싼 것을 볼 수 있다. 3) DefaultTabController 속성으로 length 정하기 : length는 탭의 개수를 의미한다. - 여기서는 2개로 설정했다. 이 값에 따라서 화면의 개수도 정확히 일치해야 한다. 4) Scaffold 내, app..

route를 만들어서 화면을 띄우는 방법은 MaterialApp에서 route속성으로 route를 지정해두거나, Navigator에서 push할 때, route를 만들거나 할 수 있다. 또 다른 방법이 있는데, 동적으로 만드는 방법이다. MaterialApp에서 onGenerateRoute 라는 속성이 있다. Navigator를 통해 푸시를 할 때, route가 미리 지정해둔 route 속성에 없으면 onGenerateRoute 에 지정해둔 callback이 실행되어 route가 생성된다. (pushNamed가 따라서 실행되어야 함, 그냥 푸시는 XX) onGenerateRoute callback에는 setting 이라는 객체가 들어가는데 여러 정보가 포함된다. 이 객체를 통해 다양한 정보에 따라 rou..

Stack이라는 위젯이 있다. 위젯들을 겹쳐서 보여줄 수 있는, 쌓는 방식의 위젯이다. Stack은 가장 큰 child의 사이즈를 따라간다. 보통 이미지 위에 텍스트를 겹치게 하거나 할 때 Stack을 사용한다. 거기서 텍스트의 위치를 조절하고 싶을때는 어떻게 할까? Positioned라는 위젯을 쓴다. 이 위젯은 Stack 내부에서만 작동한다. Stack 내부의 위치를 지시할 수 있다. 이 이미지를 보면, Text를 자식으로 갖고 있는 Container 위젯이 stack안에 있는데, Positioned 위젯을 통해 위치를 조정하고 있는 모습이다. bottom : 20은 > 아래로 부터 20 픽셀 떨어진 곳에 위치 시킨다 는 것을 의미하며, right: 5 는 오른쪽으로부터 5만큼 떨어진 것을 의미한다...

위젯의 모양을 강제로 둥들게 하는 방법이 있다. 바로 ClipRRect를 사용하는 것이다. ClipRRect는 2가지 속성이 있다. borderRadius와 child다. child는 image를 비롯해 다양한 위젯들이 들어갈 수 있다. 여기서는 이미지 위젯을 넣었고, 특히 윗부분만 둥글게 모서리 처리가 되는 부분이다. 꼭 이미지만 해당하지 않는다. 그냥 원하는 위젯 위에 ClipRRect를 넣으면 된다. 여기선 그리드 타일 위를 감쌌다. 했을 때와 안했을 때의 차이를 한번 보라!

1) import 구분하기 - 맨위에는 dart에서 import한 문장들 묶기 - 그 다음은 외부 package import 한 문장들 묶기, - 마지막은 내부 dart file import 한 문장들 묶기. 이렇게 최대 3덩어리로 구분된다. 2) 내부 파일 import 할 때, ./ : 같은 폴더 내를 의미, ../ : 그 상위 폴더를 의미 (점이 늘어나면 한단계 위를 의미함) ./screens 의 의미는 동일폴더 내에 screens라는 폴더로 들어가겠다는 의미

데이터가 List로 되어있다고 가정해보자. 이런식으로 Meal 이라는 데이터 모델을 갖고 있는 리스트가 있다고 해보자. 여기서 우리는 원하는 Meal 객체들만 추리기를 원한다. 그방법은? where사용!!! List에 있는 객체들 중에서, id의 값을 categories에서 갖고 있는 객체들만 엄선해서 categoryMeals라는 객체에 리스트형태로 넣은 것이다. 우리는 이 선별된 데이터들을 기반으로 ListView를 만들어보려면 어떻게 하는게 좋을까? : 선별된 데이터 > dynamic > ListView.Builder 여기서 빌더는 Text객체를 만들었는데, 얼마든지 다른 data를 활용한 위젯을 만들 수 있다. 편리한 점은 itembuilder역시 foreach형태고, data도 List로 도출되어..