Home > other >  How can I resolve "A RenderFlex overflowed by 77 pixels on the bottom."
How can I resolve "A RenderFlex overflowed by 77 pixels on the bottom."

Time:09-17

I have this error with that code code :

import 'package:flutter/material.dart';
import 'package:yummy/main.dart';

class HomePage extends StatelessWidget {
const HomePage({Key? key}) : super(key: key);

@override
Widget build(BuildContext context) {
return Scaffold(
  resizeToAvoidBottomInset: false,
  appBar: AppBar(
    backgroundColor: Colors.white,
    leading: IconButton(
      icon: Image.asset("doodles/theuser.png"),
      onPressed: (){},
    ),
    centerTitle: true,
    title: Image.asset("doodles/halfyummylog.png"),
    actions: <Widget>[
      IconButton(onPressed: (){}, icon: Image.asset(("doodles/favrec.png")))
    ],
  ),

  body: Container(
    width: MediaQuery.of(context).size.width,
    height: 100,
    color: Color(0xFFFFDEE2),
    child: Column(
      children: <Widget>[
        Image.asset("doodles/DinnerPlace.png"),
        SizedBox(
          height: 30,
        ), Container(
            decoration: BoxDecoration(color : Colors.white, borderRadius: BorderRadius.circular(14)),
              child: TextField(
              decoration: InputDecoration(
              border: InputBorder.none,
              prefixIcon: Icon(Icons.search,color: Colors.grey,size : 33),
              hintText: "Search",
              hintStyle: TextStyle(
                fontFamily: "SFProDisplay",
                color : Colors.grey,
                fontSize: 20.0
              ),
            ),
          )),
      ],
    ),
  ),
);
}
}

The error pop at the bottom of the image "doodles/DinnerPlace.png" after the appbar and I don't know why. If somoene can help me for resolve this I will be really greatful.

CodePudding user response:

As your container of the body is 100, you have to bound the image within this height.But the height of Image is not specified, so it take the space more than body's container's 100.So either bound the image with container with height like this -

Container( height: 70, child: Image.asset("doodles/DinnerPlace.png"), )

or increase the size of body's Container from 100 to 200.

CodePudding user response:

The problem was because of the second container I just add an Expanded widget for the container and it's working properly now.

  • Related