Question 76356 in Flutter Question posted in
The official Flutter documentation can be found here.

Showing empty widget while FutureBuilder is loading data – Flutter

I have the following FutureBuilder:

child: FutureBuilder(
          future: fetchNotifications(widget.usuarioId),
          builder: (context, snapshot) {
            if (snapshot.hasData) {
              List<dynamic>? filteredList = snapshot.data as List;

              return ListView.separated(
                separatorBuilder: (BuildContext context, int index) =>
                    new Divider(
                  color: Colors.black26,
                  thickness: 0.5,
                ),
                itemCount: filteredList.length,
                shrinkWrap: true,
                itemBuilder: (BuildContext context, index) {
                  NotificationModelo notificacion = filteredList[index];
                  var textoNot = notificacion.texto;

                  print("texto ${notificacion.texto}");
                  if (notificacion.texto == "New files available for you" &&
                      _fr) {
                    textoNot = "Nouveaux fichiers disponibles pour vous";
                  }

                  if (_fr) {}

                  return GestureDetector(
                    onTap: () {},
                    child: Container(
                      height: 50,
                      width: MediaQuery.of(context).size.width,
                      color: Colors.white,
                      child: GestureDetector(
                        onTap: () {
                          if (notificacion.categoria == "Travel Document") {
                            Navigator.push(
                                context,
                                MaterialPageRoute(
                                    builder: (context) =>
                                        BDTravelDocumentsNuevo()));
                          }
                          if (notificacion.categoria == "Itinerary") {
                            Navigator.push(
                                context,
                                MaterialPageRoute(
                                    builder: (context) => BDItineraryNuevo()));
                          }
                          if (notificacion.categoria == "Experience") {
                            Navigator.push(
                                context,
                                MaterialPageRoute(
                                    builder: (context) =>
                                        BDExperiencesNuevo()));
                          }
                          if (notificacion.categoria == "News and Promos") {
                            Navigator.push(
                                context,
                                MaterialPageRoute(
                                    builder: (context) =>
                                        PrivateAreaNuevoDos()));
                          }
                        },
                        child: Padding(
                          padding: const EdgeInsets.only(left: 8.0, right: 8.0),
                          child: Card(
                              elevation: 0,
                              child: Padding(
                                padding: const EdgeInsets.all(2.0),
                                child: Container(
                                  width: MediaQuery.of(context).size.width,
                                  child: Center(
                                    child: new Row(
                                      mainAxisAlignment:
                                          MainAxisAlignment.start,
                                      children: [
                                        SizedBox(
                                          width: 10,
                                        ),
                                        notificacion.categoria ==
                                                "Travel Document"
                                            ? CircleAvatar(
                                                radius: 20.0,
                                                backgroundImage: AssetImage(
                                                    "assets/item2.png"),
                                                backgroundColor:
                                                    Colors.transparent,
                                              )
                                            : notificacion.categoria ==
                                                    "Itinerary"
                                                ? CircleAvatar(
                                                    radius: 20.0,
                                                    backgroundImage: AssetImage(
                                                        "assets/item3.png"),
                                                    backgroundColor:
                                                        Colors.transparent,
                                                  )
                                                : notificacion.categoria ==
                                                        "Experience"
                                                    ? CircleAvatar(
                                                        radius: 20.0,
                                                        backgroundImage: AssetImage(
                                                            "assets/item4.png"),
                                                        backgroundColor:
                                                            Colors.transparent,
                                                      )
                                                    : CircleAvatar(
                                                        radius: 20.0,
                                                        backgroundImage: AssetImage(
                                                            "assets/logolc.png"),
                                                        backgroundColor:
                                                            Colors.transparent,
                                                      ),
                                        SizedBox(
                                          width: 15,
                                        ),
                                        Row(
                                          mainAxisAlignment:
                                              MainAxisAlignment.start,
                                          crossAxisAlignment:
                                              CrossAxisAlignment.center,
                                          children: [
                                            Container(
                                              width: 199,
                                              height: 40,
                                              child: Column(
                                                mainAxisAlignment:
                                                    MainAxisAlignment.center,
                                                crossAxisAlignment:
                                                    CrossAxisAlignment.start,
                                                children: [
                                                  Text(
                                                    "${textoNot}",
                                                    textAlign: TextAlign.start,
                                                    maxLines: 1,
                                                    overflow:
                                                        TextOverflow.ellipsis,
                                                    style: TextStyle(
                                                        fontSize: 15,
                                                        fontWeight:
                                                            FontWeight.bold),
                                                  ),
                                                ],
                                              ),
                                            ),
                                          ],
                                        ),
                                        Spacer(),
                                        GestureDetector(
                                          onTap: () {},
                                          child: notificacion.categoria ==
                                                  "Push"
                                              ? Container()
                                              : IconButton(
                                                  onPressed: () {
                                                    if (notificacion
                                                            .categoria ==
                                                        "Travel Document") {
                                                      Navigator.push(
                                                          context,
                                                          MaterialPageRoute(
                                                              builder: (context) =>
                                                                  BDTravelDocumentsNuevo()));
                                                    }
                                                    if (notificacion
                                                            .categoria ==
                                                        "Itinerary") {
                                                      Navigator.push(
                                                          context,
                                                          MaterialPageRoute(
                                                              builder: (context) =>
                                                                  BDItineraryNuevo()));
                                                    }
                                                    if (notificacion
                                                            .categoria ==
                                                        "Experience") {
                                                      Navigator.push(
                                                          context,
                                                          MaterialPageRoute(
                                                              builder: (context) =>
                                                                  BDExperiencesNuevo()));
                                                    }
                                                    if (notificacion
                                                            .categoria ==
                                                        "News and Promos") {
                                                      Navigator.push(
                                                          context,
                                                          MaterialPageRoute(
                                                              builder: (context) =>
                                                                  PrivateAreaNuevoDos()));
                                                    }
                                                  },
                                                  icon: Icon(
                                                    Icons.arrow_forward_ios,
                                                  )),
                                        )
                                      ],
                                    ),
                                  ),
                                ),
                              )),
                        ),
                      ),
                    ),
                  );
                },
              );
            }
            return AnyNotification();
          }),

