我正在用户/配置文件屏幕中使用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以使这篇文章更简短,如果需要,我可以发布它.

谢谢你抽出时间来,我真的很感激!

推荐答案

我假设showModalBottomOptions调用showModalBottomSheet,其中您应该返回它的值Future.

Future<void> showModalBottomOptions(BuildContext context) {
  return showModalBottomSheet(...);
}

在您的onPressed回调中,将其作为asnyc函数并等待对showModalBottomOptions的调用.在下一行中,对ref进行必要的操作:

onPressed: () async {
  await showModalBottomOptions(context);

  // You can use `ref` here
  ref.invalidate(profileDataProvider);
}

您不必让方法返回Future<void>,您也可以使用Future<bool>,例如,如果您想要根据图像上传的成功程度有条件地刷新数据:

Future<bool> showModalBottomOptions(BuildContext context) {
  // Do some logic here
}
onPressed: () async {
  final isSuccess = await showModalBottomOptions(context);
  if (isSuccess) {
    ref.invalidate(profileDataProvider);
  }
}

Flutter相关问答推荐

飘动的文本用/字符绕转

如何更改ElevatedButton的 colored颜色 以按下它?

如果文档确实存在,则FiRestore将";False";返回到";if-Document-Existes";...还是我说错了?

SupabaseFlutter 集成问题:无法更新行

我有一个问题:类型';()=>;Null';不是类型转换中类型';(Int)=>;void';的子类型

有没有一种正确的方法可以通过上下滑动在两个小部件(在我的情况下是应用程序栏)之间切换?

Flutter Riverpod,将默认的BTC值改写为我的新状态

构建方法中的性能声明小部件

未处理的异常:第1行第5列出现错误:无效的媒体类型:应为/&;.从API获取数据时在Flutter中

如何在巡逻测试期间重新启动dart 侧应用程序状态?

如何在Flutter中将背景 colored颜色 更改为黑色?

如何在 Flutter 中设计像 zomato 应用程序一样的搜索字段?

Elevated 和 Outlined 按钮之间的动画

如何在 Flutter (iOS) 中解决这个问题

为什么 appBar 小部件在 flutter 中不是常量

如何在两个不同的路由(屏幕)之间正确设置 BlocProvider?

Show Snackbar above to showModalBottomSheet Flutter

如何扫描来自给定链接或按钮的重定向中的所有 URL?

Positioned 的宽度或 SizedBox 的宽度都不适用于堆栈小部件 - Flutter

在Flutter 中将数字转换为印度文字样式