Showing empty widget while FutureBuilder is loading data - flutter

Question

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.

Answer 1

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.

Answer 2

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