Multi Provider 패키지

Provider 패키지 추가하기

pub.dev에 등록되어 있는 Provider 패키지를 내 프로젝트에 추가합니다.

pubspec.yaml

dependencies:
  flutter:
    sdk: flutter

  #provider
  provider: ^4.3.2+2   #버전은 최신 버전을 사용하세요.

VS Code에서 pubspec.yaml 파일을 저장하면 자동으로 패키지를 다운로드 및 설치가 됩니다. 간혹 비정상적으로 패키지 설치가 안되었다면 수동으로 처리하면 됩니다.

수동 처리

flutter clean 클린

$ flutter clean

패키지 가져오기

$ flutter pub get

패키지 사용

사용 할 Dart 소스 코드 상단에 Provider 를 추가합니다.

import 'package:provider/provider.dart';

Provider 패턴 알기

정리가 잘 된 사이트가 있어 링크로 대신한다.

https://reasley.com/?p=2423

ChangeNotifierProvider 생성

아래와 같이 간단한 카운트 Provider를 하나 생성한다. :

import 'package:flutter/material.dart';

class CounterRepository with ChangeNotifier {
  int _counter;
  CounterRepository(this._counter);
  getCounter() => _counter;
  setCounter(int counter) => _counter = counter;
  void increment() {
    _counter++;
    notifyListeners();
  }

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

runApp()에 Multi Provider 선언하기

위에 생성한 Provider를 runApp에 선언한다. :

lib/main.dart

import 'package:provider/provider.dart';

void main() {
  runApp(
    MultiProvider(
      providers: [
        ChangeNotifierProvider(
          create: (_) => CounterRepository(0),
        ),
      ],
      child: MyApp(),
    )
    
  );
}

Provider 사용하기

  @override
  Widget build(BuildContext context) {
    
    CounterRepository _counterRepository =
        Provider.of<CounterRepository>(context);
    
    return Scaffold(
      body: Center(
        child: Column(
          ....
          children: <Widget>[
          ....
          ....
            Text(
              '${_counterRepository.getCounter()}',   //현재 카운트 값
              style: Theme.of(context).textTheme.headline4,
            ),
          ....
          ...
      ),
      floatingActionButton: FloatingActionButton(
        onPressed: _counterRepository.increment,      // 카운트 증가 함
        tooltip: 'Increment',
        child: Icon(Icons.add),
      ), // This trailing comma makes auto-formatting nicer for build methods.
    );
  }