Why does my application close when I use a listview with Cards and NetworkImage? - flutter

Question

The ListView.builder is being built with some cards that contain NetworkImage, for the moment it creates 25 cards for me, therefore it has to load 25 images, at the moment of making a slide the application remains stopped and at the end it closes, which could be doing wrong? Here is the code, I would appreciate if you could help me. Images are stored in Firebase Storage and weigh less than 300 kb,
It is also worth mentioning that when I scroll through the listview the images are reloaded.
FutureBuilder(
future: urlPublicaciones.cargarUrlPublicaciones(),
builder: (BuildContext context,
AsyncSnapshot<List<UrlPublicacionesModel>> snapshotUrl) {
if (snapshotUrl.hasData) {
urlPosts = snapshotUrl.data;
return FutureBuilder(
future: urlPublicaciones.cargarPublicaciones(urlPosts),
builder: (BuildContext context,
AsyncSnapshot<List<CategoriasResponse>> snapshot) {
if (snapshot.hasData) {
publicaciones = snapshot.data;
if (publicaciones.isNotEmpty) {
return ListView.builder(
itemCount: publicaciones.length,
itemBuilder: (BuildContext context, int index) {
return Dismissible(
confirmDismiss: (direction) async {
switch (direction) {
case DismissDirection.endToStart:
return await _showConfirmationDialog(
context) ==
true;
case DismissDirection.startToEnd:
return await _showConfirmationDialog(
context) ==
true;
case DismissDirection.horizontal:
case DismissDirection.vertical:
case DismissDirection.up:
case DismissDirection.down:
assert(false);
}
return false;
},
background: Container(
padding:
EdgeInsets.symmetric(horizontal: 12.0),
color: Colors.red,
alignment: Alignment.centerLeft,
child: Icon(
Icons.delete_forever,
color: Colors.white,
size: 50.0,
),
),
secondaryBackground: Container(
padding:
EdgeInsets.symmetric(horizontal: 12.0),
color: Colors.red,
alignment: Alignment.centerRight,
child: Icon(
Icons.delete_forever,
color: Colors.white,
size: 50.0,
),
),
key: UniqueKey(),
onDismissed: (direction) async {
_showCircularProgressDelete(context);
if (await urlPublicaciones
.eliminarPublicacion(urlPosts[index])) {
setState(() {
publicaciones.removeAt(index);
});
Navigator.pop(context);
}
else {
Navigator.pop(context);
await _showErrorDialog(context);
}
},
child: _tarjeta(
context, publicaciones[index], index));
},
);
} else {
return Center(
child: Text(
'Aún no cuentas con ninguna publicación',
style: TextStyle(fontSize: 25.0),
textAlign: TextAlign.center));
}
} else {
return Center(child: CircularProgressIndicator());
}
},
);
} else {
return Center(child: CircularProgressIndicator());
}
},
),
Widget _tarjeta(
BuildContext context,
CategoriasResponse publicacion, int index) {
colores = _calculoPuntuacion(publicacion.calificacion.calificacion_total);
return Container(
margin: EdgeInsets.symmetric(vertical: 10),
padding: EdgeInsets.symmetric(horizontal: 10),
child: GestureDetector(
onTap: () {
Navigator.pushNamed(context, 'detalle_mipublicacion',
arguments: publicacion);
},
child: Card(
elevation: 10.0,
shape:
RoundedRectangleBorder(borderRadius: BorderRadius.circular(20.0)),
child: Column(
children: <Widget>[
Column(
mainAxisAlignment: MainAxisAlignment.center,
children: <Widget>[
SizedBox(
height: 10.0,
),
Container(
padding:
EdgeInsetsDirectional.fromSTEB(5.0, 10.0, 10.0, 0.0),
alignment: AlignmentDirectional.center,
child: _cargarImagen(publicacion)),
Column(
children: <Widget>[
SizedBox(
height: 28.0,
child: Text(
publicacion.nombre,
style: TextStyle(
fontWeight: FontWeight.bold, fontSize: 20.0),
textAlign: TextAlign.center,
)),
Text(
'Categoria: ' + publicacion.categoria,
style: TextStyle(
fontWeight: FontWeight.normal, fontSize: 15.0),
textAlign: TextAlign.center,
)
],
),
],
),
Column(
children: <Widget>[
SizedBox(
height: 35.0,
child: Row(
mainAxisSize: MainAxisSize.min,
children: [
Icon(Icons.star, color: colores[0]),
Icon(Icons.star, color: colores[1]),
Icon(Icons.star, color: colores[2]),
Icon(Icons.star, color: colores[3]),
Icon(Icons.star, color: colores[4]),
Text(publicacion.calificacion.calificacion_total
.toString())
],
),
)
],
),
Column(
children: <Widget>[
Column(
children: <Widget>[
Row(
mainAxisAlignment: MainAxisAlignment.center,
children: <Widget>[
Row(
mainAxisAlignment: MainAxisAlignment.center,
children: <Widget>[
Icon(Icons.phone, color: Colors.orangeAccent),
Text(publicacion.telefono.toString(),
overflow: TextOverflow.ellipsis)
],
),
]),
Row(
mainAxisAlignment: MainAxisAlignment.center,
children: <Widget>[
Row(
children: <Widget>[
Icon(Icons.location_on,
color: Colors.orangeAccent),
Text(publicacion.direccion,
overflow: TextOverflow.ellipsis)
],
),
]),
],
),
],
),
SizedBox(height: 10)
],
),
),
),
);
}
Widget _cargarImagen(CategoriasResponse publicacion) {
final logo = Container(
child: Card(
elevation: 5.0,
shape:
RoundedRectangleBorder(borderRadius: BorderRadius.circular(10.0)),
child: ClipRRect(
borderRadius: BorderRadius.circular(10.0),
child: FadeInImage(
placeholder: AssetImage('assets/img/giphy.gif'),
image: NetworkImage(publicacion.fotos.url1),
height: 150.0,
width: 170.0,
fit: BoxFit.fill),
),
),
);
return logo;
}

