플러터:상태관리

틀:플러터 Dart:개요 플러터에 대한 지식 분류

1. 플러터:개요
   1. 플러터:VSCode
2. 플러터:실행
3. 개념 잡기
   1. 플러터:화면 하나 만들기
   2. 플러터:변하는 화면(StatefulWidget)
   3. 플러터:화면 전환(화면 쌓기, 하단 네비게이션 바)
   4. 플러터:화면 전환(Drawer)
   5. 플러터:키보드 입력
   6. 플러터:슬라이더
   7. 플러터:그래프 그리기(fl chart)
   8. 플러터:데이터 저장(간단한 데이터)
   9. 플러터:인증(Firebase 인증)
   10. 플러터:인증(OAuth2)
4. 권한 사용
   1. 플러터:마이크 입력
5. 위젯
   1. 플러터:아이콘
   2. 플러터:레이아웃 계열 위젯
   3. 플러터:네비게이션 계열 위젯
   4. 플러터:버튼
   5. 플러터:상태관리
6. 플러터:DB연결
   1. 플러터:Firebase
   2. 플러터:MySQL
7. 디자인
   1. 플러터:테마
   2. 플러터:앱바
   3. 플러터:버튼
8. 플러터:배포
9. 플러터:참고자료
10. 플러터:위젯
    1. 플러터:공간배치용 위젯
11. 플러터:라이브러리
    1. 플러터:logger

개요

플러터는 특정 상태가 변하면 이를 다시 빌드하여 화면에 반영해주는 방식을 사용한다.

굉장히 다양한 방식이 있겠지만... 공식 문서에선 ChangeNotifier를 예시로 설명한다.

ChangeNotifier

상태를 특정 클래스에 저장해두었다가 다른 클래스에서 변경하여 사용하는 방식.

import 'package:english_words/english_words.dart';
import 'package:flutter/material.dart';
import 'package:provider/provider.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(
          colorScheme: ColorScheme.fromSeed(seedColor: Colors.deepOrange),
        ),
        home: MyHomePage(),
      ),
    );
  }
}

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

  void getNext() {
    current = WordPair.random();
    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),
        // ↓ Add this.
          ElevatedButton(
            onPressed: () {
              print('button pressed!');
              appState.getNext();
            },
            child: Text('Next'),
          ),

        ],
      ),
    );
  }
}

1. MyApp이 실행되는데, 노티파이어 프로바이더를 반환한다. 이 안에서 타이틀, 테마, home 등의 옵션을 갖는다.
2. 여기서 반환되는 MyAppState는 노티파이어를 상속하여 만들어지며, 여기에서 변화가 생기면 다시 빌드가 이루어진다.
3. MyHomePage 위젯에서 빌드할 때 MyAppState를 참고한다 지정되어, 여기에서 변화가 발생하면 이 위젯을 다시 빌드한다.
4. 최종적으로, 버튼을 누르면 appState.getNext() 를 실행하며 appState 객체로 나타나는 MyAppState 내부 변수에 변화가 생기기 때문에 빌드를 다시 하여 화면이 갱신된다.

StatefulWidget으로 관리

하지만, 위처럼 모든 상태에 대해 변수를 담아두면 너무 길어지기 때문에 특수한 페이지에서 관리되는 특수한 상태는 StatefulWidget을 사용하여 개별 클래스에서 관리한다.

class MyHomePage extends StatefulWidget {
  @override
  State<MyHomePage> createState() => _MyHomePageState();  // 요 의미가 정확히 뭘까?
}

class _MyHomePageState extends State<MyHomePage> {
  bool enabled = false;  // 여기에 선언되는 것들이 상태값이다. 이것들이 변경되면 다시 빌드.
  
  void changeCheck() {
    setState() {  // 이 함수의 내용이 끝나면 갱신된다.
      // 변경사항.
    }
  }

이런 식으로 상태클래스와 _로 시작되는 비공개 클래스로 나누어진다.