How to manually assign the first element of a Listview.builder in Flutter?

Question

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

Event is a model class for the data coming from Firestore, EventCard is the widget, which displays the data in a card.

Answer 1

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

Answer 2

In your ListView.builder, you can tell it to display something else based on its index. We can use an if statement to achieve this. Your index will always start at 0 and will increment every after widget built. You can check if the index is 0 and display your football event when the index is 0.

ListView.builder(
                    itemCount: snapshot.data.documents.length,
                    itemBuilder: (BuildContext context, int index) {
                      if(index==0){
                      DocumentSnapshot events = snapshot.data.documents[index];
                      Event event = Event(
                          events["eventName"],
                          events["startTime"],
                          events["coverImageUrl"],
                          events["location"],
                          events["description"]);

                      return EventCard(event);
                      }
                      else{
                      //return your other things
                      }
                    },
                  ),
                )