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

This Article is posted by seven.srikanth at 9/11/2019 4:04:01 AM



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.
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.
This happened because we tried to fit this icon of a larger size than a Container can accommodate.
One of the ways to fix this instantly is by changing the size of the Icon.
From
    Icon(Icons.access_alarm, size:800.0),
  
to
    Icon(Icons.access_alarm, size:300.0),
  
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.
Like below,
    Expanded(child: Icon(Icons.access_alarm, size:800.0))
  
You can observe that, without changing any size, we can still fix this issue. And this is a nice way to fix this issue.
Here is how it's going to look.
Here is the complete code from main.dart file. You can try. 
 import 'package:flutter/material.dart';

  void main() => runApp(MyApp());

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

  class _MyAppState extends State<MyApp> {
    double padValue = 0;

    @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: <Widget>[
                    Expanded(child: Icon(Icons.access_alarm, size: 800.0)),
                  ]),
            )),
      );
    }
  }

To see the error message,
Change below code from 
   Expanded(child: Icon(Icons.access_alarm, size:800.0)),]
to
    Icon(Icons.access_alarm, size:800.0),]
  
Hope this is help ful to you.
Thanks,
Srikanth

Tags: BOTTOM OVERFOLOW BY PIXELS; Fit Image; Expanded Widget;








0 Comments
Login to comment.
Recent Comments

Be the first to Comment. You can ask a Query or Share your toughts or Just say thanks.


© 2018 - Fluttercentral | Email to me - seven.srikanth@gmail.com