[Flutter] Provier 사용하기

Provider 생성

먼저 Provider 패키지를 pubspec.yaml 파일에 추가한다.

그 다음 전역 상태 클래스 파일을 생성한다.

import 'package:flutter/material.dart';

class MyState with ChangeNotifier {
  int _count = 0;

  int get count => _count;

  void increment() {
    _count++;
    notifyListeners();
  }
}

Provier 적용

main.dart 파일에서 메인 앱을 ChangeNotifierProvider()로 감싸고 child 속성에 넣는다.

import 'package:flutter/material.dart';
import 'package:provider/provider.dart';

void main() {
  runApp(
    ChangeNotifierProvider(
      create: (_) => MyState(),
      child: MyApp(),
    ),
  );
}

전역 상태 가져오기

Provider.of<MyState>(context)를 통해 전역 상태를 가져올 수 있다.

해당 코드는 build() 메서드 내부에서 사용할 수 있다.

class MyHomePage extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    final myState = Provider.of<MyState>(context);

    return Scaffold(
      appBar: AppBar(
        title: Text('My Home Page'),
      ),
      body: Center(
        child: Text('Count: ${myState.count}'),
      ),
      floatingActionButton: FloatingActionButton(
        onPressed: () => myState.increment(),
        child: Icon(Icons.add),
      ),
    );
  }
}

Provider를 initState() 메서드 안에서 호출하면 위젯 트리가 아직 완전히 구성되기 전이라 에러가 발생하므로 addPostFrameCallback() 메서드 안에서 사용해야 한다.

void initState() {
  super.initState();
  WidgetsBinding.instance?.addPostFrameCallback((_) {
    final myState = Provider.of<MyState>(context);
    // 여기서 myState 사용
  });
}