Flutter Provider Demo

counter_model.dart

import 'package:flutter/material.dart';

class CounterModel with ChangeNotifier {
  int _count;

  int get count => _count;

  CounterModel(this._count);

  void increment() {
    _count++;
    notifyListeners();
  }

  void decrement() {
    _count--;
    notifyListeners();
  }
}

home_page.dart

import 'package:flutter/material.dart';
import 'package:flutter_provider_demo/counter_model.dart';
import 'package:flutter_provider_demo/second_page.dart';
import 'package:provider/provider.dart';

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

  @override
  Widget build(BuildContext context) {
    print('-----> ${this.runtimeType} build');
    return Scaffold(
      appBar: AppBar(
        title: Text(""),
        actions: <Widget>[
          IconButton(
              icon: Icon(Icons.arrow_forward),
              onPressed: () => goNextPage(context))
        ],
      ),
      body: buildBody(),
      floatingActionButton: FloatingActionButton(
        onPressed: () =>
            Provider.of<CounterModel>(context, listen: false).increment(),
        tooltip: 'Increment',
        child: Icon(Icons.add),
      ),
    );
  }

  Widget buildBody() {
    return Center(
      child: Column(
        mainAxisAlignment: MainAxisAlignment.center,
        children: <Widget>[
          CountWithProviderOf(),
          Divider(),
          CountWithConsumer(),
          Divider(),
          CountWithSelector(),
        ],
      ),
    );
  }

  // 通过 Provider.of<T>(context) 将会把调用了该方法的 context 作为听众 会重建整个页面
  Widget buildBodyWithProviderOf(BuildContext context) {
    final model = Provider.of<CounterModel>(context);

    return Center(
      child: Column(
        mainAxisAlignment: MainAxisAlignment.center,
        children: <Widget>[
          Text(
            "${model.count}",
            style: Theme.of(context).textTheme.headline4,
          ),
        ],
      ),
    );
  }

  void goNextPage(BuildContext context) {
    Navigator.of(context).push(MaterialPageRoute(
      builder: (context) {
        //指定跳转的页面
        return SecondPage();
      },
    ));
  }
}

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

  @override
  Widget build(BuildContext context) {
    print('-----> ${this.runtimeType} build');
    final model = Provider.of<CounterModel>(context);
    return Container(
      child: Text(
        "${model.count}",
        style: Theme.of(context).textTheme.headline4,
      ),
    );
  }
}

//通过Consumer<T> 获取数据
class CountWithConsumer extends StatelessWidget {
  const CountWithConsumer({Key key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return Consumer<CounterModel>(
      builder: (context, model, child) {
        print('-----> ${this.runtimeType} build');
        return Column(
          children: <Widget>[
            Text(
              model.count.toString(),
              style: Theme.of(context).textTheme.headline4,
            ),
            child
          ],
        );
      },
      child: SomeExpensiveWidget(), //传递给 builder 第三个参数，状态更新时此组件不会重建
    );
  }
}

// Selector<T> 获取数据
class CountWithSelector extends StatelessWidget {
  const CountWithSelector({Key key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return Selector<CounterModel, int>(
      selector: (context, model) => model.count,
      shouldRebuild: (prev, next) => next % 5 == 0,
      builder: (context, count, child) {
        print('-----> ${this.runtimeType} build');
        return Column(
          children: <Widget>[
            Text(
              "$count % 5 == 0",
              style: Theme.of(context).textTheme.headline4,
            ),
            child,
          ],
        );
      },
      child: SomeExpensiveWidget(), //传递给 builder 第三个参数，状态更新时此组件不会重建
    );
  }
}

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

  @override
  Widget build(BuildContext context) {
    print('-----> ${this.runtimeType} build');
    return Container(
      child: Text("SomeExpensiveWidget"),
    );
  }
}

main.dart

import 'package:flutter/material.dart';
import 'package:flutter_provider_demo/counter_model.dart';
import 'package:flutter_provider_demo/home_page.dart';
import 'package:provider/provider.dart';

void main() {
  runApp(ChangeNotifierProvider<CounterModel>(
    create: (_) => CounterModel(0),
    child: MyApp(),
  ));
}

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Provider Counter Demo',
      theme: ThemeData(
        primarySwatch: Colors.red,
      ),
      home: HomePage(),
    );
  }
}

second_page.dart

import 'package:flutter/material.dart';
import 'package:flutter_provider_demo/counter_model.dart';
import 'package:flutter_provider_demo/home_page.dart';
import 'package:provider/provider.dart';

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

  @override
  Widget build(BuildContext context) {
    print('-----> ${this.runtimeType} build');
    return Scaffold(
      appBar: AppBar(
        title: Text("Second Page"),
      ),
      body: Center(
        child: CountWithConsumer(),
      ),
      floatingActionButton: FloatingActionButton(
        onPressed: () =>
            Provider.of<CounterModel>(context, listen: false).increment(),
        tooltip: 'Increment',
        child: Icon(Icons.add),
      ),
    );
  }
}