使用提供程序时对话框中的状态未更新答案

【问题标题】：State not updating in dialog box when using providers使用提供程序时对话框中的状态未更新
【发布时间】：2021-12-30 10:58:25
【问题描述】：

我正在尝试打开一个对话框让用户添加两件事：

1- 视频缩略图（图片文件）
视频网址（字符串）

用户点击打开对话框的墨水瓶，然后用户单击对话框中的墨水瓶以选择视频缩略图，即图像文件。图像文件已设置，但它不会更新需要显示拾取文件的墨水池的状态。状态在热重载后更新。我正在使用提供程序来设置图像文件并使用它的实例来检查文件是否被选中。

更改通知器 ->

import 'package:flutter/material.dart';
import 'package:image_picker/image_picker.dart';

class GetThumbnailImage extends ChangeNotifier {
  PickedFile? image;

  Future setImage(var file) async {
    image = file;
    notifyListeners();
  }
}

使用更改通知器的小部件 ->

InkWell(
        onTap: () {
          getVideoImage().then((image) {
            print(image);
            if (image != null) {
              _imageInstance.setImage(image);
            }
          });
        },
        child: SizedBox(
          width: MediaQuery.of(context).size.width * 0.8,
          height: MediaQuery.of(context).size.height * 0.25,
          child: Center(
            child: _imageInstance.image == null
                ? SizedBox(
                    width: 200,
                    height: 200,
                    child: FadeInImage(
                      image: NetworkImage(
                          apiBase + productId.toString() + apiLaterPart),
                      placeholder:
                          AssetImage("assets/images/Otherimages/addvideo.jpg"),
                      imageErrorBuilder: (context, error, stackTrace) {
                        return Image.asset(
                            'assets/images/Otherimages/addvideo.jpg',
                            fit: BoxFit.fitWidth);
                      },
                      fit: BoxFit.fitWidth,
                    ),
                  )
                : Image.file(
                    File(_imageInstance.image!.path),
                  ),
          ),
        ))

【问题讨论】：

标签： flutter dialog provider state-management

【解决方案1】：

在您要重建的小部件之上添加消费者小部件

                 Center(
                      child: Consumer<GetThumbnailImage>(
                        builder:(context, model, child) => model.image == null
                            ? SizedBox(
                                width: 200,
                                height: 200,
                                child: FadeInImage(
                                  image: NetworkImage(apiBase +
                                      productId.toString() +
                                      apiLaterPart),
                                  placeholder: AssetImage(
                                      "assets/images/Otherimages/addvideo.jpg"),
                                  imageErrorBuilder:
                                      (context, error, stackTrace) {
                                    return Image.asset(
                                        'assets/images/Otherimages/addvideo.jpg',
                                        fit: BoxFit.fitWidth);
                                  },
                                  fit: BoxFit.fitWidth,
                                ),
                              )
                            : Image.file(
                                File(model.image!.path),
                              ),
                      ),
                    ),

【讨论】：

谢谢，这行得通。标记为正确答案。

【解决方案2】：

对您的代码进行此更改并尝试

class GetThumbnailImage extends ChangeNotifier {
  PickedFile? _image;
  
  PickedFile get image => _image;

  Future setImage(var file) async {
    _image = file;
    notifyListeners();
  }
}

【讨论】：

【解决方案3】：

原因是“对话框不是小部件树的一部分”

您的代码不完整，无法提供帮助，但这里有一些建议。

解决方案 1。

您可以将父窗口小部件的context 传递给对话框，因此对话框的行为也应该像窗口小部件树的一部分

解决方案 2.（更好）

在showDialogBox 方法中使用类似的东西...

final image = context.watch<GetThumbnailImage>();
    ChangeNotifierProvider.value(
      value: image
      child: Dialog(...)
   );

现在您可以在对话框中使用提供者的实例，它还将重建小部件树以更新 UI

【讨论】：

谢谢，Usama，我明白了逻辑，你是对的，但由于某种原因，它不起作用。看起来我不得不使用消费者小部件。
消费者正在工作，因为您将父母的上下文传递给它。
知道了。非常感谢！