BLoCを使って共有のカウントダウンタイマーを別々のページで使いたい。

Question

前提・実現したいこと

BLocを使って共通の時間を示すカウントダウンタイマーを別々のページで使いたいと思っています。
コードを単純にすると下記のようなコードのテキスト部分にカウントダウンタイマーを表示させたいです。

import 'package:flutter/material.dart';

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

class MyApp extends StatelessWidget {
  // This widget is the root of your application.
  @override
  Widget build(BuildContext context) {
    return MaterialApp(

      home: HomePage(),
      );

  }



}

class HomePage extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('サンプルページ'),
      ),
      body: Center(
        child: Column(
          children: [
            RaisedButton(
                child: Text('ダイアログ表示'),
                onPressed: (){
                  _showDialog(context);
                }
            ),
            Text('このテキスト部分にカウントダウンタイマーを表示させたい')
          ],
        ),
      ),
    );
  }



  _showDialog(context){
    showDialog(
        context: context,
        builder: (context){
          return AlertDialog(
            title: Text('sample dialog'),
            actions: [
              RaisedButton(
                  child: Text('次のページへ'),
                  onPressed: (){
                    Navigator.push(
                      context,
                      MaterialPageRoute(builder: (context) => NextPage()),
                    );
                  })
            ],
          );
        });
  }
}


class NextPage extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(),
      body: Center(
        child: Text('このテキスト部分にカウントダウンタイマーを表示させたい'),
      ),
    );
  }
}

試したこと

リンク内容
この方の記事を読んだりしながら調べていろいろやってみたんですが、Streambuilderを使うのかなと思うのですが、非同期で値を変更しながらどちらで見ても同じ値を取得する方法がわかりません。
ざっくりとした質問で申し訳ないのですが、大まかでもいいので教えてもらいたいです。

Answer 1

import 'dart:async';

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

void main() {
  runApp(const MyApp());
}

enum CounterEvent { decrement, reset }

class CounterBloc extends Bloc<CounterEvent, int> {
  CounterBloc() : super(10);

  void startCountDown() {
    Timer.periodic(Duration(seconds: 1), (_) {
      if (state == 0) {
        this.add(CounterEvent.reset);
      } else {
        this.add(CounterEvent.decrement);
      }
    });
  }

  @override
  Stream<int> mapEventToState(CounterEvent event) async* {
    switch (event) {
      case CounterEvent.decrement:
        yield state - 1;
        break;
      case CounterEvent.reset:
        yield 10;
        break;
    }
  }
}

class MyApp extends StatelessWidget {
  const MyApp({Key key}) : super(key: key);
  @override
  Widget build(BuildContext context) {
    return BlocProvider(
        create: (_) => CounterBloc()..startCountDown(),
        child: MaterialApp(
          title: 'Blob Timer Demo',
          theme: ThemeData(
            primarySwatch: Colors.grey,
          ),
          home: HomePage(),
        ));
  }
}

class HomePage extends StatelessWidget {
  @override
  Widget build(BuildContext context) => Scaffold(
        appBar: AppBar(
          title: Text('サンプルページ'),
        ),
        body: Center(
          child: Column(
            children: [
              RaisedButton(
                  child: Text('ダイアログ表示'),
                  onPressed: () => _showDialog(context)),
              BlocBuilder<CounterBloc, int>(
                  builder: (context, state) => Text('$state'))
            ],
          ),
        ),
      );

  _showDialog(context) => showDialog(
      context: context,
      builder: (_) => AlertDialog(
            title: Text('sample dialog'),
            actions: [
              RaisedButton(
                  child: Text('次のページへ'),
                  onPressed: () {
                    Navigator.of(context).push(
                      MaterialPageRoute(builder: (_) => NextPage()),
                    );
                  })
            ],
          ));
}

class NextPage extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(),
      body: Center(
          child: BlocBuilder<CounterBloc, int>(
              builder: (context, state) => Text('$state'))),
    );
  }
}

こうですかね。

気をつけなければならないのは、MaterialAppの下でNavigatorで遷移する場合、何も指定しなければ、MaterialAppの基底のWidgetを入れ替えてしまうという動作を覚えておくことです。

そのため、複数のページで同じProviderから与えられるstateを得るためには、MaterialAppの外側にProviderを配置しなければなりません。

内側でProviderを用いると、Navigatorで遷移した先のPageのbuildの引数となっているBuildContextのインスタンスはMaterialAppの基底のBuildContextであるため、Providerを含まないことになります。

もっとスコープを限定してBlocを用いてStateをPageで共有する場合は、スコープを限定したNavigatorを自分で作る必要があります。この場合、Navigatorが階層化するため複雑になりがちなので、ページ遷移の管理について設計をよく考える必要があります。

Comments

[Inete6Q]

ありがとうございます！