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

Question

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

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

登录形式：

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'),
),
],
),
);
},
),
);
}

非常感谢您的任何建议。谢谢

Answer 1

好的，所以您的示例的问题是根本没有使用state。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'),
),
],
),
);
},
),
);
}