가장 먼저 :

파트 1을 읽는 것이 좋습니다.

Part 1에서는 단일 제공자 구현만 보았습니다. Flutter 앱에서 여러 제공자를 선언하는 것은 어떻습니까?

공급자를 사용하면 데이터를 노출할 수 있고 앱을 통해 consumer의 도움으로 데이터를 관찰할 수 있습니다. 이렇게 하면 사용자 친화적인 데이터 사용에 쉽게 액세스할 수 있습니다. FlutterMultiprovider는 다른 데이터 개체가 필요하거나 모듈에 따라 달라지는 일부 상황을 처리하는 데 필요하므로 이 문서에서는 이에 대한 예제를 다룰 것입니다. 공급자를 사용하면 불필요한 데이터 계층 구조를 모두 피할 수 있고 필요할 때마다 데이터를 사용할 수 있으며 사용 후 적절하게 폐기할 수도 있습니다.

좋아, 앱에 2개의 화면이 있도록 합시다. 각 화면은 다음과 같이 서로 다른 공급자를 사용합니다.





pubspec.yaml 파일에서 공급자 패턴에 대한 종속성을 추가합니다.flutter pub add provider

dependencies:
  flutter:
    sdk: flutter
  # The following adds the Cupertino Icons font to your application.
  # Use with the CupertinoIcons class for iOS style icons.
  cupertino_icons: ^1.0.2
  provider: ^6.0.3

첫 번째 모델을 만들고 카운터를 증가/감소/재설정하는 방법을 추가하고 material.dart 패키지에서 확장ChangeNotifier합니다. 이는 notifyListeners() 메서드를 제공하며 값을 변경할 때마다 모든 리스너에게 알립니다.

import 'package:flutter/material.dart';

class Counter with ChangeNotifier {
  int count = 0;
 //int get myCounter() => count;

  void incrementCounter() {
    count++;
    notifyListeners();
  }

   void decrementCounter() {
    if (count > 0) {
      count--;
    }
    notifyListeners();
  }

   void resetCounter() {
    count=0;
    notifyListeners();
  }
}

두 번째 모델을 생성하고 List<String> _cart = ["Red", "Green", "Blue"]에 항목을 추가하는 방법을 추가하고 material.dart 패키지에서 ChangeNotifier를 확장합니다. 이는 notifyListeners() 메서드를 제공하며 값을 변경할 때마다 모든 리스너에게 알립니다.

import 'package:flutter/material.dart';

class Cart with ChangeNotifier {
  final List<String> _cart = ["Red", "Green", "Blue"];
  int get count => _cart.length;
  List<String> get cart => _cart;



  void addItem(String item) {
    _cart.add(item);
    notifyListeners();
  }
}

홈 위젯을 MultiProvider로 감싸고 그 안에 있는 모든 모델에 ChangeNotifierProvider<YOUR_MODEL_NAME> 위젯을 호출합니다.

void main() {

  runApp(

    MultiProvider(

      providers:[
          ChangeNotifierProvider<Counter>(create: (_)=>Counter(),),
          ChangeNotifierProvider<Cart> (create: (_)=>Cart(),),

    ],
    child: MyApp(),
    ),

  );
}

MaterialApp 위젯에 추가routes

@override
  Widget build(BuildContext context) {
    return 
       MaterialApp(
        title: 'Flutter Demo',
        theme: ThemeData(
          primarySwatch: Colors.blue,
        ),

        initialRoute: '/',
        routes: {
        '/' : (context) => HomePage(),
        '/second' :(context) => Second()


      },
      );
  }
}

텍스트를 업데이트하려면 모델에서 변수와 함수를 호출하여 사용하십시오.
텍스트 위젯을 Consumer<YOUR_MODEL_NAME> 위젯으로 래핑

@override
  Widget build(BuildContext context) {
    return Consumer<Counter>(
      builder: (context, counter, child) {
        return Scaffold(
          appBar: AppBar(
            title: Text('Home'),
          ),
          body: Center(
            child: Column(
              mainAxisAlignment: MainAxisAlignment.center,
              children: [
                // Text('${cart.cart}'),
                // Text('${context.watch<Cart>().cart}'),
                Row(
                  mainAxisAlignment: MainAxisAlignment.center,
                  children: [
                    const Text('The Number : '),
                    // Text('${context.watch<Counter>().count}'),
                    Text('${counter.count}',
                        style: const TextStyle(
                            fontWeight: FontWeight.bold, fontSize: 20)),
                  ],
                ),

소스 코드: 분기 "multiProvider "

eman55555 / provider_state_management

자세한 내용은 이 문서를 참조하세요.
개발:
매체 : https://medium.com/@emanhamad55555/provider-state-management-in-flutter-part-1-b3fcb9fd2226

provider_state_management

새로운 Flutter 프로젝트.

시작하기

이 프로젝트는 Flutter 애플리케이션의 시작점입니다.
첫 번째 Flutter 프로젝트인 경우 시작할 수 있는 몇 가지 리소스:

Lab: Write your first Flutter app

Cookbook: Useful Flutter samples

Flutter 개발을 시작하는 데 도움이 필요하면 다음을 확인하십시오.
online documentation 튜토리얼을 제공하는
샘플, 모바일 개발 지침 및 전체 API 참조.


View on GitHub


축하합니다🥳🤩
Flutter Counter 앱에서 multiProvider를 구현했습니다!