Flutter Alertdialog overflow cutoff

Question

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,
                                        ),
                                      ),
                                    ],
                                  ),),
                              ),
                            ],
                          ),

score 1 · Accepted Answer · answered Dec 01 '21 at 14:58

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,
                            ),
                        ),
                    ],
                )
        );
    }
);

score 0 · Answer 2 · answered Dec 01 '21 at 14:36

0

     Container(
              child: Text('text',              
                overflow: TextOverflow.fade,
                maxLines: 1,
                softWrap: false,
              ),             
              width: 50,
      ),

answered Dec 01 '21 at 14:36

Giorgi

141
1
4

1

Thanks, it is 90% what I was looking for - Do you have a solution without te "width"? - Do you have a solution where it begins a new line? – JBoudry Dec 01 '21 at 15:02
Thank you for contributing an answer. Would you kindly edit your answer to include an explanation of your code? That will help future readers better understand what is going on, and especially those members of the community who are new to the language and struggling to understand the concepts. – Jeremy Caney Dec 02 '21 at 00:39

score 0 · Answer 3 · answered Dec 01 '21 at 14:36

0

SizedBox(
          width: YourOwnWidth,
          child: Text("rrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrr",style: TextStyle(
            overflow: TextOverflow.clip
          ),),
        );

an Easy solution that you can use

answered Dec 01 '21 at 14:36

ahmed gamal

1

Thanks, it is 90% what I was looking for - Do you have a solution without te "width"? - Do you have a solution where it begins a new line? – JBoudry Dec 01 '21 at 15:02

Flutter Alertdialog overflow cutoff

3 Answers3