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

1. 1- Video thumbnail(Image file)
2. Video URL(String)

The user taps on an Inkwell which opens the dialog box, then the user clicks the inkwell in the dialog box to pick a video thumbnail i.e image file. The image file gets set, but it doesn't update the state of the inkwell which needs to show the picked file. The state is updated after hot reload. I am using the provider to set the image file and using its instance to check if the file is picked or not.

Change Notifier ->

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();
  }
}

Widgets using the change notifier ->

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

CodePudding user response：

made this changes to your code and try

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

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

CodePudding user response：

Add a consumer widget on top of widgets that you want to rebuild

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