Search code examples
flutterdialogproviderstate-management

State not updating in dialog box when using providers


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

Solution

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