在Flutter中从Firebase加载图像时使用CircularProgressIndicator小部件

Question

我想知道如何将circularprogressionator添加到从firebase获得的图像中。当我加载数据时，"文本"先出现，然后是图像，这似乎并不优雅。这是我的密码。请检查我的代码并帮助我实现这一点。提前谢谢。

class MyApp extends StatefulWidget {
static const String id = 'Myapp_screen';
@override
_MyAppState createState() => _MyAppState();
}
class _MyAppState extends State<MyApp> {
@override
Widget build(BuildContext context) {
return Padding(
padding: const EdgeInsets.all(0.0),
child: StreamBuilder(
stream: Firestore.instance.collection('news').limit(20).snapshots(),
builder: (context, snapshot) {
if (!snapshot.hasData) {
return Center(
child: CircularProgressIndicator(
value: null,
strokeWidth: 2.0,
));
} else {
return ListView.builder(
itemCount: snapshot.data.documents.length,
itemBuilder: (context, index) {
DocumentSnapshot documentSnapshot =
snapshot.data.documents[index];
return Container(
child: Card(
child: Column(children: <Widget>[
Image.network(documentSnapshot['images']),
Text(documentSnapshot['title'])
]),
),
);
},
);
}
},
));
}
}

Answer 1

您可以使用loading builder属性来实现这一点。

下面的代码明确了你的想法。

Image.network(
'https://previews.123rf.com/images/blueringmedia/blueringmedia1701/blueringmedia170100692/69125003-colorful-kite-flying-in-blue-sky-illustration.jpg',
loadingBuilder: (BuildContext context, Widget child,
ImageChunkEvent loadingProgress) {
if (loadingProgress == null) return child;
return Center(
child: CircularProgressIndicator(
value: loadingProgress.expectedTotalBytes != null
? loadingProgress.cumulativeBytesLoaded /
loadingProgress.expectedTotalBytes
: null,
),
);
},
),

Answer 2

如果您有gif或任何其他加载动画资产，您可以使用以下代码来使用FadeInImage()函数。

FadeInImage(
placeholder: AssetImage('assets/LOADING_ANIMATION.gif'),
image: NetworkImage('URL_OF_IMAGE'),
)

所以完整的代码看起来是这样的：

class MyApp extends StatefulWidget {
static const String id = 'Myapp_screen';
@override
_MyAppState createState() => _MyAppState();
}
class _MyAppState extends State<MyApp> {
@override
Widget build(BuildContext context) {
return Padding(
padding: const EdgeInsets.all(0.0),
child: StreamBuilder(
stream: Firestore.instance.collection('news').limit(20).snapshots(),
builder: (context, snapshot) {
if (!snapshot.hasData) {
return Center(
child: CircularProgressIndicator(
value: null,
strokeWidth: 2.0,
));
} else {
return ListView.builder(
itemCount: snapshot.data.documents.length,
itemBuilder: (context, index) {
DocumentSnapshot documentSnapshot =
snapshot.data.documents[index];
return Container(
child: Card(
child: Column(children: <Widget>[
FadeInImage(
placeholder: AssetImage('assets/LOADING_ANIMATION.gif'),
image: NetworkImage(documentSnapshot['images']),
),
Text(documentSnapshot['title'])
]),
),
);
},
);
}
},
));
}
}

Answer 3

import 'package:flutter/material.dart';
import 'package:transparent_image/transparent_image.dart';
void main() {
runApp(MyApp());
}
class MyApp extends StatelessWidget {
@override
Widget build(BuildContext context) {
final title = 'Fade in images';
return MaterialApp(
title: title,
home: Scaffold(
appBar: AppBar(
title: Text(title),
),
body: Stack(
children: <Widget>[
Center(child: CircularProgressIndicator()),
Center(
child: FadeInImage.memoryNetwork(
placeholder: kTransparentImage,
image: 'https://picsum.photos/250?image=9',
),
),
],
),
),
);
}
}