FutureBuilder: output related on the data of the future

Question

What I want to do is: If the data is loading, a ProgressIndicator should be returned. If the data is loaded, but there are no values the Container with Text "Keine Spielberichte vorhanden should be returned. If the data is loadad and there are values, then the ListView should be returned.

At the moment, if there is data then the Container and the ListView is returned..

return FutureBuilder<BerichtList>(
        future: futureBerichte,
        builder: (context, snapshot) {
          if (snapshot.hasData) {
            //for (var i = 0; i < snapshot.data.berichte.length; i++) {
            return ListView.builder(
                itemCount: snapshot.data.berichte.length,
                itemBuilder: (context, index) {
                  if (snapshot.data.berichte[index].team == team && index > 0) {
                    return Card(
                      shape: RoundedRectangleBorder(
                          borderRadius: BorderRadius.circular(15.0)),
                      elevation: 5,
                      color: Colors.white,
                      child: Column(
                        mainAxisSize: MainAxisSize.min,
                        crossAxisAlignment: CrossAxisAlignment.start,
                        children: <Widget>[
                          Container(
                            padding: EdgeInsets.symmetric(horizontal: 10),
                            margin: EdgeInsets.symmetric(vertical: 15),
                            child: Text(
                              DateFormat("dd.MM.yyyy HH:mm").format(
                                  DateTime.parse(snapshot
                                      .data.berichte[index].spielDatum)),
                              style: TextStyles.body,
                            ),
                          ),
                          Container(
                            padding: EdgeInsets.symmetric(horizontal: 10),
                            child: Text(
                              snapshot.data.berichte[index].spiele,
                              style: TextStyles.body,
                            ),
                          ),            
                          Container(
                            padding: EdgeInsets.symmetric(horizontal: 10),
                            margin: EdgeInsets.only(bottom: 30),

                            /*   width: 350,
                                      height: 800, */
                            child: Text(
                              snapshot.data.berichte[index].bericht,
                              style: TextStyles.body,
                            ),
                          ),
                        ],
                      ),
                    );
                  } else if (index == 0) {
                    return Container(
                      child: Center(
                        child: Text("Keine Spielberichte vorhanden",
                            style: TextStyles.body),
                      ),
                    );
                  } else
                    return Container();
                });
          } else
            return AppProgressIndicator();
        });

Answer 1

use this, just always return a progress indicator until the future function is done, then check for the data length, if empty will return the text, if not the list will be built

return FutureBuilder<BerichtList>(
        future: futureBerichte,
        builder: (context, snapshot) {
          if (snapshot.connectionState ==
                              ConnectionState.done) {
            if(snapshot.hasData && snapshot.data.isNotEmpty)
            //for (var i = 0; i < snapshot.data.berichte.length; i++) {
            return ListView.builder(
                itemCount: snapshot.data.berichte.length,
                itemBuilder: (context, index) {
                  if (snapshot.data.berichte[index].team == team && index > 0) {
                return Card(
                  shape: RoundedRectangleBorder(
                      borderRadius: BorderRadius.circular(15.0)),
                  elevation: 5,
                  color: Colors.white,
                  child: Column(
                    mainAxisSize: MainAxisSize.min,
                    crossAxisAlignment: CrossAxisAlignment.start,
                    children: <Widget>[
                      Container(
                        padding: EdgeInsets.symmetric(horizontal: 10),
                        margin: EdgeInsets.symmetric(vertical: 15),
                        child: Text(
                          DateFormat("dd.MM.yyyy HH:mm").format(
                              DateTime.parse(snapshot
                                  .data.berichte[index].spielDatum)),
                          style: TextStyles.body,
                        ),
                      ),
                      Container(
                        padding: EdgeInsets.symmetric(horizontal: 10),
                        child: Text(
                          snapshot.data.berichte[index].spiele,
                          style: TextStyles.body,
                        ),
                      ),            
                      Container(
                        padding: EdgeInsets.symmetric(horizontal: 10),
                        margin: EdgeInsets.only(bottom: 30),

                        /*   width: 350,
                                  height: 800, */
                        child: Text(
                          snapshot.data.berichte[index].bericht,
                          style: TextStyles.body,
                        ),
                      ),
                    ],
                  ),
                );
              }
            })  else  {
                return Container(
                  child: Center(
                    child: Text("Keine Spielberichte vorhanden",
                        style: TextStyles.body),
                  ),
                );
              }  
      } 
        return AppProgressIndicator();
      
    });

Answer 2

this might help you.

return FutureBuilder<BerichtList>(
        future: futureBerichte,
        builder: (context, snapshot) {
         if(!snapshot.hasData){
              return CircularProgressIndicator();
          }
         return snapshot.data!.length == 0 ? Text("Keine Spielberichte vorhanden")
                                          : Listview.builder( // your logic here);
        
        });