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)

Dhanaji Yadav · Answer 1 · 2021-03-25T05:11:18.807

62

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

edited Mar 25 '21 at 05:11

answered Aug 09 '19 at 11:04

Dhanaji Yadav

1,202
1
14
22

1

only `resizeToAvoidBottomPadding: false` worked because of positioned design I have. thanks – Bhavin Patel Jun 04 '20 at 05:50
3

This property no longer exists, but this `resizeToAvoidBottomInset` exists – Phani Rithvij Mar 17 '21 at 06:05
2

Set ```resizeToAvoidBottomInset = false``` (```resizeToAvoidBottomPadding``` is deprecated.) – YEG Mar 23 '21 at 03:46

score 50 · Accepted Answer · edited Jul 23 '19 at 21:58

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.

score 14 · Answer 3 · answered Jan 03 '20 at 05:22

14

Nothing, Just include your widget inside Expanded like this

 Expanded(
    child: sectionList(),
  )

//this solved my issue

answered Jan 03 '20 at 05:22

user7418129

1,074
14
18

score 3 · Answer 4 · edited Jul 15 '20 at 19:15

3

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

edited Jul 15 '20 at 19:15

β.εηοιτ.βε

33,893
13
69
83

answered Jul 15 '20 at 18:32

Ibnmajah Jallow

31
2

Thanks! only wrapping the first child with SingleChildScrollView is perfectly working for me – PRANAV SINGH Sep 09 '21 at 15:53

Sandeep Pareek · Answer 5 · 2022-02-20T16:40:59.947

3

Just Use

SingleChildScrollView()

like as

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

edited Feb 20 '22 at 16:40

answered May 08 '21 at 18:39

Sandeep Pareek

1,636
19
21

Eduardo Chavez · Answer 6 · 2019-10-08T21:33:29.503

2

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

edited Oct 08 '19 at 21:33

answered Oct 07 '19 at 07:02

Eduardo Chavez

21
3

score 2 · Answer 7 · answered Aug 19 '21 at 06:53

2

This works for me for long form:

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

answered Aug 19 '21 at 06:53

mjablecnik

182
1
14

score 1 · Answer 8 · edited Jan 22 '21 at 09:52

1

This aligns the item from bottom to top:

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

edited Jan 22 '21 at 09:52

double-beep

5,031
17
33
41

answered Jan 22 '21 at 08:43

Oshitha Wimalasuriya

431
6
11

score 1 · Answer 9 · answered Jul 14 '21 at 08:08

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

Flutter - Bottom Overflowed By 119 Pixels

9 Answers9

SingleChildScrollView()

like as

Linked