[Flutter, Google 공식 문서] 리마인드 1 (1~4)

한번 더 정리하고 싶은 내용만 따로 정리

// lib/main.dart

void main() {
  runApp(MyApp());
}

class MyApp extends StatelessWidget {
  const MyApp({super.key});

  @override
  Widget build(BuildContext context) {
    return ChangeNotifierProvider(
      create: (context) => MyAppState(),
      child: MaterialApp(
        title: 'Namer App',
        theme: ThemeData(
          useMaterial3: true,
          colorScheme: ColorScheme.fromSeed(seedColor: Colors.deepOrange),
        ),
        home: MyHomePage(),
      ),
    );
  }
}

class MyAppState extends ChangeNotifier {
  var current = WordPair.random();
}

• MyAppState 클래스는 앱이 작동하는 데 필요한 데이터를 정의.
• 상태 클래스는 ChangeNotifier를 확장한다.
  • 즉, 자체 변경사항에 관해 다른 항목에 알릴 수 있다고 한다.
  • ex) current의 값이 변경되었을 때 앱의 일부 위젯이 알아야 한다는 뜻인듯하다.
• 상태가 만들어지고 ChangeNotifierProvider를 사용하여 전체 앱에 제공된다.

class MyHomePage extends StatelessWidget {
  @override
  Widget build(BuildContext context) {           // ← 1
    var appState = context.watch<MyAppState>();  // ← 2

    return Scaffold(                             
      body: Column(                              
        children: [
          Text('A random AWESOME idea:'),        
          Text(appState.current.asLowerCase),    
          ElevatedButton(
            onPressed: () {
              print('button pressed!');
            },
            child: Text('Next'),
          ),
        ],                                       
      ),
    );
  }
}

1. 모든 위젯은 위젯이 항상 최신 상태로 유지되도록 위젯의 상황이 변경될 때마다 자동으로 호출되는 build() 메서드를 정의한다.
2. MyHomePage는 watch 메서드를 사용해서 앱의 현재 상태에 관련한 변경사항을 계속 추적한다.
   • 여기서 아래의 코드를 작성한다면 MyAppState에 작성한 getNext()메서드를 사용할 수 있다.
   • 아래와 같이 작성하면 random() 메서드로 인해 버튼 클릭 시 계속 변경된 데이터를 확인할 수 있다,

    class MyAppState extends ChangeNotifier {
     var current = WordPair.random();
   
     void getNext() {
       current = WordPair.random();
       print('이데이터는');
       print(current);
       notifyListeners(); // 해당 위젯을 보고 있는 유저에게 알림을 보내기
     }
   }
   
   class MyHomePage extends StatelessWidget {
     @override
     Widget build(BuildContext context) {
       var appState = context.watch<MyAppState>();
   
       return Scaffold(
         body: Column(
           children: [
             Text('A random AWESOME idea:'),
             Text(appState.current.asLowerCase),
             ElevatedButton(
                 onPressed: (){appState.getNext();},
                 child: Text('Next')
             )
           ],
         ),
       );
     }
   }