flutter.dev

Provider

paulaner80 2019. 11. 5. 11:36
반응형

설정

pubspec.yaml 파일을 열어 dependencies에 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: ^0.1.2

  provider: ^3.0.0 #new



소스에서 provider.dart를 임포트하면 provider패턴을 사용하 실 수 있습니다.

import 'package:provider/provider.dart';


상태접근

사용자가 카탈로그에서 항목 중 하나를 클릭하면 장바구니에 추가됩니다. 

MyCart가 MyListItem 위에 있기 때문에 어떻게해야합니까?

provider라는 사용하기 쉬운 패키지를 사용할 것입니다.


provider를 사용하려면 3가지 컨셉을 이해해야합니다.


ChangeNotifier

ChangeNotifier는 플러터 SDK에 포함되어 있습니다. 리스너들에게 변경알람을 제공합니다.

다시말해 어떤것이 ChangeNotifier라면, 변경사항을 구독할 수 있습니다.(옵저버패턴의 형태)


프로바이더에서 ChangeNotifier는 응용프로그램 상태를 캡슐화 하는 한 가지 방법입니다.

간단한 프로그램에서는 ChangeNotifier는 한개만 필요할 것이고 

복잡한 프로그램에서는 여러개가 필요할 수 있습니다.

ChangeNotifier를 사용하려면 프로바이가 없어도 되지만 같이 사용하는것이 좋습니다.


쇼핑앱 예제에서 ChangeNotifier에서 카트의 상태를 관리하기위해 아래같은 확장클래스를 만들어 줍니다.



class CartModel extends ChangeNotifier {
  final List<Item> _items = [];
  List<Item> get items => _items;

  int get totalPrice =>
      items.fold(0, (total, current) => total + current.price);

  void add(Item item) {
    _items.add(item);

    //CartModel을 구독하는 위젯에게 알려줌.
    notifyListeners();
  }
}

@immutable
class Item {
  final int id;
  final String name;
  final Color color;
  final int price = 42;

  Item(this.id, this.name)
      : color = Colors.primaries[id % Colors.primaries.length];

  @override
  int get hashCode => id;

  @override
  bool operator ==(Object other) => other is Item && other.id == id;
}


ChangeNotifierProvider

ChangeNotifierProvider는 provider 패키지에들어 있는 ChangeNotifier 객체를 하위항목에 제공하는 위젯입니다.

ChangeNotifierProvider는 MyCart 및 MyCatalog 에서 사용해야하므로 MyApp에 위치해야합니다.


void main() => runApp(ChangeNotifierProvider(
      builder: (context) => CartModel(),
      child: MyApp(),
    ));


Consumer

ChangeNotifierProvide선언을 통해 앱의 위젯에서 CartModel을 사용할 수 있습니다.



ChangeNotifier

ChangeNotifierProvider

Consumer



https://flutter.dev/docs/development/data-and-backend/state-mgmt/simple

'flutter.dev' 카테고리의 다른 글

permission_handler 사용법  (0) 2021.04.12
[하는 중.]어셋과 이미지 추가하기  (0) 2019.11.26
리스트 기본  (0) 2019.05.03
스크린에 데이터 전달하기  (0) 2019.05.02
데이터 돌려받기  (0) 2019.04.30