Flutter - Bottom Overflowed By 119 Pixels

Viewed 63153

I had an error "Bottom Overflowed by 199 pixel" when creating an Image inside the ListView, and after i google it, all of them suggest me to add:

resizeToAvoidBottomPadding: false

But, it doesnt work! The error is still there.

enter image description here

SafeArea widget is also doesnt solve the problem. Here is the short code version of my layout:

body: ListView(
         children:<Widget> [
           new Container(
             child: new Stack(
               children:<Widget> [
                 //THE WIDGET
                 new Container(), //THE BACKGROND IMAGE
                 new Positioned(
                   child: Column(
                     children:<Widget>[
                         new Transform(),
                         new FadeTransition(),
                         new FadeTransition(),
                         Divider(),
                         new Row(),
                         //THE IMAGE THAT I WANT TO ADD
                         new Container(
                           height: 360.0
                           decoration: BoxDecoration(
                            image: DecorationImage(
                               image: Assetimage('lake.jpg)
                        
9 Answers

Use Scaffold property "resizeToAvoidBottomPadding: false" and "SingleChildScrollView" as parent of Scaffold body:

    home: Scaffold(
          resizeToAvoidBottomInset : false,
          appBar: AppBar(
            title: Text("Registration Page"),
          ),
          body: SingleChildScrollView(
            child: RegisterUserPage(),
          )),

put your contents in a SingleChildScrollView and add ConstrainedBox like this:

body :SingleChildScrollView(
        child: ConstrainedBox(
          constraints: BoxConstraints(),
            child: ListView(
         children:<Widget> [
           new Container(
             child: new Stack(
               children:<Widget> [
                 //THE WIDGET
                 new Container(), //THE BACKGROND IMAGE
                 new Positioned(
                   child: Column(
                     children:<Widget>[
                         new Transform(),
                         new FadeTransition(),
                         new FadeTransition(),
                         Divider(),
                         new Row(),
                         //THE IMAGE THAT I WANT TO ADD
                         new Container(
                           height: 360.0
                           decoration: BoxDecoration(
                            image: DecorationImage(
                               image: Assetimage('lake.jpg)

This is may make your screen scrollable and adding constraint will make it finite scroll.

Nothing, Just include your widget inside Expanded like this

 Expanded(
    child: sectionList(),
  )

//this solved my issue

Using resizeToAvoidBottomInset: true, in Scaffold and wrapping the first child in the body with SingleChildScrollView solved my problem.

The parameter in scaffold works for me, envolve your widget for this error. singlechildscrollview

Just Use

SingleChildScrollView()

like as

      body: SingleChildScrollView(
      child:  Column(
        children: [
          widgetClassSectionButton(),
          listAttandance.isNotEmpty ? headLineContainer() : msgNothingToShow(),
          listAttandance.isNotEmpty ? widgetStudentList():widgetMsgEmpty(),
          CustomButton("Submit Data",context)
        ],
      ),
    )

This is How I solved it, adding a resizeToAvoidBottomInset: false, inside Scaffold() and using SingleChildScrollView() inside the body.

 return Scaffold(
      resizeToAvoidBottomInset: false,
      backgroundColor: Colors.grey,
      appBar: AppBar(
        title: Text("Quotes"),
        backgroundColor: Colors.green,
      ),
      body: SingleChildScrollView(
        child: Column(
          children: quotes.map((quote) => quotesTemplete(quote)).toList(),
        ),
      )
    );

This works for me for long form:

return Scaffold(
  resizeToAvoidBottomInset: true,
  body: SingleChildScrollView(
    child: IntrinsicHeight(
      child: Form(
        key: _formKey,
        child: Column(...

This aligns the item from bottom to top:

child: SizedBox(
              height: MediaQuery.of(context).size.height,
              child: SingleChildScrollView(
                reverse: true,
Related