[Flutter] ChangeNotifier provider 사용법

provider로 선언에서 주의할 점은 선언된 위젯의 하위 위젯에만 listener가 허용된다는 것이다

 

provider와 listener로 구성된다.

단어 그대로 provider는 제공자이며 listener는 제공된 값을 받는자이다

ChangNotifierProvider를 중심으로 알아보자

 

1. ChangNotifierProvider를 사용하기 위한 class를 선언한다

class JoinOrLogin extends ChangNotifier{

    bool _isJoin = false;

    bool get isJoin => _isJoin;

 

    void toggle( ) {

        _isJoin = !_isJoin;

        notifyListeners( );   <= 이 명령을 해 주어야 listener에서 알려준다

    }

}

 

2. Provider를 선언한다

   ChangeNotifierProvider<JoinOrLogin>.value(  <= JoinOrLogin 타입의 provider를 선언한다

        vlaue: JoinOrLogin( ),  <= 초기값을 주기위해 JoinOrLogin 생성자를 호출한다

        child: AuthPage( )), <= AuthPage 밑에 있는 모든 위젯들은 listen 할 수 있다

 

3. provider 상태를 변화시키고 listener에게 변화를 알려준다

1) Provider.of<> 사용

GestureDetector(

    onTap: ( ) {

         JoinOrLogin joinOrLogin = Provider.of<JoinOrLogin>(context); <= provider instance를 가져온다

    //     JoinOrLogin joinOrLogin = Provider.of<JoinOrLogin>(context, listen:false); <= instance가져오고, listen은 없다

         joinOrLogin.toggle( ) <= provider의 toggle 함수를 수행한다.

    },

2) Consumer를 사용하여 상태 변화도 시키고 변경된 값을 적용도 한다.

   Context 접근이 어려운 환경에서도 사용할 수 있다

   적용하고자 하는 위젯을 감싸서(wapping) 사용한다.

Consumer<JoinOrLogin>(

   // builder: (BuildContext context, JoinOrLogin joinOrLogin, Widget child) =>

    builder: (context, joinOrLogin, child) =>

         GestureDetector(

             onTap: ( ) {

                  joinOrLogin.toggle( ); <= provider의 toggle 함수를 수행한다.

              },

              child: Text(joinOrLogin.isJoin ? "AAA":"BBB");

 

4. listener가 상태 변화를 수신하기 위한 환경을 만들어 준다. 즉 변경된 내용을 반영할 동일한 이름의 변수가 있어야 한다. 이름이 달라도 되는데, 혼선을 일으킬 수 있다

class LoginBackground extends CustomPainter {

    LoginBackground({@required this.isJoin});   <= 생성할 때 isJoin 변수 초기값을 받아오게 한다.

    final bool isJoin;

 

    @override

     void paint(Canvas canvas, Size size) {

         Paint paint = Paint( )..color = isJoin ? Colors.red : Colors.blue;

 

 

생성자 호출시 변수 값을 넘겨준다

painter: LoginBackground(isJoin: Provider.of<JoinOrLogin>(context).isJoin),

 

5. listener 예제

   context 접근이 불가능한 경우에는 Consumer를 사용한다.

Consumer<JoinOrLogin>(

    builder: (context, value, child) => Opacity(

        opacity: value.isJoin ? 0 : 1,    <= join 이면 투명도 0, 아니면 투명도 1

           child: Text("AAA")),