官方推薦的狀態管理庫 provider 的使用

Flutter 狀態管理
通俗的講：當我們想在多個頁面（組件/Widget）之間共享狀態（數據），或者一個頁面（組件/Widget）中的多個子組件之間共享狀態（數據），這個時候我們就可以用 Flutter 中的狀態管理來管理統一的狀態（數據），實現不同組件直接的傳值和數據共享。
現在 Flutter 的狀態管理方案很多，redux、bloc、state、provide、provider。目前我們推薦使用 provider，這個是官方提供的狀態管理解決方案。相比其他狀態管理庫使用起來比較方便。

二、關於flutter provider庫和flutter provide庫
provider 是 Flutter 團隊推出的狀態管理模式。
官方地址為：https://pub.dev/packages/provider
注意：provider 和 provide 是兩個庫哦。Flutter 官方推薦使用的是 provider 哦，provider 是flutter 官方出的。provide 不是 Flutter 官方寫的

三、flutter provider 的使用
1、配置依賴 provider: ^3.0.0+1
2、新建一個文件夾叫 provider，在 provider 文件夾里面放我們對於的狀態管理類
3、在 provider 里面新建 Counter.dart
4、Counter.dart 里面新建一個類繼承 minxins 的 ChangeNotifier 代碼如下

Counter.dart

import 'package:flutter/material.dart';

class Providers with ChangeNotifier{
  int _count = 6;
  var _age = 20;
  int get count => _count;
  int get age => _age;

  void increment() {
    _count++;
    notifyListeners();
  }
}
main.dart

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

import 'package:provider/provider.dart';
import 'services/state.dart';

void main() => runApp(MyApp());

class MyApp extends StatelessWidget {
  // This widget is the root of your application.
  @override
  Widget build(BuildContext context) {
    return MultiProvider(
      providers: [
        ChangeNotifierProvider(create: (_) => Providers()),
      ],
      child: MaterialApp(
          title: 'Flutter Demo',
          home: HomePage()
      ),
    );
  }
}
使用的頁面

import 'package:flutter/material.dart';

import 'package:provider/provider.dart';
import '../services/state.dart';


class IndexPage extends StatefulWidget{
  IndexPage({Key key});
  _IndexPage createState() => _IndexPage();
}

class _IndexPage extends State {
  @override
  Widget build(BuildContext context) {
    final states = Provider.of<Providers>(context);
    // TODO: implement build
    return Scaffold(
      appBar: AppBar(title: Text('index'),),
      body: ListView(
        children: <Widget>[
          Text('${states.count}'),
          RaisedButton(
            child: Text('點'),
            onPressed: () {
              states.increment();
            },
          ),
          Text('${states.age}')
        ],
      ),
    );
  }
}