How to Fix the error "BOTTOM OVERFLOWED BY XX.XX PIXELS" in Flutter?

<p>Often, beginners will hit this message when they try to create some flutter App. In this article, I'm going to show how to fix this.</p> <p>This message looks on top of the yellow and black stripes on the part of the flutter screen. This means that the content you have passed to the widget is not sufficient to fix in the place you are trying to fit it. Below is an example of how it looks like.</p> <p>![](/Uploads/82b9e352-11ec-4ad9-87f8-255d6127c3cc.PNGwidth="50%height="auto](</p> <p>This happened because we tried to fit this icon of a larger size than a Container can accommodate.</p> <p>One of the ways to fix this instantly is by changing the size of the Icon.</p> <p>From</p> <pre> Icon(Icons.access_alarm, size:800.0), </pre> <p>to</p> <pre> Icon(Icons.access_alarm, size:300.0), </pre> <p>But, this is not the ultimate way to fix this issue. Instead, we will try to use an Expanded widget which will fix this issue.</p> <p>Like below,</p> <pre> Expanded(child: Icon(Icons.access_alarm, size:800.0)) </pre> <p>You can observe that, without changing any size, we can still fix this issue. And this is a nice way to fix this issue.</p> <p>Here is how it's going to look.</p> <p>Here is the complete code from main.dart file. You can try.</p> <p>import 'package:flutter/material.dart';</p> <p>void main() => runApp(MyApp());</p> <p>class MyApp extends StatefulWidget { @override _MyAppState createState() => _MyAppState(); }</p> <p>class _MyAppState extends State { double padValue = 0;</p> <pre>@override Widget build(BuildContext context) { return MaterialApp( home: Scaffold( appBar: AppBar( title: Text("OverFlow Fix Example"), ), body: Container( child: Column( mainAxisSize: MainAxisSize.min, crossAxisAlignment: CrossAxisAlignment.center, children: [ Expanded(child: Icon(Icons.access_alarm, size: 800.0)), ]), )), ); } </pre> <p>}</p> <p>To see the error message, Change below code from</p> <pre> Expanded(child: Icon(Icons.access_alarm, size:800.0)),] </pre> <p>to</p> <pre> Icon(Icons.access_alarm, size:800.0),] </pre> <p>Hope this is help ful to you.</p> <p>Thanks, Srikanth</p>