Your first Flutter app  |  Google Codelabs

대부분의 앱은 한 화면에 모든 것을 담을 수 없습니다. 이 특정 앱은 아마도 그럴 수 있지만, 교훈적인 목적으로 사용자가 즐겨찾기를 위한 별도의 화면을 만들려고 합니다. 두 화면 사이를 전환하기 위해 첫 번째 StatefulWidget을 구현하겠습니다.

Untitled

이 단계의 핵심을 최대한 빨리 파악하려면 MyHomePage를 2개의 개별 위젯으로 분할하세요.

MyHomePage를 모두 선택하고 삭제한 다음 다음 코드로 바꿉니다:

lib/main.dart

// ...

class MyHomePage extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: Row(
        children: [
          SafeArea(
            child: NavigationRail(
              extended: false,
              destinations: [
                NavigationRailDestination(
                  icon: Icon(Icons.home),
                  label: Text('Home'),
                ),
                NavigationRailDestination(
                  icon: Icon(Icons.favorite),
                  label: Text('Favorites'),
                ),
              ],
              selectedIndex: 0,
              onDestinationSelected: (value) {
                print('selected: $value');
              },
            ),
          ),
          Expanded(
            child: Container(
              color: Theme.of(context).colorScheme.primaryContainer,
              child: GeneratorPage(),
            ),
          ),
        ],
      ),
    );
  }
}

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

    IconData icon;
    if (appState.favorites.contains(pair)) {
      icon = Icons.favorite;
    } else {
      icon = Icons.favorite_border;
    }

    return Center(
      child: Column(
        mainAxisAlignment: MainAxisAlignment.center,
        children: [
          BigCard(pair: pair),
          SizedBox(height: 10),
          Row(
            mainAxisSize: MainAxisSize.min,
            children: [
              ElevatedButton.icon(
                onPressed: () {
                  appState.toggleFavorite();
                },
                icon: Icon(icon),
                label: Text('Like'),
              ),
              SizedBox(width: 10),
              ElevatedButton(
                onPressed: () {
                  appState.getNext();
                },
                child: Text('Next'),
              ),
            ],
          ),
        ],
      ),
    );
  }
}

// ...

저장하면 UI의 시각적 측면이 준비되었지만 작동하지 않는 것을 볼 수 있습니다. 탐색 레일에서 ♥︎(하트)를 클릭해도 아무 일도 일어나지 않습니다.

Untitled

변경 사항을 검토합니다.