Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Flutter: Right overflowed by 200 pixels

Tags:

flutter

dart

I'm testing Chips inside my Flutter App. I've added those chips inside Row.

But when no. of Chips increases, app shows yellow bar saying

Right Overflowed by 200 pixels

I want to show only those chips which fits in 1st Row, All remaining chips should get displayed below to it.

My snippet:

class ChipsTesting extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return new Scaffold(
      body: new Padding(
        padding: new EdgeInsets.all(30.0),
        child: new Row(
          children: <Widget>[
            new Chip(
                label: new Text('Chips11')
            ),new Chip(
                label: new Text('Chips12')
            ),new Chip(
                label: new Text('Chips13')
            ),new Chip(
                label: new Text('Chips14')
            ),new Chip(
                label: new Text('Chips15')
            ),new Chip(
                label: new Text('Chips16')
            )
          ],
        ),
      ),
    );
  }
}
like image 949
Tushar Pol Avatar asked Mar 25 '18 07:03

Tushar Pol


People also ask

How do you fix a right overflow in flutter?

The solution to resolve this overflow error is to make your entire widget or in our case the Column scrollable. We can do that by wrapping our Column inside a SingleChildScrollView.

How do I stop my screen from overflowing my flutter?

Flexible widget can be placed inside Column, Row and similar widgets to surround any of their children. Flexible helps the child to avoid overflow by displaying it only in the available space.

How do you handle overflow in flutters?

The Text may overflow from the widgets like containers, cards, etc. The Text Widget has a property overflow to handle the overflow text in android, IOS, WEB, desktop applications. Overflow property has multiple parameters like clip, ellipsis, fade, visible, etc.

How do I fix RenderFlex in flutter?

Solution of the Error: In case of Column Error, such as "A RenderFlex overflowed by pixels on the bottom", you need to wrap Column() with SingleChildScrollView() widget.


1 Answers

If by

All remaining chips should get displayed below to it

you mean that the Chips should wrap when there's no space left on the row then you should use the Wrap widget (Documentation) instead of Row. It automatically displays its children in multiple horizontal or vertical runs:

new Wrap(
  spacing: 8.0, // gap between adjacent chips
  runSpacing: 4.0, // gap between lines
  direction: Axis.horizontal, // main axis (rows or columns)
  children: <Widget>[
    new Chip(
      label: new Text('Chips11')
    ),new Chip(
      label: new Text('Chips12')
    ),new Chip(
      label: new Text('Chips13')
    ),new Chip(
      label: new Text('Chips14')
    ),new Chip(
      label: new Text('Chips15')
    ),new Chip(
      label: new Text('Chips16')
    )
  ],
)
like image 104
Umbo Avatar answered Oct 21 '22 22:10

Umbo