[Flutter] Provider

Provider

플러터 앱 내에서 전역 상태를 관리하기 위한 패키지

기본적인 사용법은 아래와 같다.

• ChangeNotifier 를 상속받는 State 클래스에 전역 변수들 및 업데이트 함수들을 넣는다.
• 최상위 Widget 의 build 함수에서 ChangeNotifierProvider 를 생성한다. (State 와 Wdget 을 연결)
• State 값이 필요한 하위 Widget 에서 context.watch<T>() 를 통해 이벤트를 listen 한다. (또는 read, select 도 가능)

설치는 아래와 같이

// 커맨드로 설치
flutter pub add provider


// 또는 pubspec.yaml 에 아래와 같이 추가하고 flutter pub get
provider: ^6.1.2

 

 

Code Template

/////////////////////////////////////////////////
// main.dart

import 'package:english_words/english_words.dart';
import 'package:flutter/material.dart';
import 'package:namer_app/providers/my_app_state.dart';
import 'package:namer_app/screens/my_home_page.dart';
import 'package:provider/provider.dart';

void main() {
  runApp(const MyApp());
}

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

  @override
  Widget build(BuildContext context) {
    return ChangeNotifierProvider( // Provider 로 생성하면서 State 를 넣어준다.
      create: (context) => MyAppState(),
      child: MaterialApp(
        title: 'Namer App',
        theme: ThemeData(
          useMaterial3: true,
          colorScheme: ColorScheme.fromSeed(seedColor: Colors.deepOrange),
        ),
        home: MyHomePage(),
      ),
    );
  }
}


/////////////////////////////////////////////////
// providers/my_app_state.dart

import 'package:english_words/english_words.dart';
import 'package:flutter/material.dart';

// Provider 에 제공할 State 클래스
class MyAppState extends ChangeNotifier {
  var current = WordPair.random();
  var favorites = <WordPair>[];

  void getNext() {
    current = WordPair.random();
    notifyListeners();
  }

  void toggleFavorite() {
    if (favorites.contains(current)) {
      favorites.remove(current);
    } else {
      favorites.add(current);
    }
    notifyListeners();
  }
}


/////////////////////////////////////////////////
// screens/favorites_page.dart

import 'package:flutter/material.dart';
import 'package:namer_app/providers/my_app_state.dart';
import 'package:provider/provider.dart';

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

  @override
  Widget build(BuildContext context) {
    var appState = context.watch<MyAppState>(); // State 의 변경 상태를 listen 한다.

    if (appState.favorites.isEmpty) {
      return Center(
        child: Text('No favorites yet.'),
      );
    }

    return ListView(
      children: [
        Text('You have ${appState.favorites.length} favorites..'),
        for (var pair in appState.favorites)
          ListTile(
            leading: Icon(Icons.favorite),
            title: Text(pair.asCamelCase),
          )
      ],
    );
  }
}

 

참고

https://pub.dev/packages/provider

https://codelabs.developers.google.com/codelabs/flutter-codelab-first?hl=ko#0