"A RenderFlex overflowed by 97 pixels on the right." in Flutter AlertDialog - flutter

Question

I have this problem with actions of AlertDialog
AlertDialog(
title: ...,
content: ...,
actions: <Widget>[
FlatButton(onPressed: ...,
child: Text(btn_download)),
FlatButton(onPressed: ...,
child: Text('btn_select')),
FlatButton(onPressed: ...,
child: Text(btn_qr)),
FlatButton(onPressed: ...,
child: Text(btn_cancel)),
],
);
When I show this dialog I get this:
I tried to use Wrap or other scrolling and multi-child widets, but nothing helps.
Found the same issue here, but no answer yet
Does anybody knows how this can be fixed?

Answer 1

I don't have access to AndroidStudio to validate my hypothesis, but I'd try something like this:
AlertDialog(
title: ...,
content: ...,
actions: <Widget>[
new Container (
child: new Column (
children: <Widget>[
FlatButton(onPressed: ...,
child: Text(btn_download)),
FlatButton(onPressed: ...,
child: Text('btn_select'))
),
new Container (
child: new Column (
children: <Widget>[
FlatButton(onPressed: ...,
child: Text(btn_gr)),
FlatButton(onPressed: ...,
child: Text('btn_cancel'))
),
),
],
);
Edit: this code works, but you have to use a width-constrained Container, even though it seems that a 75% screen width is somewhat of a sweet spot, since it works both in portrait and landscape mode.
import 'package:flutter/material.dart';
import 'dart:async';
void main() => runApp(new MyApp());
class MyApp extends StatelessWidget {
// This widget is the root of your application.
#override
Widget build(BuildContext context) {
return new MaterialApp(
title: 'Flutter Demo',
theme: new ThemeData(
primarySwatch: Colors.blue,
),
home: new MyHomePage(title: 'Flutter Demo Home Page'),
);
}
}
class MyHomePage extends StatefulWidget {
MyHomePage({Key key, this.title}) : super(key: key);
final String title;
#override
_MyHomePageState createState() => new _MyHomePageState();
}
class _MyHomePageState extends State<MyHomePage> {
int _counter = 0;
Future<Null> _neverSatisfied() async {
double c_width = MediaQuery.of(context).size.width*0.75;
return showDialog<Null>(
context: context,
barrierDismissible: false, // user must tap button!
builder: (BuildContext context) {
return new AlertDialog(
title: new Text('Rewind and remember'),
content: new SingleChildScrollView(
child: new ListBody(
children: <Widget>[
new Text('You will never be satisfied.'),
new Text('You\’re like me. I’m never satisfied.'),
],
),
),
actions: <Widget>[
new Container(
width: c_width,
child: new Wrap(
spacing: 4.0,
runSpacing: 4.0,
children: <Widget>[
new FlatButton(
child: new Text('The Lamb'),
onPressed: () {
Navigator.of(context).pop();
},
),
new FlatButton(
child: new Text('Lies Down'),
onPressed: () {
Navigator.of(context).pop();
},
),
new FlatButton(
child: new Text('On'),
onPressed: () {
Navigator.of(context).pop();
},
),
new FlatButton(
child: new Text('Broadway'),
onPressed: () {
Navigator.of(context).pop();
},
),
],
)
)
],
);
},
);
}
void _doNeverSatisfied() {
_neverSatisfied()
.then( (Null) {
print("Satisfied, at last. ");
});
}
#override
Widget build(BuildContext context) {
return new Scaffold(
appBar: new AppBar(
title: new Text(widget.title),
),
body: new Center(
child: new Column(
mainAxisAlignment: MainAxisAlignment.center,
children: <Widget>[
new Text(
'You have pushed the button this many times:',
),
new Text(
'$_counter',
style: Theme.of(context).textTheme.display1,
),
],
),
),
floatingActionButton: new FloatingActionButton(
onPressed: _doNeverSatisfied,
tooltip: 'Call dialog',
child: new Icon(Icons.add),
), // This trailing comma makes auto-formatting nicer for build methods.
);
}
}

Answer 2

The ButtonBar is not made for so many buttons.
Place your buttons in a Wrap widget or a Column.