StateNotifierProviderとbuilderの最小構成

flutter_state_notifier 0.4.0から、 StateNotifierProviderに新しくbuilderというパラメーターが追加されました。

それを使うと、Providerを定義したすぐ下で、context.readやcontext.selectが使えて便利です。

以下はその最小構成です。数字と、それを増やしていくボタンです。

main.dart

import 'package:flutter/material.dart';
import 'package:provider/provider.dart';
import 'package:state_notifier/state_notifier.dart';
import 'package:flutter_state_notifier/flutter_state_notifier.dart';

void main() {
  runApp(Demo());
}

class Demo extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Demo',
      home: Scaffold(
        appBar: AppBar(
          title: const Text('Demo'),
        ),
        body: Center(child: Home()),
      ),
    );
  }
}

class Home extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return StateNotifierProvider<CounterNotifier, CounterState>(
      create: (context) => CounterNotifier(),
      builder: (context, child) {
        final count = context.select((CounterState s) => s.count).toString();
        return Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: [
            RaisedButton(onPressed: () {
              context.read<CounterNotifier>().increment();
            }),
            Text(count),
          ],
        );
      },
    );
  }
}

class CounterState {
  CounterState(this.count);
  int count;
}

class CounterNotifier extends StateNotifier<CounterState> {
  CounterNotifier() : super(CounterState(0));

  void increment() {
    state = CounterState(++state.count);
  }
}