Flutter : How to add a Header Row to a ListView
Here's how I solved this. Thanks @najeira for getting me thinking about other solutions.
In the first body Column I used the same layout for my Header that I used for the ListTile
.
Because my data ListTil
e, in this case, includes a CircleAvatar
, all the horizontal spacing is off a bit... 5 columns where the CircleAvatar
is rendered... then 4 evenly spaced columns.
So... I added a ListTile
to the first body Column
, a CircleAvatar
with a backgroundColor
of transparent, and then a Row
of my 4 Headings.
ListTile(
onTap: null,
leading: CircleAvatar(
backgroundColor: Colors.transparent,
),
title: Row(
children: <Widget>[
Expanded(child: Text("First Name")),
Expanded(child: Text("Last Name")),
Expanded(child: Text("City")),
Expanded(child: Text("Id")),
]
),
),
Return the header as first row by itemBuilder:
ListView.builder(
itemCount: data == null ? 1 : data.length + 1,
itemBuilder: (BuildContext context, int index) {
if (index == 0) {
// return the header
return new Column(...);
}
index -= 1;
// return row
var row = data[index];
return new InkWell(... with row ...);
},
);