How to add padding top of the ListView.builder in Flutter?

Question

Mostly I use ListView and ListView.builder in my Flutter project. And mostly I use build widget body part to place the ListView or ListView.builder. I look at Flutter documentation and didn't fine any info or example.

Here is a basic ListView Example. As you can see ListView is placed in body. I want some padding top of the body and then ListView. The padding ends and ListView starts.

How to add padding top of the the ListView.builder in Flutter?

@override
  Widget build(BuildContext context) {
    final title = 'Basic List';

    return MaterialApp(
      title: title,
      home: Scaffold(
        appBar: AppBar(
          title: Text(title),
        ),
        body: // how to add some padding here then ListView
             ListView(
          children: <Widget>[
            ListTile(
              leading: Icon(Icons.map),
              title: Text('Map'),
            ),
            ListTile(
              leading: Icon(Icons.photo_album),
              title: Text('Album'),
            ),
            ListTile(
              leading: Icon(Icons.phone),
              title: Text('Phone'),
            ),
          ],
        ),
      ),
    );
  }

score 79 · Answer 1 · answered Jan 30 '20 at 03:22

79

If you want to add padding to the inner content that scrolls up and down with the items, you can just add padding to the ListView itself.

If you wrap the ListView in a Padding or Container, it will create a gap between the edge where the content disappears and the widget above.

...
ListView.builder(
    padding: EdgeInsets.only(top: 10),
    itemCount: cards.length,
    itemBuilder: (context, index) {
       return MyCard(
           title: cards[index].title,
       );
    },
)
...

answered Jan 30 '20 at 03:22

SacWebDeveloper

2,563
2
18
15

9

This is the correct answer, the marked answer will make the list view scroll into the "empty" margin at the top. Using the ListView's padding will just offset the content slightly but the scroll will still be the top of the list view, which I believe is what most people want. – William T. Mar 19 '20 at 16:29

Govaadiyo · Accepted Answer · 2019-01-25T09:58:54.790

12

Just wrap your ListView to Container Widget and Container widget it self has property to set padding/margin by use EdgeInsets.only(top:50) // or whatever you want

For more info about EdgeInsets click Here.

edited Jan 25 '19 at 09:58

answered Jan 25 '19 at 09:56

Govaadiyo

5,644
9
43
72

Thanks Govaadiyo, but I have a very long ListView, If I put container can I get any overflow issues? – Nick Jan 25 '19 at 09:57
Just try to wrap as per your code putted. There will not be occur this type of issue. – Govaadiyo Jan 25 '19 at 09:59
3

@Nick BTW ListView itself has padding property you can set it too as top padding. – Govaadiyo Jan 25 '19 at 10:01
ListView padding it effects all its children isn't it? I have a ListView.builder and sometimes it gets 300 data from server and some times its get 500 or more. Does Container expand itself based on the ListView items? – Nick Jan 25 '19 at 10:03
ListView itself has scroll no need to expand container. – Govaadiyo Jan 25 '19 at 10:05
9

This is wrong in 2020. It will add padding to the outside of the ListView which is not the content panel that moves up and down inside the container. You will have a gap between top of the ListView and whatever is above it as if you are adding margin. Just add padding to the ListView itself. – SacWebDeveloper Jan 30 '20 at 03:16
Hi @SacWebDeveloper, I am encountering the same problem and adding a padding didn't work in ListView or even when I wrap the ListView in a Container with padding. Would you have any suggestions please? x – Karen Chan Jul 14 '20 at 15:05

How to add padding top of the ListView.builder in Flutter?

2 Answers2