如何在多个小部件中使用相同的块

Posted 2023-02-23

【中文标题】如何在多个小部件中使用相同的块

【英文标题】：how to use same bloc in multiple widgets

【发布时间】：2020-08-15 02:14:37

【问题描述】：

我在当前项目中遇到了问题，所以创建了这个问题我无法在其他小部件中获得相同的 bloc 状态我试过这个https://github.com/felangel/bloc/issues/74#issuecomment-457968962 但是如果在其他小部件中再次添加提供程序，我会收到BlocProvider.of() called with a context that does not contain a Bloc of type CounterBloc. 错误，为该页面创建另一个状态如何在不同的小部件中使用相同的 bloc 状态。

import 'dart:async';

import 'package:flutter/material.dart';

import 'package:flutter_bloc/flutter_bloc.dart';

class SimpleBlocDelegate extends BlocDelegate 
  @override
  void onEvent(Bloc bloc, Object event) 
    print(event);
    super.onEvent(bloc, event);
  

  @override
  void onTransition(Bloc bloc, Transition transition) 
    print(transition);
    super.onTransition(bloc, transition);
  

  @override
  void onError(Bloc bloc, Object error, StackTrace stacktrace) 
    print(error);
    super.onError(bloc, error, stacktrace);
  


void main() 
  BlocSupervisor.delegate = SimpleBlocDelegate();
  runApp(App());


class App extends StatelessWidget 
  @override
  Widget build(BuildContext context) 
    return BlocProvider(
      create: (_) => ThemeBloc(),
      child: BlocBuilder<ThemeBloc, ThemeData>(
        builder: (_, theme) 
          return MaterialApp(
            title: 'Flutter Demo',
            home: BlocProvider(
              create: (_) => CounterBloc(),
              child: CounterPage(),
            ),
            theme: theme,
          );
        ,
      ),
    );
  


class CounterPage extends StatelessWidget 
  @override
  Widget build(BuildContext context) 
    return Scaffold(
      appBar: AppBar(title: const Text('Counter')),
      body: BlocBuilder<CounterBloc, int>(
        builder: (_, count) 
          return Column(
            children: <Widget>[
              Text(
                '$count',
                style: const TextStyle(fontSize: 24.0),
              ),
              RaisedButton(
                child: Text("Recreating state"),
                onPressed: () 
                  Navigator.push(
                    context,
                    MaterialPageRoute(builder: (context) => ThirdPage()),
                  );
                ,
              ),
              RaisedButton(
                child: Text("Getting errorBlocProvider.of() called  "),
                onPressed: () 
                  Navigator.push(
                    context,
                    MaterialPageRoute(builder: (context) => FourthPage()),
                  );
                ,
              )
            ],
          );
        ,
      ),
      floatingActionButton: Column(
        crossAxisAlignment: CrossAxisAlignment.end,
        mainAxisAlignment: MainAxisAlignment.end,
        children: <Widget>[
          Padding(
            padding: const EdgeInsets.symmetric(vertical: 5.0),
            child: FloatingActionButton(
              heroTag: "btn3",
              child: const Icon(Icons.add),
              onPressed: () =>
                  context.bloc<CounterBloc>().add(CounterEvent.increment),
            ),
          ),
          Padding(
            padding: const EdgeInsets.symmetric(vertical: 5.0),
            child: FloatingActionButton(
              heroTag: "dd",
              child: const Icon(Icons.remove),
              onPressed: () =>
                  context.bloc<CounterBloc>().add(CounterEvent.decrement),
            ),
          ),
          Padding(
            padding: const EdgeInsets.symmetric(vertical: 5.0),
            child: FloatingActionButton(
              heroTag: "btn2",
              child: const Icon(Icons.brightness_6),
              onPressed: () => context.bloc<ThemeBloc>().add(ThemeEvent.toggle),
            ),
          ),
        ],
      ),
    );
  


**/// new state is created i want to use previous state**
///
///
class ThirdPage extends StatelessWidget 
  @override
  Widget build(BuildContext context) 
    return BlocProvider(
      create: (_) => CounterBloc(),
      child: BlocBuilder<CounterBloc, int>(
        builder: (BuildContext context, int count) 
          return Scaffold(
            backgroundColor: Colors.white,
            body: Center(child: Text('$count')),
          );
        ,
      ),
    );
  




**/// getting error BlocProvider.of() called with a context that does not co**
///
///
class FourthPage extends StatelessWidget 
  @override
  Widget build(BuildContext context) 
    final CounterBloc _counterBloc = BlocProvider.of<CounterBloc>(context);
    return BlocBuilder<CounterBloc, int>(
      bloc: _counterBloc,
      builder: (BuildContext context, int count) 
        return Scaffold(
          backgroundColor: Colors.white,
          body: Center(child: Text('$count')),
        );
      ,
    );
  


enum CounterEvent  increment, decrement 

class CounterBloc extends Bloc<CounterEvent, int> 
  @override
  int get initialState => 0;

  @override
  Stream<int> mapEventToState(CounterEvent event) async* 
    switch (event) 
      case CounterEvent.decrement:
        yield state - 1;
        break;
      case CounterEvent.increment:
        yield state + 1;
        break;
      default:
        throw Exception('oops');
    
  


enum ThemeEvent  toggle 

class ThemeBloc extends Bloc<ThemeEvent, ThemeData> 
  @override
  ThemeData get initialState => ThemeData.light();

  @override
  Stream<ThemeData> mapEventToState(ThemeEvent event) async* 
    switch (event) 
      case ThemeEvent.toggle:
        yield state == ThemeData.dark() ? ThemeData.light() : ThemeData.dark();
        break;
    
  

【参考方案1】：

使用 BlocProvider.value 命名构造函数

class CounterPage extends StatefulWidget 
  @override
  _CounterPageState createState() => _CounterPageState();


class _CounterPageState extends State<CounterPage> 
  CounterBloc counterBloc;

  @override
  void initState() 
    super.initState();
    counterBloc = BlocProvider.of<CounterBloc>(context);
  

  @override
  void dispose() 
    counterBloc.close();
    super.dispose();
  

  @override
  Widget build(BuildContext context) 
    return Scaffold(
      appBar: AppBar(title: const Text('Counter')),
      body: BlocBuilder<CounterBloc, int>(
        builder: (_, count) 
          return Column(
            children: <Widget>[
              Text(
                '$count',
                style: const TextStyle(fontSize: 24.0),
              ),
              RaisedButton(
                child: Text("Recreating state"),
                onPressed: () 
                  Navigator.push(
                    context,
                    MaterialPageRoute(
                      builder: (context) => BlocProvider<CounterBloc>.value(
                        value: counterBloc,
                        child: ThirdPage(),
                      ),
                    ),
                  );
                ,
              ),
              RaisedButton(
                child: Text("Getting errorBlocProvider.of() called  "),
                onPressed: () 
                  Navigator.push(
                    context,
                    MaterialPageRoute(
                      builder: (context) => BlocProvider<CounterBloc>.value(
                        value: counterBloc,
                        child: FourthPage(),
                      ),
                    ),
                  );
                ,
              )
            ],
          );
        ,
      ),
      // ....
    );
  

【讨论】：

经过多次搜索和头痛，你救了我的命，谢谢

谢谢你。这在我的应用程序中造成了令人难以置信的愚蠢错误。谢谢