[flutter] Provider 개념정리

Programing/플러터

[flutter] Provider 개념정리 - Count세기

하즈시 2022. 12. 12. 14:52

728x90

Provider 설치

https://pub.dev/packages/provider/install

provider | Flutter Package

A wrapper around InheritedWidget to make them easier to use and more reusable.

pub.dev

dependencies:
  provider: ^6.0.4

---

import 'package:flutter/cupertino.dart';

//해당 클래스 안에서 선언된 멤버변수 상태관리를 provider가 하도록
class CountProvider extends ChangeNotifier {
  // 외부 접근 금지
  int _count = 0;

  String value = "test";
}

main.dart

@override
Widget build(BuildContext context) {
  return MaterialApp(
    title: 'Flutter Demo',
    theme: ThemeData(
      primarySwatch: Colors.blue,
    ),
    home: ChangeNotifierProvider(
      // child 하위 모든 위젯들은 create에서 만든 객체에 접근이 가능
      create: (BuildContext context) {
        return CountProvider();
      },
      child: Home(),
    ),
  );
}

home.dart

// null safety -> 나중에 널체크
CountProvider? _countProvider;

@override
Widget build(BuildContext context) {
  _countProvider = Provider.of<CountProvider>(context);
  // 하위 위젯에서 Provider 참조할 때
  if (_countProvider == null) {
    return Scaffold(
      body: Center(
        child: Text('nothing'),
      ),
    );
  }

하위 빌드 중 선택적으로 빌드하도록

Consumer

provider 접근해서 받아오는 상위 위젯에서 Consumer로 감싸서 활용

return Center(
  child: Text(
    Provider.of<CountProvider>(context).count.toString(),
    style: TextStyle(fontSize: 80),
  ),
);

이 부분을

return Center(
  child: Consumer<CountProvider>(builder: (context, provider, child) {
    return Text(
      provider.count.toString(),
      style: TextStyle(fontSize: 80),
    );
  }),
);

이렇게 변경하고

상위에서 listen을 false로 바꾸면 해당 프로바이더 값이 바꼈을 때 재빌드 안 하도록

요점

Consumer를 통해서 선택적으로 빌드할 위젯을 선택 가능

listen false를 통해서 굳이 재빌드 안해도 되는 위젯 선택 가능