对话框小部件Flutter中的动态变化

62o28rlo  于 2022-12-24  发布在  Flutter
关注(0)|答案(1)|浏览(157)

我有一个工具,用户可以更新自己的个人资料图片。用户点击按钮,然后弹出对话框显示。

按键呼叫:

TextButton(
  onPressed: () {
    changeImage();
    setState(() {});
  },
  child: Text(
    'Changer de photo',
    style: TextStyle(
        fontSize: 9.sp,
        fontWeight: FontWeight.w700,
        color: Theme.of(context)
            .primaryColorLight),
  ),

更改图像功能:

Future changeImage() {
    return showDialog(
        context: context,
        builder: (BuildContext context) => Dialog(
              child: Container(
                decoration: BoxDecoration(
                  color: Theme.of(context).primaryColor,
                ),
                padding: const EdgeInsets.all(30),
                width: 300.0,
                child: Column(
                  mainAxisSize: MainAxisSize.min,
                  children: [
                    Text(
                      "Change ta photo de profil",
                      style: Theme.of(context).textTheme.titleMedium,
                      textAlign: TextAlign.center,
                    ),
                    SizedBox(
                      height: 2.h,
                    ),
                    if (pickedFile != null)
                      Container(
                          child: Image.file(
                        File(pickedFile!.path!),
                        width: 200,
                        height: 200,
                      )),
                    TextButton(
                      onPressed: () {
                        selectFile();
                        setState(() {});
                        print(uploadReady);
                      },
                      child: const Text(
                        "Choisir une image",
                      ),
                    ),
                    SizedBox(
                      height: 2.h,
                    ),
                    ElevatedButton(
                        onPressed: () {
                          uploadFile();
                          Navigator.pop(context);
                          setState(() {});
                        },
                        child: const Text(
                          "Appliquer l'image",
                        )),
                  ],
                ),
              ),
            ));
  }

正如你所看到的,我想在用户点击应用图像之前显示一个预览。但是在用户选择他的图像之后,预览没有显示。我需要退出弹出对话框,重新点击我的初始按钮(显示弹出窗口),然后图像显示。
如何动态显示图像的预览?

brgchamk

brgchamk1#

要更新对话框ui,可以使用StatefulBuildersetState

Future<void> changeImage() async{
    return await showDialog(
        context: context,
        builder: (BuildContext context) => StatefulBuilder(
              builder: (context, setState) => Dialog(
                child: Container(

和使用情形

await changeImage();
setState((){}); // to update main ui

相关问题