Flutter: Provider状态管理之计数器简单使用

第一步 在pubspec.yaml中安装依赖

dependencies:
        flutter:
            sdk: flutter
        provider: ^3.0.0+1

第二步 在lib中创建provider文件夹,并新建count_num_provider.dart

    import 'package:flutter/material.dart';

        class CountNumProvider with ChangeNotifier {
          int _num = 0;
          int get value => _num; // 通过get将私有变理_num暴露出来
          
          incrementNum() {
            _num++;
            notifyListeners(); // 更新状态 并通知听众
          }
        }

第三步 在 main.dart中注册provider

import 'package:provider/provider.dart';
import 'package:flutter_bilibili/provider/count_num_provider.dart';

void main() {
  // AMapLocationClient.setApiKey("56383edf209ce13dc3421ea77b7a0e09");
  runApp(new MyApp());
}

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MultiProvider( // 在这里注册provider
      providers: [
        ChangeNotifierProvider(builder: (_) => CountNumProvider()),
      ],
      child: MaterialApp(
        initialRoute: '/',
        onGenerateRoute: onGenerateRoute,
        title: '我只是个摆设',
        debugShowCheckedModeBanner: false,
        theme: ThemeData(primaryColor: Color(0xffFE9900)),
        // home: IndexPage()
      ),
    );
  }
}

第四步 在某页面应用provider

import 'package:provider/provider.dart';
import 'package:flutter_bilibili/provider/count_num_provider.dart';

class StatePage extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    var _count = Provider.of<CountNumProvider>(context);
    return Scaffold(
        body: Center(
            child: liveWiget("${_count.value}", _count.incrementNum),
            )
        );
    }
    
    Widget liveWiget(text, cb) {
        return Container(
          child: Column(
            mainAxisAlignment: MainAxisAlignment.center,
            children: <Widget>[
              Text(text, style: TextStyle(fontSize: 20)),
              RaisedButton(
                child: Text('增大'),
                onPressed: cb,
              )
            ],
        ),
    );
  }
}