I have a Flutter application, which displays events (stored in Cloud Firestore), on cards in a Listview.builder. I have a specific event, football. It has it's own, special cards. There can be multiple regular events in the list, but only one football event. I'd like to display this football event on the top of the list, as the first card. How can I achieve this?
My code so far:
import 'package:cloud_firestore/cloud_firestore.dart';
import 'package:flutter/material.dart';
import 'package:fociapp/model/events.dart';
import 'package:fociapp/ui/event_card.dart';
class HomePage extends StatelessWidget {
@override
Widget build(BuildContext context) {
return StreamBuilder(
stream: Firestore.instance.collection("events").snapshots(),
builder: (BuildContext context, AsyncSnapshot snapshot) {
return snapshot.hasData
? Container(
color: Colors.grey[850],
child: ListView.builder(
itemCount: snapshot.data.documents.length,
itemBuilder: (BuildContext context, int index) {
DocumentSnapshot events = snapshot.data.documents[index];
Event event = Event(
events["eventName"],
events["startTime"],
events["coverImageUrl"],
events["location"],
events["description"]);
return EventCard(event);
},
),
)
: Center(
child: CircularProgressIndicator(),
);
});
}
}
Just increase the ItemCount by one. And in your ItemBuilder if index is 0 return the Football-Card and if not return your normal cards (index - 1).
Like so:
ListView.builder(
itemCount: snapshot.data.documents.length + 1,
itemBuilder: (BuildContext context, int index) {
if(index == 0) {
// return Football-Card
} else {
DocumentSnapshot events = snapshot.data.documents[index - 1];
Event event = Event(
events["eventName"],
events["startTime"],
events["coverImageUrl"],
events["location"],
events["description"]);
return EventCard(event);
}
},
),