简体   繁体   中英

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

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'),
            ),
          ],
        ),
      ),
    );
  }

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,
       );
    },
)
...

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.

The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.

 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM