Unexpected top padding in ListView put inside scaffold with no appBar

If you put ListView somewhere inside Scaffold having no appBar, ListView has top padding. There is no padding if appBar is present. There is no padding if you specify EdgeInsets.zero padding for ListView explicitly. See following code snipped for example

...
    return new MaterialApp(
      home: new Scaffold(
//        appBar: new AppBar(
//          title: new Text("test"),
//        ),
        body: new Column(
          children: <Widget>[
            new Container(
              child: new Center(
                  child: new Text("some top widget")
              ),
              decoration: new BoxDecoration(
                color: Colors.red,
              ),
              height: 100.0,
            ),
            new Expanded(
              child: new ListView(
                children: items,
//                padding: EdgeInsets.zero, // explicit padding as a workaround
              ),
            ),
          ],
        ),
      ),
    );
...

See screenshot:

Flutter Doctor:

Doctor summary (to see all details, run flutter doctor -v):
[✓] Flutter (on Linux, locale en_US.UTF-8, channel master)
[✓] Android toolchain - develop for Android devices (Android SDK 27.0.3)
[✓] Android Studio (version 3.0)
[!] IntelliJ IDEA Ultimate Edition (version 2017.3)
    ✗ Flutter plugin not installed; this adds Flutter specific functionality.
    ✗ Dart plugin not installed; this adds Dart specific functionality.
[✓] VS Code (version 1.20.1)
[✓] Connected devices

@HansMuller

/cc @HansMuller @Hixie

Just had this problem, top SliverPadding is set to 20.0 by default. Looking at docs I see:

/// By default, [ListView] will automatically pad the list's scrollable
/// extremities to avoid partial obstructions indicated by [MediaQuery]'s
/// padding. To avoid this behavior, override with a zero [padding] property.

Yeah this is intentional. If you put a widget before the ListView, you should wrap the ListView with a MediaQuery.removePadding widget (with removeTop: true).

Well, as long as this is documented I will close the issue

I'm not sure it's well-documented yet. If you can't find it in the documentation, please don't hesitate to reopen.

I had this same issue and after some search this is the only exact answer I've found. Maybe is worth to create a short entry on documentation about window measurement and specific cases

Found this topic because I thought this is maybe a bug or I did oversee something. So maybe some more info is needed. (I would prefer a method to turn this off inside the listview, too. This would be easier.)

I did not find it in the documentation, is it there?

@Hixie

I assume this should not be closed because @Hixie added the d: api docs label after the issue was closed.

Remove top padding

Yeah this is intentional. If you put a widget before the ListView, you should wrap the ListView with a MediaQuery.removePadding widget (with removeTop: true).

Tks a lot! This applies too when we need to show one scaffold into another scaffold

Just had this problem, top SliverPadding is set to 20.0 by default. Looking at docs I see:

/// By default, [ListView] will automatically pad the list's scrollable
/// extremities to avoid partial obstructions indicated by [MediaQuery]'s
/// padding. To avoid this behavior, override with a zero [padding] property.

thanks, this work for me

@Hixie

This was really an unexpected implicit and hidden that made you doubt your own sanity (until adding padding: EdgeInsets.zero).

@Hixie (the guy who thought me CSS box model on Freenode IRC about 18-20yrs ago <3) :
Is this setting padding: okay or ist a wrapping in MediaQuery.removePadding(... recommended/must-have. Latter is much more code and convoluted to the uninitiated eyes.

Once you know about SafeArea it makes more sense. The problem is that in trying to make SafeArea work automatically without having to think about it, we also require that in cases where you do things it can't handle you have to handle it. I don't think we have a good solution to this other than improving the docs. If this is still confusing then we should add another section to the "troubleshooting" part of the Scaffold docs. Please do file a new bug if you'd like us to do that.

Yeah this is intentional. If you put a widget before the ListView, you should wrap the ListView with a MediaQuery.removePadding widget (with removeTop: true).

Well that was a life saver, thanks.

Yeah this is intentional. If you put a widget before the ListView, you should wrap the ListView with a MediaQuery.removePadding widget (with removeTop: true).

This solution helped me and removed my top space of GridView.builder widget:

Container(
            child: MediaQuery.removePadding(
              removeTop: true,
              context: context,
              child: GridView.builder(

Happy to get your help. Thanks dear.

This thread has been automatically locked since there has not been any recent activity after it was closed. If you are still experiencing a similar issue, please open a new bug, including the output of flutter doctor -v and a minimal reproduction of the issue.

Navigation Menu

Repository navigation

Unexpected top padding in ListView put inside scaffold with no appBar #14842

Flutter Doctor:

8 remaining items

Metadata

Assignees

Labels

Type

Projects

Milestone

Relationships

Development

Unexpected top padding in ListView put inside scaffold with no appBar #14842

Description

Flutter Doctor:

Activity

cbracken commented on Mar 1, 2018

itsJoKr commented on Mar 1, 2018

Hixie commented on Mar 8, 2018

radzish commented on Mar 8, 2018

Hixie commented on Mar 8, 2018

sergiandreplace commented on Jun 13, 2018

Jasonthefirst commented on Jun 15, 2018

tiagosito commented on Jul 17, 2018

zoechi commented on Aug 31, 2018

8 remaining items

douglasrosa0110 commented on Aug 25, 2020

hovanhung98hust commented on Sep 2, 2020

inoas commented on Oct 29, 2020

Hixie commented on Oct 29, 2020

nox-machina commented on Feb 22, 2021

kamleshwebtech commented on May 25, 2021

github-actions commented on Aug 1, 2021

Metadata

Metadata

Assignees

Labels

Type

Projects

Milestone

Relationships

Development

Issue actions