Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Flutter - auto size alertDialog to fit list content

I need to load list cities dynamically from rest webservice and let user choice one city from alert dialog. My code:

createDialog() {      fetchCities().then((response) {        showDialog(           context: context,           builder: (BuildContext context) {             return AlertDialog(               title: Text('Wybierz miasto'),               content: Container(                 height: 200.0,                 width: 400.0,                 child: ListView.builder(                   shrinkWrap: true,                   itemCount: response.length,                   itemBuilder: (BuildContext context, int index) {                     return ListTile(                       title: Text(response[index].name),                       onTap: () => citySelected(response[index].id),                     );                   },                 ),               ),             );           }       );     });   } 

Result - dialog is always 200x400, even if only 2 cities are available, there is unnecesary room left at the bottom:

enter image description here

How to make dialog width/height to fit actual items size? If I ommit height and width parameters, I'm getting exception and no dialog shown. In native Android Java I never need to specify any dimensions, because dialog sizes itself automatically to fit.

How to fix my code to get dialog sized correctly? Note that I don't know item count, it's dynamic.

[edit]

As suggested, I wrapped content with column:

createDialog() {     fetchCities().then((response) {       showDialog(           context: context,           builder: (BuildContext context) {             return AlertDialog(               title: Text('Wybierz miasto'),               content: Column(                   mainAxisSize: MainAxisSize.min,                   children: <Widget>[                     Container(                       child: ListView.builder(                         shrinkWrap: true,                         itemCount: response.length,                         itemBuilder: (BuildContext context, int index) {                           return ListTile(                             title: Text(response[index].name),                             onTap: () => citySelected(response[index].id),                           );                         },                       ),                     )                   ]               ),             );           }       );     });   } 

Result - exception:

I/flutter ( 5917): ══╡ EXCEPTION CAUGHT BY RENDERING LIBRARY ╞═════════════════════════════════════════════════════════ I/flutter ( 5917): The following assertion was thrown during performLayout(): I/flutter ( 5917): RenderViewport does not support returning intrinsic dimensions. I/flutter ( 5917): Calculating the intrinsic dimensions would require instantiating every child of the viewport, which I/flutter ( 5917): defeats the point of viewports being lazy.

More generic code to test:

showDialog(        context: context,        builder: (BuildContext context) {          return AlertDialog(            title: Text('Select city'),            content: Column(                mainAxisSize: MainAxisSize.min,                children: <Widget>[                  Container(                    child: ListView.builder(                      shrinkWrap: true,                      itemCount: 2,                      itemBuilder: (BuildContext context, int index) {                        return ListTile(                          title: Text("City"),                          onTap: () => {},                        );                      },                    ),                  )                ]            ),          );        }    ); 
like image 532
user1209216 Avatar asked Feb 13 '19 11:02

user1209216


People also ask

How do I make AlertDialog full screen on Flutter?

Flutter Full Screen Dialog By Using showDialog method we cannot show full-screen Dialog. If we want to show dialog in full screen we must use showGeneralDialog method provided by Flutter SDK. There are some interesting parameter available in showGeneralDialog method. barrierColor – Change dropshadow outside the dialog.


Video Answer


2 Answers

Wrap your Container inside a Column, in the content paramenter, inside of it, set the mainAxisSize.min, in Column property

like image 110
Fellipe Malta Avatar answered Sep 22 '22 01:09

Fellipe Malta


I know it's quite late, but have you tried this?

Column(     mainAxisSize: MainAxisSize.min,     children: <Widget>[        Container(          child: ListView.builder(            shrinkWrap: true,            ...          ),        )     ], ); 
like image 43
bshears Avatar answered Sep 20 '22 01:09

bshears