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')
)
],
),
),
);
}
}
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.
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.
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.
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.
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')
)
],
)
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With