Making an AlertDialog with Dropdownbuttons in Flutter scrollable

Question

I have an AlertDialog in Flutter that shows some various filtering & sorting options via dropdownbuttons. However, I want it to be scrollable as soon as there are too many elements to display. Putting a Listview into it results in a grey box for the Dropdownbuttons (see pictures). How can I get this scrollable?

Code:

showDialog(
    context: context,
    builder: (BuildContext context){
      return Consumer<VillagerFilter>(
        builder: (context, filter, _child) {
              return AlertDialog(
                title: Text(localization.filterTitleFilterSearch),
                content: Container(
                  height: 500,
                  child: Column(
                    crossAxisAlignment: CrossAxisAlignment.start,
                    children: <Widget>[
                      //FIlterbereich
                      Text("Filter:", textAlign: TextAlign.left,),
                      Row(
                        children: <Widget>[
                          Checkbox(value: filter.isFilterObtained(), onChanged: (newIsCaught){filter.setFilterObtained(newIsCaught);}
                          ),
                          Text(localization.filterLivingHere)
                        ],
                      ),
                      Row(
                        children: <Widget>[
                          Checkbox(value: filter.isFilterFavourite(), onChanged: (newIsCaught){filter.setFilterFavourite(newIsCaught);}
                          ),
                          Text(localization.filterFavourite)
                        ],
                      ),
                      //personalityfilter
                      ListTile(
                        title: 
                          Text(localization.filterPersonality + " "),
                          subtitle: DropdownButton<String>(
                                value: filter.getFilterPersonality(),
                                onChanged: (String newValue){
                                  filter.setFilterPersonality(newValue);
                                },
                                items: [
                                    '-',
                                    localization.filterPersonalityCranky,
                                    localization.filterPersonalityJock,
                                  ]
                                  .map<DropdownMenuItem<String>>((String value){
                                    return DropdownMenuItem<String> (
                                      value: value,
                                      child: Text(value)
                                    );
                                  }).toList()
                              ),
                      ),
                    //Genderfilter
                    ListTile(
                        title: 
                          Text(localization.gender + " "),
                          subtitle: DropdownButton<String>(
                                value: filter.getFilterGender(),
                                onChanged: (String newValue){
                                  filter.setFilterGender(newValue);
                                },
                                items: [
                                    '-',
                                    localization.male,
                                    localization.female,
                                  ]
                                  .map<DropdownMenuItem<String>>((String value){
                                    return DropdownMenuItem<String> (
                                      value: value,
                                      child: Text(value)
                                    );
                                  }).toList()
                              ),
                      ),

                    ],
                  ),
                ),
                elevation: 24,
                backgroundColor: nookDefaultBackgroundColor,
                shape: RoundedRectangleBorder(
                  borderRadius: BorderRadius.all(Radius.circular(25.0))
                ),
                actions: <Widget>[
                  FlatButton(
                    child: Text('Okay'),
                    onPressed: () {
                      Navigator.of(context).pop();
                    },
                  ),
                ],
              );
        }
      );
    },
  );

score -1 · Answer 1 · answered May 26 '20 at 15:01

Hey you can use SingleChildScrollView widget

    import 'package:flutter/cupertino.dart';

showDialog(
    context: context,
    builder: (BuildContext context){
      return Consumer<VillagerFilter>(
        builder: (context, filter, _child) {
              return AlertDialog(
                title: Text(localization.filterTitleFilterSearch),
                content: Container(
                  height: 500,
                  child:SingleChildScrollView(
                    child:  Column(
                    crossAxisAlignment: CrossAxisAlignment.start,
                    children: <Widget>[
                      //FIlterbereich
                      Text("Filter:", textAlign: TextAlign.left,),
                      Row(
                        children: <Widget>[
                          Checkbox(value: filter.isFilterObtained(), onChanged: (newIsCaught){filter.setFilterObtained(newIsCaught);}
                          ),
                          Text(localization.filterLivingHere)
                        ],
                      ),
                      Row(
                        children: <Widget>[
                          Checkbox(value: filter.isFilterFavourite(), onChanged: (newIsCaught){filter.setFilterFavourite(newIsCaught);}
                          ),
                          Text(localization.filterFavourite)
                        ],
                      ),
                      //personalityfilter
                      ListTile(
                        title: 
                          Text(localization.filterPersonality + " "),
                          subtitle: DropdownButton<String>(
                                value: filter.getFilterPersonality(),
                                onChanged: (String newValue){
                                  filter.setFilterPersonality(newValue);
                                },
                                items: [
                                    '-',
                                    localization.filterPersonalityCranky,
                                    localization.filterPersonalityJock,
                                  ]
                                  .map<DropdownMenuItem<String>>((String value){
                                    return DropdownMenuItem<String> (
                                      value: value,
                                      child: Text(value)
                                    );
                                  }).toList()
                              ),
                      ),
                    //Genderfilter
                    ListTile(
                        title: 
                          Text(localization.gender + " "),
                          subtitle: DropdownButton<String>(
                                value: filter.getFilterGender(),
                                onChanged: (String newValue){
                                  filter.setFilterGender(newValue);
                                },
                                items: [
                                    '-',
                                    localization.male,
                                    localization.female,
                                  ]
                                  .map<DropdownMenuItem<String>>((String value){
                                    return DropdownMenuItem<String> (
                                      value: value,
                                      child: Text(value)
                                    );
                                  }).toList()
                              ),
                      ),

                    ],
                  ),
          ,
                  )      ),
                elevation: 24,
                backgroundColor: nookDefaultBackgroundColor,
                shape: RoundedRectangleBorder(
                  borderRadius: BorderRadius.all(Radius.circular(25.0))
                ),
                actions: <Widget>[
                  FlatButton(
                    child: Text('Okay'),
                    onPressed: () {
                      Navigator.of(context).pop();
                    },
                  ),
                ],
              );
        }
      );
    },
  );

Using a Column inside a SingleChildScrollView is a Futter anti-pattern. Use a ListView with shrink = true instead. — Jonas, May 26 '20 at 15:35
why Using a Column inside a SingleChildScrollView is a Futter anti-pattern. ? — nordine enn, May 26 '20 at 15:37
It's an anti-pattern because this is a perfect use case for using a ListView, a widget whose purpose is to hold multiple children in a scrollable list. A ListView will build its children only when needed, so it will, in most cases, be much more efficient than a Column inside a SingleChildScrollView. If you know you are going to have multiple children that need to be scrollable, there is (usually) no reason to not use a ListView. — Jonas, May 26 '20 at 20:16
I will test this. However, my previous experiment with using a Listview ended in just grey boxes as seen on the pictures — Salatgurke, May 27 '20 at 19:14

Making an AlertDialog with Dropdownbuttons in Flutter scrollable

1 Answers1