파파비의 블로그

화면을 네비게이터로 띄운 뒤, 그 화면에서 본래 화면으로 data를 전송하고 싶을 수가 있다. 그럴땐, navigator pop에 data를 넣어서 보내면 된다. 이렇게 말이다. 여기를 보면 . 버튼 콜백으로 pop을 하는 것이 보이고, 안에 mealID라는 data를 보냈다. 그냥 data 아무거나 넣어버리면 된다. 그럼 data는 어디서 어떻게 받을까? 저 화면을 push한 그 곳에서 받는다. 이 코드가 위의 화면을 push한 곳이다. push 메소드는 사실 future함수이다. 따라서 then을 통해, 저 메소드만 따로 메모리에 올려서 완료된 뒤에 then 부분이 실행되게 할 수 있다. then안에 있는 value는 pop이 보낸 것이다. 우린 저 값을 사용하면 된다. print('!!')은 언제 ..

넣는 방법? 매우 쉽다. 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라는 폴더로 들어가겠다는 의미