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:
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: () => {}, ); }, ), ) ] ), ); } );
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.
Wrap your Container
inside a Column
, in the content paramenter, inside of it, set the mainAxisSize.min
, in Column property
I know it's quite late, but have you tried this?
Column( mainAxisSize: MainAxisSize.min, children: <Widget>[ Container( child: ListView.builder( shrinkWrap: true, ... ), ) ], );
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With