Flutter: Right overflowed by 200 pixels

Question

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

Answer 1

I think You Should wrap your Code in SingleChildScrollView: - For more information

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

Answer 2

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