CODEWITHSUNDEEP
dartflutter
Tushar Pol
Tushar Pol

Reputation: 7619

Flutter: Right overflowed by 200 pixels

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

Upvotes: 19

Views: 57355

Answers (3)

Henadzi Rabkin
Henadzi Rabkin

Reputation: 7033

Another solution is to wrap widget which overflows by Flexible widget, for e.g:

Flexible(child: Text())

Upvotes: 5

Abdelrahman M. Elmarakby
Abdelrahman M. Elmarakby

Reputation: 689

you should put your chips inside a ListView and add this line to scroll horizontally

direction : Axis.horizontal, this error where the widget you created have more size than it' should

Example:you can't put widget on a row that will take 400 px while your container got a

width :200 =>that will give you an exception says =>Right overflowed by 200 pixels

class ChipsTesting extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return new Scaffold(
      body: new Padding(
        padding: new EdgeInsets.all(30.0),
        child: new ListView(
         direction: Axis.horizontal,
          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')
            )
          ],
        ),
      ),
    );
  }
}

Upvotes: 0

Umbo
Umbo

Reputation: 3142

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

Upvotes: 41

Related Questions