Flutter Alertdialog Overflow Cutoff
I have a working Alertdialog but I get an overflow error and I can't get rid of it. I have tried flexible and expanded but maybe on the wrong levels.
builder: (BuildContext context) => AlertDialog(
title: const Center(child: Text('Completing task')),
content: Row(
mainAxisAlignment: MainAxisAlignment.center,
children: [
UnconstrainedBox(
child: Flexible(
child: Column(
children: [
Text('Tag: ' + task.tag),
Text("rrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrr"),
const SizedBox(height: 10),
const Text('Waiting for NFC'),
const SizedBox(height: 20),
const Center(
child: CircularProgressIndicator(
color: Colors.grey,
),
),
],
),),
),
],
),
Answer
The issue here is the long text. If you would like all of the text to display without overflowing the layout, then Flexible
is an option. Wrap the Text
element with a Flexible
when the displayed text could potentially be longer than the width of the view.
Notice that I had to remove some unnecessary elements from the view. Those elements were misplaced/misused for this scenario and were adding to the problem.
There are other ways to handle this, but I like how flexible (pun intended) this option is without having to calculate or guess width/height.
Here is a solution with the code cleaned up a little and using the Flexible
on the long text element.
showDialog(
context: context,
builder: (BuildContext context) {
return AlertDialog(
title: const Center(child: Text('Completing task')),
content: Column(
mainAxisAlignment: MainAxisAlignment.center,
children: [
Text('Tag: P1348'),
Flexible(child: Text("rrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrr"),),
const SizedBox(height: 10),
const Text('Waiting for NFC'),
const SizedBox(height: 20),
const Center(
child: CircularProgressIndicator(
color: Colors.grey,
),
),
],
)
);
}
);
Related Questions
- → How do you create a 12 or 24 mnemonics code for multiple cryptocurrencies (ETH, BTC and so on..)
- → Flutter: input text field don't work properly in a simple example..... where am I wrong?
- → Can I customize the code formatting of Dart code in Atom?
- → Is it possible to develop iOS apps with Flutter on a Linux virtual machine?
- → Display SnackBar in Flutter
- → JSON ObjectMapper in Flutter
- → Material flutter app source code
- → TabBarSelection No such method error
- → How do I set the animation color of a LinearProgressIndicator?
- → Add different routes/screens to Flutter app
- → Is there a way to get the size of an existing widget?
- → How to share a file using flutter
- → Is there an easy way to find particular text built from RichText in a Flutter test?