Flutter Cubit：获取存储变量的好方法？

Posted 2023-02-23

【中文标题】Flutter Cubit：获取存储变量的好方法？

【英文标题】：Flutter Cubit: good way to get stored variable?

【发布时间】：2021-08-20 02:23:51

【问题描述】：

我是第一次使用 Flutter 和 Cubit，我想知道这是否是检索存储变量的好方法，在我的 cas 中是当前登录的用户。

登录后，用户可以转到他的个人资料页面并查看/更新它。

登录表单：

submit(BuildContext context) async 
    if (_formKey.currentState!.validate()) 
      _formKey.currentState!.save();

      final authCubit = context.read<AuthCubit>();
      authCubit.login(
        email: _data.email!,
        password: _data.password!,
        deviceName: _deviceInfos.deviceName,
      );
    
  

AuthCubit：登录方式：

class AuthCubit extends Cubit<AuthState> 
  dynamic user;
  
  Future<void> login(
    required String email,
    required String password,
    required String deviceName,
  ) async 
    emit(AuthLoading());

    // Get the user from the API
    this.user = apiResponse['user'];

    emit(AuthConnected(user));
  

个人资料页面：

Widget build(BuildContext context) 
    return Scaffold(
      appBar: AppBar(
        title: Text('Profile'),
      ),
      body: BlocBuilder<AuthCubit, AuthState>(
        builder: (context, state) 
          final user = context.read<AuthCubit>().user;

          return Center(
            child: Column(
              children: <Widget>[
                Text('Hello, ' + (user != null ? user['name'] : 'stranger.')),
                ElevatedButton(
                  onPressed: () 
                    context.read<AuthCubit>().logout();
                  ,
                  child: Text('Logoout'),
                ),
              ],
            ),
          );
        ,
      ),
    );

非常感谢任何建议/建议。谢谢！

【参考方案1】：

好的，所以您的示例有什么问题是您根本没有使用状态。 User 是您的状态的一部分，我看到您已经在此处存储它 (emit(AuthConnected(user))，所以只需从 BLoC 中删除 user 对象：

class AuthCubit extends Cubit<AuthState> 
  Future<void> login(
    required String email,
    required String password,
    required String deviceName,
  ) async 
    emit(AuthLoading());

    // Get the user from the API
    final user = apiResponse['user'];

    emit(AuthConnected(user));
  

然后，在 UI 内部，您应该从状态对象而不是直接从 BLoC 获取用户：

Widget build(BuildContext context) 
    return Scaffold(
      appBar: AppBar(
        title: Text('Profile'),
      ),
      body: BlocBuilder<AuthCubit, AuthState>(
        builder: (context, state) 
          final user = state.user; // You should get the error here

          return Center(
            child: Column(
              children: <Widget>[
                Text('Hello, ' + (user != null ? user['name'] : 'stranger.')),
                ElevatedButton(
                  onPressed: () 
                    context.read<AuthCubit>().logout();
                  ,
                  child: Text('Logoout'),
                ),
              ],
            ),
          );
        ,
      ),
    );

现在您应该得到一个错误，因为并非所有状态都包含 user 对象，例如AuthLoading 缺少这一点。要解决这个问题，您应该检查状态类型并相应地渲染 UI：

Widget build(BuildContext context) 
    return Scaffold(
      appBar: AppBar(
        title: Text('Profile'),
      ),
      body: BlocBuilder<AuthCubit, AuthState>(
        builder: (context, state) 
          if (state is AuthLoading) 
            return CircularProgressIndicator(); // E.g. show loader
          

          final user = state.user;

          return Center(
            child: Column(
              children: <Widget>[
                Text('Hello, ' + (user != null ? user['name'] : 'stranger.')),
                ElevatedButton(
                  onPressed: () 
                    context.read<AuthCubit>().logout();
                  ,
                  child: Text('Logoout'),
                ),
              ],
            ),
          );
        ,
      ),
    );

【讨论】：

我刚刚知道我们在内存中有最后一个状态，所以BlocBuilder 将返回AuthConntected 状态及其数据。完美，谢谢！