Flutter AlertDialog only partly scrollable

Question

I am struggling with an AlertDialog. It looks the way it should and the basic functions also work the way they should, but the scrolling behavior is strange.

The code looks like this:

  void openDialog() {
    showDialog(
      context: context, 
      builder: (context) {
        return SingleChildScrollView(
          child: StatefulBuilder(
            builder: (context, setState) => AlertDialog(
              content: SingleChildScrollView(
                child: Form(
                  key: _formKey,
                  child: Column(
                    children: <Widget>[

                      TextFormField(
                        decoration: const InputDecoration(labelText: "Field1"),
                      ),

                      TextFormField(
                        decoration: const InputDecoration(labelText: "Field2"),
                      ),

                      TextFormField(
                        decoration: const InputDecoration(labelText: "Field3"),
                      ),

                      TextFormField(
                        decoration: const InputDecoration(labelText: "Field4"),
                      ),
                      ElevatedButton(
                        onPressed: () async {
                          selectedImages = [];
                          await pickImages();
                          setState(() => selectedImages = selectedImages,);
                        },
                        child: const Text('Add images'),
                      ),
                      Text(
                        prompt,
                        textAlign: TextAlign.center,
                        style: const TextStyle(
                          color: Colors.red,
                          fontSize: 14
                        ),
                      ),

                      Visibility(
                        visible: selectedImages.isNotEmpty,
                        child: ListView.builder(
                          shrinkWrap: true,
                          itemCount: selectedImages.length,
                          itemBuilder: (context, index) {
                        
                            TextEditingController controller = TextEditingController();
                            imageControllers.add(controller);
                        
                            return Column(
                              crossAxisAlignment: CrossAxisAlignment.start,
                              children: [

                                Image.file(
                                  File(selectedImages[index].path),
                                  width: 100,
                                  height: 100, 
                                  fit: BoxFit.cover, 
                                ),

                                TextFormField(
                                  decoration: const InputDecoration(labelText: "Image label"),
                                ),
                                const SizedBox(height: 10),
                              ],
                            );
                          },
                        ),
                      ),
                      ]),
                ),
              ),
                  ElevatedButton(
                    onPressed: () => Navigator.pop(context);
                    child: const Text("Add"),
                  ),
            )
          )
        );
      }
    );
  }

I've tried to clean it up and keep only what is necessary to run it - hope that worked.

Now this generates a scrollable AlterDialog. However, when I add pictures and they are shown underneath the rest of the dialog such that the dialog becomes too large to fit onto the screen, I can scroll the dialog, but onyl when I put my finger on the upper part of the dialog i.e., the textformfields above the elevated button. If I try to scroll further down it appears as if it tries to scroll the listview of pictures instead of the dialog as a whole.

I have tried to switch up the order of the widgets such that the singlechildscrollview is wrapping the rest, but that did not help.

Does anybody have an idea?

Thank you!

Answer 1

I think i've understood, instead of having the add button as a child inside your AlertDialog, put it on the actions property of the dialog:

actions: [
  ElevatedButton(
    onPressed: () => Navigator.pop(context),
    child: const Text("Add"),
  ),
]

So you don't have to worry about the user scrolling the list of images instead of the dialog itself to click the add button. Also, as your AlertDialog content its just a SingleChildScrollView, you can just use the property scrollable: true in the AlertDialog and have the same effect. If you don't want to move the add Button, you will need to use a container to limit the size of your TextFormField and also the ListView.builder. Hope it helps