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

Question

I am trying to open a dialog box to let users add 2 things:

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

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

更改通知程序 ->

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),
                  ),
          ),
        ))

Answer 1

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

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

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

Answer 2

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

                 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),
                              ),
                      ),
                    ),

Answer 3

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

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

解决方案 1.

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

解决方案 2。（更好）

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

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

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

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

State not updating in dialog box when using providers

provider

dialog

state-management

flutter