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 FadeInImage
en a BoxDecoration
como 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_slider
paquete 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