How to solve: State not updating in dialog box when using providers

Question

Asked by Muhammad M on November 19, 2021 (source).

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

Answer

Question answered by Sajad A (source).

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),
                              ),
                      ),
                    ),
DIALOG FLUTTER PROVIDER STATE-MANAGEMENT
SHARE: