How to fix Flutter Bottom OverFlowed error  A RenderFlex overflowed by XX pixels on the bottom

In many flutter application while developing we will get error like "A RenderFlex overflowed by XX pixels on the bottom"

How to fix this error?

This exception will come because there is no enough space to set the widget with given size.

class MyApp extends StatefulWidget {
  @override
  _MyAppState createState() => _MyAppState();
}

class _MyAppState extends State<MyApp> {
 

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
          appBar: AppBar(
            title: Text("OverFlow Error"),
          ),
          body: Container(
            child: Column(
                mainAxisSize: MainAxisSize.min,
                crossAxisAlignment: CrossAxisAlignment.center,
                children: <Widget>[
                  Icon(Icons.face, color: Colors.orange, size: 800.0),
                ]),
          )),
    );
  }
}

 

This will thorwn error "A RenderFlex overflowed by XX pixels on the bottom"

To fix this error i have added icon widget inside Expand widget.

So what is Expand widget?

 

Expand widget is Creates a widget that expands a child of a [Row], [Column], or [Flex] so that the child fills the available space along the flex widget's main axis

 

Now the code looks like below

 

 

class MyApp extends StatefulWidget {
  @override
  _MyAppState createState() => _MyAppState();
}

class _MyAppState extends State<MyApp> {


  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
          appBar: AppBar(
            title: Text("OverFlow Error"),
          ),
          body: Container(
            child: Column(
                mainAxisSize: MainAxisSize.min,
                crossAxisAlignment: CrossAxisAlignment.center,
                children: <Widget>[
                  Expanded(child: Icon(Icons.face, color: Colors.orange, size: 800.0)),
                ]),
          )),
    );
  }
}