Flutter - Bottom Overflowed By 119 Pixels

Question

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.

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)

Answer 1

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.

Answer 2

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(),
          )),

Answer 3

Nothing, Just include your widget inside Expanded like this

 Expanded(
    child: sectionList(),
  )

//this solved my issue

Answer 4

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

Answer 5

在 Scaffold 中使用resizeToAvoidBottomInset: true,并使用SingleChildScrollView将第一个孩子包裹在正文中解决了我的问题。

Answer 6

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.

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)

Answer 7

This aligns the item from bottom to top:

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

Answer 8

Just Use

SingleChildScrollView()

like as

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

Answer 9

This works for me for long form:

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

Answer 10

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(),
        ),
      )
    );