It is working as it should, the only issue is that I need to show the list data just after loading the data is finished, and now during loading time it is showing the widget AnyNotification(), which I want to show only when there are any data to show.

My customer doesn´t want to show anything during loading time.

Tags:

2

Answers


  1. 0

    You can follow this structure.

    return FutureBuilder(
  future: future,
  builder: (context, snapshot) {
    if (snapshot.connectionState == ConnectionState.waiting) {
      return CircularProgressIndicator();
    }

    if (snapshot.hasError) {
      return Text("got error");
    }

    if (snapshot.hasData) {
      List<dynamic>? filteredList = snapshot.data as List?;
      if (filteredList == null || filteredList.isEmpty) {
        return AnyNotification();
      } else {
        return ListView.separated(
          itemBuilder: itemBuilder,
          separatorBuilder: separatorBuilder,
          itemCount: itemCount,
        );
      }
    }

    return Text("NA State");
  },
);

    Find more about FutureBuilder-class.

    Login or Signup to reply.
  2. 0

    Try the following code:

    FutureBuilder(
  future: fetchNotifications(widget.usuarioId),
  builder: (context, snapshot) {
    if (snapshot.connectionState == ConnectionState.waiting) {
      return const CircularProgressIndicator();
    }

    if (snapshot.hasError) {
      return const Text("Error");
    }

    if (snapshot.hasData) {
      List<dynamic>? filteredList = snapshot.data as List;

      return ListView.separated(
        separatorBuilder: (BuildContext context, int index) => const Divider(color: Colors.black26,thickness: 0.5),
        itemCount: filteredList.length,
        shrinkWrap: true,
        itemBuilder: (BuildContext context, index) {
          NotificationModelo notificacion = filteredList[index];
          var textoNot = notificacion.texto;

          print("texto ${notificacion.texto}");
          if (notificacion.texto == "New files available for you" && _fr) {
            textoNot = "Nouveaux fichiers disponibles pour vous";
          }

          if (_fr) {}

          return GestureDetector(
            onTap: () {},
            child: Container(
              height: 50,
              width: MediaQuery.of(context).size.width,
              color: Colors.white,
              child: GestureDetector(
                onTap: () {
                  if (notificacion.categoria == "Travel Document") {
                    Navigator.push(context, MaterialPageRoute(builder: (context) => BDTravelDocumentsNuevo()));
                  }
                  if (notificacion.categoria == "Itinerary") {
                    Navigator.push(context, MaterialPageRoute(builder: (context) => BDItineraryNuevo()));
                  }
                  if (notificacion.categoria == "Experience") {
                    Navigator.push(context, MaterialPageRoute(builder: (context) => BDExperiencesNuevo()));
                  }
                  if (notificacion.categoria == "News and Promos") {
                    Navigator.push(context, MaterialPageRoute(builder: (context) => PrivateAreaNuevoDos()));
                  }
                },
                child: Padding(
                  padding: const EdgeInsets.only(left: 8.0, right: 8.0),
                  child: Card(
                    elevation: 0,
                    child: Padding(
                      padding: const EdgeInsets.all(2.0),
                      child: SizedBox(
                        width: MediaQuery.of(context).size.width,
                        child: Center(
                          child: Row(
                            mainAxisAlignment: MainAxisAlignment.start,
                            children: [
                              const SizedBox(width: 10),
                              notificacion.categoria == "Travel Document"
                                  ? const CircleAvatar(
                                      radius: 20.0,
                                      backgroundImage: AssetImage("assets/item2.png"),
                                      backgroundColor: Colors.transparent,
                                    )
                                  : notificacion.categoria == "Itinerary"
                                      ? const CircleAvatar(
                                          radius: 20.0,
                                          backgroundImage: AssetImage("assets/item3.png"),
                                          backgroundColor: Colors.transparent,
                                        )
                                      : notificacion.categoria == "Experience"
                                          ? const CircleAvatar(
                                              radius: 20.0,
                                              backgroundImage: AssetImage("assets/item4.png"),
                                              backgroundColor: Colors.transparent,
                                            )
                                          : const CircleAvatar(
                                              radius: 20.0,
                                              backgroundImage: AssetImage("assets/logolc.png"),
                                              backgroundColor: Colors.transparent,
                                            ),
                              const SizedBox(width: 15),
                              Row(
                               mainAxisAlignment: MainAxisAlignment.start,
                                crossAxisAlignment: CrossAxisAlignment.center,
                                children: [
                                  SizedBox(
                                    width: 199,
                                    height: 40,
                                    child: Column(
                                      mainAxisAlignment: MainAxisAlignment.center,
                                      crossAxisAlignment: CrossAxisAlignment.start,
                                      children: [
                                        Text(
                                          "$textoNot",
                                         textAlign: TextAlign.start,
                                          maxLines: 1,
                                          overflow: TextOverflow.ellipsis,
                                          style: const TextStyle(fontSize: 15, fontWeight: FontWeight.bold),
                                        ),
                                      ],
                                    ),
                                  ),
                                ],
                              ),
                              const Spacer(),
                              GestureDetector(
                                onTap: () {},
                                child: notificacion.categoria == "Push"
                                    ? Container()
                                    : IconButton(
                                        onPressed: () {
                                          if (notificacion.categoria == "Travel Document") {
                                            Navigator.push(context, MaterialPageRoute(builder: (context) => BDTravelDocumentsNuevo()));
                                          }
                                          if (notificacion.categoria == "Itinerary") {
                                            Navigator.push(context, MaterialPageRoute(builder: (context) => BDItineraryNuevo()));
                                          }
                                          if (notificacion.categoria == "Experience") {
                                            Navigator.push(context, MaterialPageRoute(builder: (context) => BDExperiencesNuevo()));
                                          }
                                          if (notificacion.categoria == "News and Promos") {
                                            Navigator.push(context, MaterialPageRoute(builder: (context) => PrivateAreaNuevoDos()));
                                          }
                                        },
                                        icon: const Icon(
                                          Icons.arrow_forward_ios,
                                        ),
                                      ),
                              ),
                            ],
                          ),
                        ),
                      ),
                    ),
                  ),
                ),
              ),
            ),
          );
        },
      );
    }
    return AnyNotification();
  },
),
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search