-2

How do I resolve the exception "A RenderFlex overflowed by 23 pixels on the bottom." In my app, I created Gridview. but getting RenderFlex every single time when I run my code. I wrap Gridview with expnded add

  1. scrollDirection: Axis.vertical,
  2. shrinkWrap: true,

but no effect still getting this Exception. can anyone correct me; what I am doing wrong In my code? and what should I have to do.

Here is My code where I am getting Error:

Widget build(BuildContext context) {
    return Scaffold(
       body:Container(
            height: 150,
            width: MediaQuery.of(context).size.width,
            color: Colors.grey[100],
            child: Column(children: [
              Expanded(
                child: Padding(
                  padding: EdgeInsets.fromLTRB(10, 40, 0, 0),
                  child: Container(
                    child: Column(
                      children: [
                        Align(
                        alignment: Alignment.centerLeft,
                          child: Container(
                            child: Text('Oliver Queen'),
                          ),
                        ),
                        SizedBox(height:5),
                        Align(
                          alignment: Alignment.centerLeft,
                          child: Container(
                            child: Text('olieequeen77@gmail'),
                          ),
                        ),
                        SizedBox(height:5),
                        Align(
                          alignment: Alignment.centerLeft,
                          child: Container(
                            child: Text('9874561239'),
                          ),
                        ),
                      ],
                    ),
                  ),
                ), 
              ),

             Expanded(
               child: GridView(
                  gridDelegate: SliverGridDelegateWithFixedCrossAxisCount(crossAxisCount: 2),
                  scrollDirection: Axis.vertical,
                  shrinkWrap: true,
                  children: <Widget>[
                    Container(
                      color: Colors.grey[100],
                      height: 90.0,
                      width: 110.0,
                       child: TextButton(onPressed: (){

                       },
                        child: Column(children: [
                        Icon(Icons.home,size: 45,
                         color: Colors.purple,),
                         Text("My Settings",
                         style: TextStyle(fontSize: 12,color: Colors.black)),
                       ],),
                       ),    
                     ),
                      Container(
                      color: Colors.grey[100],
                      height: 90.0,
                       width: 110.0,
                       child: TextButton(onPressed: (){

                       },
                        child: Column(children: [
                        Icon(Icons.home,size: 45,
                         color: Colors.purple,),
                         Text("My Settings",
                         style: TextStyle(fontSize: 12,color: Colors.black)),
                       ],),
                       ),
                     ),
                      Container(
                      color: Colors.grey[100],
                      height: 90.0,
                       width: 110.0,
                       child: TextButton(onPressed: (){

                       },
                        child: Column(children: [
                        Icon(Icons.home,size: 45,
                         color: Colors.purple,),
                         Text("My Settings",
                         style: TextStyle(fontSize: 12,color: Colors.black)),
                       ],),
                       ),
                     ),
                      Container(
                      color: Colors.grey[100],
                      height: 90.0,
                       width: 110.0,
                       child: TextButton(onPressed: (){

                       },
                        child: Column(children: [
                        Icon(Icons.home,size: 45,
                         color: Colors.purple,),
                         Text("My Settings",
                         style: TextStyle(fontSize: 12,color: Colors.black)),
                       ],),
                       ),
                     ),
                      Container(
                      color: Colors.grey[100],
                      height: 90.0,
                       width: 110.0,
                       child: TextButton(onPressed: (){

                       },
                        child: Column(children: [
                        Icon(Icons.home,size: 45,
                         color: Colors.purple,),
                         Text("My Settings",
                         style: TextStyle(fontSize: 12,color: Colors.black)),
                       ],),
                       ),
                     ),
                  ],
               ),
             )
            ],
          ),
        ), 
      );
     }
  }

This how it looks like

Mrunal
  • 578
  • 2
  • 21
  • 39

1 Answers1

1

try to change Container height to 200

return Scaffold(
  body: Container(
    height: 200,
    width: MediaQuery.of(context).size.width,
    color: Colors.grey[100],
    child: Column(
      children: [
        Expanded(
          child: Padding(
            padding: EdgeInsets.fromLTRB(10, 40, 0, 0),
            child: Container(
              child: Column(
                children: [
                  Align(
                    alignment: Alignment.centerLeft,
                    child: Container(
                      child: Text('Oliver Queen'),
                    ),
                  ),
                  SizedBox(height: 5),
                  Align(
                    alignment: Alignment.centerLeft,
                    child: Container(
                      child: Text('olieequeen77@gmail'),
                    ),
                  ),
                  SizedBox(height: 5),
                  Align(
                    alignment: Alignment.centerLeft,
                    child: Container(
                      child: Text('9874561239'),
                    ),
                  ),
                ],
              ),
            ),
          ),
        ),
        Expanded(
          child: GridView(
            gridDelegate: SliverGridDelegateWithFixedCrossAxisCount(
                crossAxisCount: 2),
            scrollDirection: Axis.vertical,
            shrinkWrap: true,
            children: <Widget>[
              Container(
                color: Colors.grey[100],
                height: 90.0,
                width: 110.0,
                child: TextButton(
                  onPressed: () {},
                  child: Column(
                    children: [
                      Icon(
                        Icons.home,
                        size: 45,
                        color: Colors.purple,
                      ),
                      Text("My Settings",
                          style:
                              TextStyle(fontSize: 12, color: Colors.black)),
                    ],
                  ),
                ),
              ),
              Container(
                color: Colors.grey[100],
                height: 90.0,
                width: 110.0,
                child: TextButton(
                  onPressed: () {},
                  child: Column(
                    children: [
                      Icon(
                        Icons.home,
                        size: 45,
                        color: Colors.purple,
                      ),
                      Text("My Settings",
                          style:
                              TextStyle(fontSize: 12, color: Colors.black)),
                    ],
                  ),
                ),
              ),
              Container(
                color: Colors.grey[100],
                height: 90.0,
                width: 110.0,
                child: TextButton(
                  onPressed: () {},
                  child: Column(
                    children: [
                      Icon(
                        Icons.home,
                        size: 45,
                        color: Colors.purple,
                      ),
                      Text("My Settings",
                          style:
                              TextStyle(fontSize: 12, color: Colors.black)),
                    ],
                  ),
                ),
              ),
              Container(
                color: Colors.grey[100],
                height: 90.0,
                width: 110.0,
                child: TextButton(
                  onPressed: () {},
                  child: Column(
                    children: [
                      Icon(
                        Icons.home,
                        size: 45,
                        color: Colors.purple,
                      ),
                      Text("My Settings",
                          style:
                              TextStyle(fontSize: 12, color: Colors.black)),
                    ],
                  ),
                ),
              ),
              Container(
                color: Colors.grey[100],
                height: 90.0,
                width: 110.0,
                child: TextButton(
                  onPressed: () {},
                  child: Column(
                    children: [
                      Icon(
                        Icons.home,
                        size: 45,
                        color: Colors.purple,
                      ),
                      Text("My Settings",
                          style:
                              TextStyle(fontSize: 12, color: Colors.black)),
                    ],
                  ),
                ),
              ),
            ],
          ),
        )
      ],
    ),
  ),
);
}
GJJ2019
  • 4,624
  • 3
  • 12
  • 22
  • here is article explains how to overcome overflow errors https://flutter.dev/docs/testing/common-errors – GJJ2019 Apr 03 '21 at 18:58
  • here is another one with awesome devtools https://medium.com/flutter/how-to-debug-layout-issues-with-the-flutter-inspector-87460a7b9db – GJJ2019 Apr 03 '21 at 18:59