Flutter : Provider

한지선·2023년 7월 3일
0

Flutter

목록 보기
7/7

Provider

https://pub.dev/packages/provider
flutter pub add provider

프로바이더는 위젯 트리와 상관없이 상태를 저장할 수 있게 해주는 상태 관리 라이브러리이다.
상태를 공유하는 공통 부모 위젯에 Provider를 제공하고, 상태를 사용하는 위젯에서는 Provider의 데이터를 읽어서 사용한다.
불필요한 위젯들이 rebuild 됨을 방지할 수 있다.

watch, read, select

watch : 해당 위젯이 상태값의 변경을 감지한다.
read : 상태값을 읽으나 변경을 감시하지 않는다.
select : 특정 상태값만을 감시한다.

일반적으로 프로바이더의 값을 변경하기 위한 함수는 read를 통해 접근하고, 상태값을 사용할 때는 watch를 사용한다.

예제

프로바이더를 사용하려면 ChangeNotifier를 사용해 클래스를 생성해야 한다.

counts_provider.dart

class Counts with ChangeNotifier {
  int _count = 0; // 전역 변수
  int get count => _count; // 외부에서 접근할 수 있도록 getter 생성

  void add() {
    _count++;
    notifyListeners(); // 데이터가 갱신되었음을 알려줌
  }

  void remove() {
    _count--;
    notifyListeners();
  }
}

main.dart

void main() {
  runApp(
    MaterialApp(
        home: ChangeNotifierProvider( // 최상단에 Provider 제공
      create: (_) => Counts(),
      child: const MyApp(),
    )),
  );
}

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

  @override
  State<MyApp> createState() => _MyAppState();
}

class _MyAppState extends State<MyApp> {
	@override
    Widget build(BuildContext context) {
		return Scaffold(
        	body: Column(
            	children: [
                	TextButton(
                    	onPressed: () {
                        	context.read<Counts>().add();
                        },
                        child: Text("add count")
                    ),
                    Text(context.watch<Counts>().count.toString())
                ]
            )
        )
    }
}
profile
어플 개발에 관심있습니다람쥐썬더!

0개의 댓글