GOOGLE ADS

viernes, 22 de abril de 2022

FadeInImage en BoxDecoración

Me encanta el FadeInImage

puedo hacer esto

child: FadeInImage.assetNetwork(
image: 'https://placeimg.com/640/480/any',
placeholder: 'assets/images/loading.gif',
),

Quiero usar el FadeInImageen a BoxDecorationcomo se muestra a continuación.

decoration: BoxDecoration(
borderRadius: BorderRadius.circular(8.0),
image: DecorationImage(
image: FadeInImage.assetNetwork(
'${document['image']}'),
fit: BoxFit.cover,
),
),

me sale este error:

The argument type 'FadeInImage' can't be assigned to the parameter type 'ImageProvider'

¿Cómo lo haría?

Caso de uso

En un carrusel, coloque un marcador de posición, antes de que aparezca la imagen cargada en la red

Aquí está mi widget de carrusel (estoy usando el carousel_sliderpaquete para Flutter)

 Widget _carouselSlider(BuildContext context) {
return StreamBuilder<QuerySnapshot>(
stream: Firestore.instance.collection('events').snapshots(),
builder: (BuildContext context, AsyncSnapshot<QuerySnapshot> snapshot) {
if (snapshot.hasError) return new Text('Error: ${snapshot.error}');
switch (snapshot.connectionState) {
case ConnectionState.waiting:
return new Text('Loading...');
default:
return CarouselSlider(
height: 150.0,
enlargeCenterPage: true,
enableInfiniteScroll: false,
items: snapshot.data.documents.map((DocumentSnapshot document) {
print('Listing the documents: $document');
return Builder(
builder: (BuildContext context) {
return GestureDetector(
onTap: () {
print('I am clicked');
Navigator.pushNamed(context, '/detail');
},
child: Container(
width: MediaQuery.of(context).size.width,
margin: EdgeInsets.only(
left: 5.0, right: 5.0, bottom: 20.0),
decoration: BoxDecoration(
borderRadius: BorderRadius.circular(8.0),
image: DecorationImage(
image: NetworkImage('${document['image']}'),
fit: BoxFit.cover,
),
),
child: Center(
child: Text(
'${document['name']}',
style: TextStyle(fontSize: 16.0),
),
),
),
);
},
);
}).toList(),
);
}
},
);
}

Entonces, por la parte

image: DecorationImage(
image: NetworkImage('${document['image']}'),
fit: BoxFit.cover,
),

Deseo tener un enfoque de marcador de posición, en lugar de solo el texto hasta que llegue la imagen cargada en la red.


Solución del problema

Aquí está el código.

class _HomePageState extends State<HomePage> {
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(),
body: Center(
child: FutureBuilder<bool>(
future: _myFuture(),
builder: (BuildContext context, AsyncSnapshot snapshot) {
if (snapshot.hasData) return _yourWidget();
return CircularProgressIndicator();
},
)),
);
}
Widget _yourWidget() {
return Stack(
children: <Widget>[
Center(
child: FadeInImage(
width: 300,
height: 300,
placeholder: AssetImage(chocolateImage),
image: NetworkImage(poolImageUrl),
fit: BoxFit.cover,
),
),
Center(child: Text('Pool', style: TextStyle(fontSize: 36.0, color: Colors.white, fontWeight: FontWeight.bold))),
],
);
}
Future<bool> _myFuture() async {
await Future.delayed(Duration(milliseconds: 10500));
return true;
}
}

No hay comentarios:

Publicar un comentario

Regla de Firestore para acceder a la generación de subcolección Permisos faltantes o insuficientes

Tengo problemas con las reglas de Firestore para permitir el acceso a algunos recursos en una subcolección. Tengo algunos requests document...