Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

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'),
            ),
          ],
        ),
      ),
    );
  }
like image 480
Nick Avatar asked Jan 25 '19 09:01

Nick


People also ask

How do you add padding and margin in flutter?

Apply Padding and Margin using Container Widget: padding: EdgeInsets. all(20), //You can use EdgeInsets like above margin: EdgeInsets. all(5), child: Text("Hello World, Text 4"), ), You can use EdgeInsets like shown above in the Container widget.

How do I give my child padding in flutter?

We can apply padding around any widget by placing it as the child of the Padding widget. The size of the child widget inside padding is constrained by how much space is remaining after adding empty space around. The Padding widget adds empty space around any widget by using the abstract EdgeInsetsGeometry class.


2 Answers

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,
       );
    },
)
...
like image 74
SacWebDeveloper Avatar answered Oct 22 '22 13:10

SacWebDeveloper


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.

like image 40
Govaadiyo Avatar answered Oct 22 '22 13:10

Govaadiyo