Answer 1

Try this:
FutureBuilder(
future: urlPublicaciones.cargarUrlPublicaciones(),
builder: (BuildContext context,
AsyncSnapshot<List<UrlPublicacionesModel>> snapshotUrl) {
if (snapshotUrl.hasData) {
urlPosts = snapshotUrl.data;
return FutureBuilder(
future: urlPublicaciones.cargarPublicaciones(urlPosts),
builder: (BuildContext context,
AsyncSnapshot<List<CategoriasResponse>> snapshot) {
if (snapshot.hasData) {
publicaciones = snapshot.data;
if (publicaciones.isNotEmpty) {
return ListView.builder(
itemCount: publicaciones.length,
itemBuilder: (BuildContext context, int index) {
return Dismissible(
confirmDismiss: (direction) async {
switch (direction) {
case DismissDirection.endToStart:
return await _showConfirmationDialog(
context);
case DismissDirection.startToEnd:
return await _showConfirmationDialog(
context);
}
},
background: Container(
padding:
EdgeInsets.symmetric(horizontal: 12.0),
color: Colors.red,
alignment: Alignment.centerLeft,
child: Icon(
Icons.delete_forever,
color: Colors.white,
size: 50.0,
),
),
secondaryBackground: Container(
padding:
EdgeInsets.symmetric(horizontal: 12.0),
color: Colors.red,
alignment: Alignment.centerRight,
child: Icon(
Icons.delete_forever,
color: Colors.white,
size: 50.0,
),
),
key: UniqueKey(),
onDismissed: (direction) async {
_showCircularProgressDelete(context);
if (await urlPublicaciones
.eliminarPublicacion(urlPosts[index])) {
setState(() {
publicaciones.removeAt(index);
});
Navigator.pop(context);
}
else {
Navigator.pop(context);
await _showErrorDialog(context);
}
},
child: _tarjeta(
context, publicaciones[index], index));
},
);
} else {
return Center(
child: Text(
'Aún no cuentas con ninguna publicación',
style: TextStyle(fontSize: 25.0),
textAlign: TextAlign.center));
}
} else {
return Center(child: CircularProgressIndicator());
}
},
);
} else {
return Center(child: CircularProgressIndicator());
}
},
),