Flutter alert box is not updating picked image from gallery

Question

I am using an alert box where I am getting the image from gallery of the user, but the updated image is not getting displayed.

When I close the alert box and again open the alert box, then it's getting displayed. I am using provider package to handle the data.

Here is a video of what I am getting now

Here is my code:

    child: ChangeNotifierProvider<MyProvider>(
      create: (context) => MyProvider(),
      child: Consumer<MyProvider>(
        builder: (context, provider, child) {
          return Column(
            children: [
              ElevatedButton(
                  onPressed: () {
                    showDialog(
                        barrierDismissible: true,
                        context: context,
                        barrierColor: Colors.black.withOpacity(0.5),
                        builder: (ctx) => AlertDialog(actions: <Widget>[
                             ----> // alert box styling
    Expanded(
                                            child: Column(
                                              children: [
                                                CircleAvatar(
                                                    backgroundColor:
                                                        Colors.transparent,
                                                    radius: 175,
                                                    child: ClipOval(
                                                    
                                                      child: provider
                                                                  .image !=
                                                              null
                                                          ? Image.network(
                                                              provider.image
                                                                  .path,
                                                              height: 200,
                                                            )
                                                          : Image.asset(
                                                              'assets/profile.webp',
                                                              width: 250.0,
                                                              height: 250.0,
                                                              fit: BoxFit
                                                                  .cover,
                                                            ),
                                                    )),
                                                
                                                Row(
                                                  mainAxisAlignment:
                                                      MainAxisAlignment
                                                          .spaceBetween,
                                                  children: <Widget>[
                                                    ElevatedButton(
                                                      onPressed: () async {
                                                       
                                                        var image = await ImagePicker()
                                                            .pickImage(
                                                                source: ImageSource
                                                                    .camera);
                                                        provider.setImage(
                                                            image);
                                                        
                                                      },
                                                      child: Text(
                                                        'Use camera',
                                                        style: t3b,
                                                      ),
                                                    ),
                                                    
                                           
                  },
                  child: const Text('Click me ')),
              
            ],
          );
        },
      ),
    ),
  ),
);
   }
    }

 class MyProvider extends ChangeNotifier {
  var image;

 Future setImage(img) async {
   image = img;
   notifyListeners();
   }

Answer 1

I am also facing the same issue in mobile development then I know we have to rebuild the whole dialog and then it will work well

showDialog( context: context, builder: (BuildContext context) {

int selectedRadio = 0; // Declare your variable outside the builder

return AlertDialog( 
  content: StatefulBuilder(  // You need this, notice the parameters below:
    builder: (BuildContext context, StateSetter setState) {
      return Column(  // Then, the content of your dialog.
        mainAxisSize: MainAxisSize.min,
        children: List<Widget>.generate(4, (int index) {
          return Radio<int>(
            value: index,
            groupValue: selectedRadio,
            onChanged: (int value) {
              // Whenever you need, call setState on your variable
              setState(() => selectedRadio = value);
            },
          );
        }),
      );
    },
  ),
 );
  },
);

Use a StatefulBuilder in the content section of the AlertDialog. Even the StatefulBuilder docs actually have an example with a dialog.

What it does is provide you with a new context, and setState function to rebuild when needed.

also sharing the reference I used for this: Reference for solving this same