플러터:상태관리 편집하기

{{플러터}}

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

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

= ChangeNotifier =
상태를 특정 클래스에 저장해두었다가 다른 클래스에서 변경하여 사용하는 방식.<syntaxhighlight lang="dart">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'),
          ),

        ],
      ),
    );
  }
}</syntaxhighlight>

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

== StatefulWidget으로 관리 ==
하지만, 위처럼 모든 상태에 대해 변수를 담아두면 너무 길어지기 때문에 특수한 페이지에서 관리되는 특수한 상태는 StatefulWidget을 사용하여 개별 클래스에서 관리한다.<syntaxhighlight lang="dart">class MyHomePage extends StatefulWidget {
  @override
  State<MyHomePage> createState() => _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> {</syntaxhighlight>이런 식으로 상태클래스와 _로 시작되는 비공개 클래스로 나누어진다.