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'),
),
],
),
),
);
}
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.
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.
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.
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With