flutter_bloc :使 initialState 方法异步

Posted

技术标签:

【中文标题】flutter_bloc :使 initialState 方法异步【英文标题】:flutter_bloc : Make initialState method async 【发布时间】:2020-06-07 18:02:38 【问题描述】:

我正在使用 flutter_bloc 包来管理我的应用程序中的状态。我有一个用例,我必须从远程数据库加载初始状态。这要求 initialState 方法是异步的,但事实并非如此。

如果不使用 initialState 方法,从远程数据库加载 Bloc 初始状态的最佳方法是什么?

【问题讨论】:

为什么不使用StreamBuilderFutureBuilder 在从远程数据库获取数据时显示加载状态,然后在获取完成后显示用户界面。 【参考方案1】:

综合解释:

flutter_bloc插件中BlocinitialState必须同步。 因为当 bloc 被实例化时,必须有一个立即可用的初始状态。

因此,如果您想要来自异步源的状态,您可以在 mapEventToState 函数内调用您的异步函数,并在您的工作完成时发出一个新状态。 p>

一般标准: 步骤(1): 使用您想要的事件和状态创建您自己的 Bloc 类。

class YourBloc extends Bloc<YourEvent, YourState> 
  @override
  YourState get initialState => LoadingState();

  @override
  Stream<YourState> mapEventToState(YourEvent event) async* 
    if (event is InitEvent) 
      final data = await _getDataFrom_SharedPreferences_OR_Database_OR_anyAsyncSource();
      yield LoadedState(data);
    
  


其中LoadingStateLoadedState 可以是YourState 类或相同类型的子类,并且可以具有不同的属性以供以后在小部件中使用。 同样,InitEvent 和其他你的事件也吃掉了YourEvent 类的子类或只是一个枚举。

步骤(2): 现在,当您要创建BlocProvider 小部件时,您可以立即添加initEvent,如下所示:

BlocProvider<YourBloc>(
  create: (_) => YourBloc()..add(InitEvent()),
  child: YourChild(),
)

步骤(3): 使用不同的状态来显示不同的小部件:

BlocBuilder<YourBloc, YourState>(
  builder: (context, state) 
    if (state is LoadingState) 
      return Center(child: CircularProgressIndicator(),);
    
    if (state is LoadedState) 
      return YourWidget(state.data);
    
  
)

实例: 请假设我们在购物应用中为每个产品都有一个计数器(+/-),并且我们希望将选定的项目计数保存在 SharedPreferencesdatabase 中(您可以使用任何异步数据源)。这样每当用户打开应用程序时,他/她就可以看到所选项目的数量。

//our events:
enum CounterEvent increment, decrement, init

class YourBloc extends Bloc<CounterEvent, int>
    final Product product;
    YourBloc(int initialState, this.product) : super(initialState);

    @override
    Stream<int> mapEventToState(CounterEvent event) async* 
        int newState;
        if(event == CounterEvent.init)
            //get data from your async data source (database or shared preferences or etc.)
            newState = data.count;
            yield newState;
        
        else if(event == CounterEvent.increment)
            newState = state + 1;
            saveNewState(newState);
            yield newState;
        else if(event  == CounterEvent.decrement && state > 0)
            newState = state - 1;
            saveNewState(newState);
            yield newState;
        
    

    void saveNewState(int count)
        //save your new state in database or shared preferences or etc.
    


class ProductCounter extends StatelessWidget 
  
  final Product product;
  ProductCounter(this.product);
  
  @override
  Widget build(BuildContext context) 
    return BlocProvider<YourBloc>(
        //-1 is a fake initial (sync) value that is converted to progressbar in BlocBuilder
        create: (context) => YourBloc(-1, product)..add(CounterEvent.init),
        child: YourWidget()
    );
  


class YourWidget extends StatelessWidget 

  @override
  Widget build(BuildContext context) 
    
    final _yourBloc  = BlocProvider.of<YourBloc>(context);

    return Row(
      mainAxisAlignment: MainAxisAlignment.center,
      children: <Widget>[
        FloatingActionButton(
            child: const Icon(Icons.add),
            onPressed: () => _yourBloc.add(CounterEvent.increment),
          ),
        BlocBuilder<ProductCounterBloc, int>(
              builder: (BuildContext context, int state) 
                if(state == -1)
                  return Center(child: CircularProgressIndicator(),);
                else 
                  return Container(
                    width: 24,
                    child: Text(
                      state > 0 ? state.toString().padLeft(2, "0") : "-",
                      textAlign: TextAlign.center,
                    ),
                  );
                
              
            ),
        FloatingActionButton(
          child: const Icon(Icons.remove),
          onPressed: () => _yourBloc.add(CounterEvent.decrement),
        ),
      ],
    );
  




【讨论】:

【参考方案2】:

另一个选项可能是,例如在配置文件中你有依赖注入,你可以在那里等待一个状态。然后该状态传入集团的构造函数。因此,现在在该集团中,您可以轻松地将 initialState 指向您传入的那个。

是的,您必须记住,您应该在数据准备就绪时更改初始状态。

现在我为这个场景提供一个用例。 您可能已经为用户显示了基本选项或设置。您从初始状态获得的简单数据。 然后是下一个状态:加载状态例如可以显示加载指示器,哪个背景具有某种不透明度。在加载更多需要的数据时,用户已经可以看到基本选项。

【讨论】:

【参考方案3】:

您可以将event 发送到bloc 以开始加载(在此事件块发送新的LoadingState),在那里您接收并显示Loader,然后在加载结束时bloc 发送另一个`state with数据,您只需将加载状态切换为已加载(并显示数据)。 你不需要等待调用,你要做的只是推送和接收状态

【讨论】:

这是要走的路。你不能等待初始状态。当你想要的数据准备好时,你应该改变状态。

以上是关于flutter_bloc :使 initialState 方法异步的主要内容,如果未能解决你的问题,请参考以下文章

由于某种原因不能使用flutter_bloc

从 v7.2.1 迁移到 flutter_bloc v 8.0.0 后不会触发 flutter_bloc 事件

flutter_bloc/provider RepositoryProvider vs Provider

使用带有flutter_bloc的Equatable类

改变flutter_bloc中的`currentState`属性

使用flutter_bloc提交时如何验证表单?