[Flutter]. 13. Flutter tutorial on codelab(8)

앞에서 NavigationRail의 선택에 따라 어떻게 적절한 위젯이 보여지는지 살펴봤습니다.

[Flutter]. 12. Flutter tutorial on codelab(7) (tistory.com)

[Flutter]. 12. Flutter tutorial on codelab(7)

 

이번에는 Favorites를 누르면 보여질 위젯 클래스를 만들어 보겠습니다.

Tutorial은 도전적인 과제를 부여합니다. 일단 한번 직접 해보라고~ ㅋ

...

...

 

했다치고~

 

이때, 고려 할 사항들을 아래와 같이 서술하고 있습니다. 이건 정답이 없는 것이니 꼭 이런 점을 이렇게 고려해야 하는 것은 아닌 것 같아요. 배우는 입장에서는 이런 식으로 '무엇이 필요 할 때 이런 위젯, 이런 기술' 이렇게 생각하는 방법을 배울 수 있는 내용인 것 같습니다.

 

• 스크롤 될 컬럼형 레이아웃에는 ListView 위젯
• 다른 위젯에서 상태(MyAppState)에 접근 할 때는 context.watch<MyAppState>() 활용
• ListTile도 title과 leading이라는 속성과 onTap이라는 콜백 함수를 제공하니 한번 도전 해 보셔도 좋고!
• Dart에서는 collection 내부에 for 루프를 허용합니다. 함수형 프로그래밍을 써도 되고~

 

정답은 아니고, 참고 해 볼 수 있는 예로써, 아래와 같은 위젯 클래스를 사용 할 수 있습니다.

class FavoritesPage extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    var appState = context.watch<MyAppState>();

    if (appState.favorites.isEmpty) {
      return Center(
        child: Text('No favorites yet.'),
      );
    }

    return ListView(
      children: [
        Padding(
          padding: const EdgeInsets.all(20),
          child: Text('You have '
              '${appState.favorites.length} favorites:'),
        ),
        for (var pair in appState.favorites)
          ListTile(
            leading: Icon(Icons.favorite),
            title: Text(pair.asLowerCase),
          ),
      ],
    );
  }
}

이제 NavigationRail의 Favorites를 누르면 이 위젯이 뜨도록 수정하면 모든 준비는 끝!

class _MyHomePageState extends State<MyHomePage> {

  var selectedIndex = 0;     // ← Add this property.

  @override
  Widget build(BuildContext context) {

    Widget page;
    switch (selectedIndex) {
      case 0:
        page = GeneratorPage();
        break;
      case 1:
        page = FavoritesPage();  // <-------
        break;
      default:
        throw UnimplementedError('no widget for $selectedIndex');
    }

 

 

 

몇 개의 조합 단어에 Like 표시를 한 후, Favorites를 누르면 아래와 같이 목록이 보여집니다.

 

저는 지금 크롬에서 실행 시켜보고 있는데, 페이지 리로드를 하면 이전에 기록 해 두었던 것들이 다 사라지고 초기화 됩니다. 참고 해둬야 되겠고, 이런 데이터를 저장하기 위해 Firebase 등과 연동하는 법을 배워두면 좋을 것 같네요.

 

이것으로 'Your first Flutter app' Tutorial은 끝납니다.

이것을 다 보곤서 책을 봤더니 훨씬 도움이 되네요.

Flutter는 위젯들을 다루는 기술이라서 다양한 위젯을 잘 알고, 필요한 곳에 저절한 위젯을 잘 쓰도록 연습을 해 나가면 될 것 같아요. 그러자면, 위젯 종류들을 살펴보는 공부와 실제 상용 서비스를 보고 똑같이 한번 만들어 보는 연습을 해보면 도움이 될 것 같습니다. 참고 도서들의 내용도 그런 구성으로 되어 있는 것 같아요.

 

이제, 다음 시간부터는 책을 참고해서 리뷰를 진행 해 보겠습니다.