我正在用户/配置文件屏幕中使用Ffltter Riverpod从Api获取数据.
这是我用来构造用户界面的代码
Widget build(BuildContext context, WidgetRef ref) {
final profileData = ref.watch(profileDataProvider);
return SafeArea(
child: Scaffold(
appBar: topBar,
drawer: const Menu(),
body: SingleChildScrollView(
child: SizedBox(
child: Column(
children: [
profileData.when(
data: (data) {
String image = data.data.userProfile.picture.thumbnail;
if (profileData.isRefreshing) {
return const CircularProgressIndicator.adaptive();
}
return Column(
children: [
const SizedBox(height: 20),
Stack(
clipBehavior: Clip.none,
children: <Widget>[
Container(
width: 200.0,
height: 200.0,
decoration: BoxDecoration(
shape: BoxShape.circle,
image: DecorationImage(
image: CachedNetworkImageProvider(image),
),
),
),
Positioned(
bottom: 5,
right: 5,
child: IconButton(
onPressed: () {
showModalBottomOptions(context);
},
icon: Icon(
Icons.add_a_photo_outlined,
color: ColorConstants.iconTextFieldColor,
size: 40,
),
),
)
],
),
const SizedBox(height: 20),
const Divider(color: Colors.grey),
Text(
'${data.data.userProfile.firstName} ${data.data.userProfile.lastName}',
),
Text(data.data.userProfile.email),
Text(data.data.userProfile.mobile),
],
);
},
error: ((error, stackTrace) {
return Text(error.toString());
}),
loading: CircularProgressIndicator.adaptive,
),
const SizedBox(height: 20),
const Divider(color: Colors.grey),
const Text('OS Type (Andriod, iOS, Chrome)'),
const SizedBox(height: 20),
const Text('OS Version'),
const SizedBox(height: 20),
const Text('DeviceId'),
const SizedBox(height: 20),
const Divider(color: Colors.grey),
OutlinedButton(
onPressed: () {
Navigator.push(
context,
MaterialPageRoute(
builder: (context) => const ChangePassword(),
));
},
child: Text(
'Change Password',
style: TextStyle(
color: ColorConstants.buttonTextColor,
fontSize: TextSize.textButtonSize,
),
),
),
],
),
),
),
),
);
}
函数showMoalBottomOptions显示了两个选项(Camera和Gallery)来 Select 图像,然后我有一个函数可以获取图像并将其上传到服务器.
应用程序工作,但我面临的问题是,图片上传后,我不知道如何在UI中显示新的图像,因为showModalBottomOptions函数超出了构建(BuildContext上下文,WidgetRef ref)我无法访问它.
我如何再次调用Api来刷新图像并向用户显示?
我没有包括showMoalBottomOptions以使这篇文章更简短,如果需要,我可以发布它.
谢谢你抽出时间来,我真的很感激!