状態管理 - 1m-llc/Flutter-KtoK GitHub Wiki

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

void main() {
  runApp(
    // アプリ全体をProviderでラップする
    // childにWidgetを設定
    ChangeNotifierProvider(
        create: (_) => CounterNotifier(),
        child: TopWidget(),
    ),
  );
}

// Providerに値の変更を通知するChangeNotifier継承クラス
class CounterNotifier with ChangeNotifier {
  int _count = 0;
  int get count => _count;

  void increment() {
    _count++;
    // このクラスを使っているWidgetに対して状態の変化を通知
    notifyListeners();
  }
}

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

  @override
  Widget build(BuildContext context) {
    final counterNotifier = Provider.of<CounterNotifier>(context, listen: false);

    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(
          title: Text('Example'),
        ),
        body: Center(
          child: Column(
            mainAxisSize: MainAxisSize.min,
            mainAxisAlignment: MainAxisAlignment.center,
            children: <Widget>[
              Text('Push + Button:'),
              // Consumerでラップされた数値表示部分のみのWidgetを更新する（それ以外は更新しない）
              Consumer<CounterNotifier>(
                  builder: (BuildContext context, CounterNotifier value, Widget _) {
                    return Text(
                        '${value.count}',
                        style: Theme.of(context).textTheme.headline4,
                    );
                  },
              ),

            ],
          ),
        ),
        floatingActionButton: FloatingActionButton(
          // ＋ボタンが押されたらCounterNotifierクラスのincrementメソッドを呼び出す
          onPressed: counterNotifier.increment,
          child: const Icon(Icons.add),
        ),
      ),
    );
  }
}

import 'package:flutter/material.dart';
import 'package:bloc/bloc.dart';
import 'package:flutter_bloc/flutter_bloc.dart';

class CounterObserver extends BlocObserver {
  @override
  void onChange(Cubit cubit, Change change) {
    print('${cubit.runtimeType} $change');
    super.onChange(cubit, change);
  }
}

// Streamを継承したCubitを継承する
class CounterCubit extends Cubit<int> {
  CounterCubit() : super(0);

  void increment() => emit(state + 1);
}

void main() {
  Bloc.observer = CounterObserver();
  runApp(MyApp());
}

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: TopPage(),
    );
  }
}

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

  @override
  Widget build(BuildContext context) {
    return BlocProvider(
      create: (_) => CounterCubit(),
      child: CounterWidget(),
    );
  }
}

class CounterWidget extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    final textTheme = Theme.of(context).textTheme;
    return Scaffold(
      appBar: AppBar(title: const Text('Counter')),
      body: Center(
        child: BlocBuilder<CounterCubit, int>(
          builder: (context, state) {
            return Text('$state', style: textTheme.headline2);
          },
        ),
      ),
      floatingActionButton: FloatingActionButton(
        // ボタンを押したらCounterCubitクラスのincrementメソッドが呼ばれる
        onPressed: () => context.bloc<CounterCubit>().increment(),
        child: Icon(Icons.add),
      ),
    );
  }
}