Append static items to a ListView.builder generated from the database data

1,738

I resolved this issue through the SliverList widget

this code is an example:

Widget buildGridFilesToExport() {
  return new StreamBuilder(
    stream: Firestore.instance
        .collection('users')
        .document(dataUserGlobal.userAdminId)
        .collection('events')
        .document(dataUserGlobal.eventId)
        .snapshots(),
    builder: (context, snapshot) {
      print(snapshot);
      if (snapshot.hasError) return new Text('Error: ${snapshot.error}');
      switch (snapshot.connectionState) {
        case ConnectionState.waiting:
          return dataUserGlobal.showLoading(dataUserGlobal.purple);
        default:
          List videosList = snapshot.data['thumbnailsUrl'];
          return videosList != null ?

          CustomScrollView(
            slivers: [
              SliverGrid(
                gridDelegate: SliverGridDelegateWithMaxCrossAxisExtent(
                  maxCrossAxisExtent: 200.0,
                  mainAxisSpacing: 10.0,
                  crossAxisSpacing: 10.0,
                  childAspectRatio: 1,
                ),
                delegate: SliverChildBuilderDelegate((context, index) {
                  return Container(
                      padding: EdgeInsets.all(5.0),
                      child: Column(
                        children: <Widget>[
                          Expanded(
                              flex: 7,
                              child: Stack(
                                children: <Widget>[
                                  Container(
                                    margin:
                                    EdgeInsets.only(bottom: 2.0),
                                    decoration: BoxDecoration(
                                      borderRadius: BorderRadius.all(
                                          Radius.circular(5.0)),
                                      image: DecorationImage(
                                        image: NetworkImage(snapshot
                                            .data['thumbnailsUrl']
                                        [index]),
                                        fit: BoxFit.cover,
                                      ),
                                    ),
                                  ),

                                ],
                              )),

                        ],
                      ));
                }, childCount: snapshot.data['thumbnailsUrl'].length),
              ),
              SliverList(
                delegate: SliverChildListDelegate([
                  closeEvent(),
                ]),
              )
            ],
          )
              :
          Center(
              child: Container(
                width: 250,
                child: Text(
                  'Ancora nessun video!\nCarica i video dalla sezione media, oppure vai nella sezione amici e seleziona i video da spostare qui!',
                  textAlign: TextAlign.center,
                  style: TextStyle(
                    fontFamily: 'acumin-pro',
                    fontSize: 22,
                  ),
                ),
              )
          );
      }
    },
  );
}
Share:
1,738
alessandro buffoli
Author by

alessandro buffoli

Updated on December 11, 2022

Comments

  • alessandro buffoli
    alessandro buffoli over 1 year

    I'm getting from the firestore database some data, with this data I create a ListView that show my data.

    I want append at the bottom of this list 3 static items that are different from the generated ones.

    my code for building the list is:

    child: StreamBuilder<QuerySnapshot>(
      stream: Firestore.instance
          .collection('users').document(userAdminId)
          .collection('events')
            .where('operatore', isEqualTo: _user)
          .snapshots(),
      builder: (BuildContext context,
          AsyncSnapshot<QuerySnapshot> snapshot) {
        if (snapshot.hasError)
          return Text('Error: ${snapshot.error}');
        switch (snapshot.data) {
          case null:
            return Container();
          default:
            return ListView.builder(
              itemCount: snapshot.data.documents.length,
              itemBuilder: (context, index) {
                final item = snapshot.data.documents[index];
                final itemID =
                    snapshot.data.documents[index].documentID;
                final list =
                    snapshot.data.documents;
                return Card(
                             ...
    
                            },
                          );
                      }
                    },
                  ),
    
    

    now it generates 2 cards, because I get 2 events from the database

    What I want to do is to append 3 more cards at the bottom of this list,

    that are more and less something like this:

    Card(
      child: Row(
        children: <Widget>[
          Icon(
            Icons.camera_alt
          ),
          Text('Camera')
        ],
      ),
    )
    
    Card(
      child: Row(
        children: <Widget>[
          Icon(
            Icons.folder
          ),
          Text('Media')
        ],
      ),
    )
    
    Card(
      child: Row(
        children: <Widget>[
          Icon(
            Icons.users
          ),
          Text('Friends')
        ],
      ),
    )
    
    

    no matter how many items it generates from the database, I want to append this 3 cards at the bottom

    example:

    if I get 3 events, my list should be:

    [event1]
    [event2]
    [event3]
    [camera]
    [media]
    [friends]
    

    if I get just one event:

    
    [event1]
    [camera]
    [media]
    [friends]