Flutter 상태관리 (Provider)

Bloc 등을 사용하여도 상태관리가 가능 하지만 code 의 양이 생각보다 많다.

그래서 이런 문제점을 해결 하기 위해 사용할 수 있는 plugin 이 있다. 

Provider 가 바로 그역할을 하고 있다. 

 

InheritedWidget 의 래퍼로 사용하기 쉽고 좀더 재사용 가능

(InheritedWidget, InheritedNotifier, InheritedModel )

 

다음과 같은 장점이 있다. 

• 리소스의 단순화된 할당/해제
• 지연 로딩(lazy-loading)
• 클래스를 새로 만들 때 마다 매번 작성해야했던 부분을 크게 줄임
• devtool 친화적 : Provider를 사용하면 Application State가 Flutter devtool에 표시됨
• 이러한 InheritedWidget들을 소비(consume)하는 일반적인 방법을 제시 (Provider.of/Consumer/Selector 참고)
• 복잡성이 기하급수적으로 증가하는 수신 매커니즘(listening mechanism)을 가진 클래스에 대한 확장성 향상
  (예 : 알림 발송을 위한  ChangeNotifier).

plugin 설치

flutter pub add provider

provider/counter_provider.dart

ChangeNotifier 를 상속한 CounterProvider 생성

notifyListeners() 를 통해 상태변경 전달

import 'package:flutter/material.dart';

class CounterProvider extends ChangeNotifier {
  int _count = 0;

  int get count => _count;

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

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

provider/counter_page.dart

ChangeNotifierProvider  를 이용하여 CounterProvider 과 CounterPage 설정

Consumer 를 통해 Count 변경 감시 및 Text 위젯 업데이트

countProvider 를 직접 접근하여 increament, decrement 처리

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

class MainApp extends StatelessWidget {
  const MainApp({Key? key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: ChangeNotifierProvider(
        create: (_) => CounterProvider(),
        child: const CounterPage(),
      ),
    );
  }
}

class CounterPage extends StatelessWidget {
  const CounterPage({Key? key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    final countProvider = Provider.of<CounterProvider>(context, listen: false);
    return Scaffold(
      appBar: AppBar(title: const Text('Counter Bloc')),
      body: Center(
          child: Consumer<CounterProvider>(
              builder: (context, counter, child)=> Text(
                  '${counter.count}',
                  style: Theme.of(context).textTheme.headline1)
          )
      ),
      floatingActionButton:  Column(
        crossAxisAlignment: CrossAxisAlignment.end,
        mainAxisAlignment: MainAxisAlignment.end,
        children: [
          FloatingActionButton(
            child: const Icon(Icons.add),
            onPressed: () => countProvider.increment(),
          ),
          const SizedBox(height: 4),
          FloatingActionButton(
            child: const Icon(Icons.remove),
            onPressed: () => countProvider.decrement(),
          ),
        ],
      ),
    );
  }
}

 

관련영상

https://youtu.be/sKmWFEk-F0o