如何在加载图像时添加进度条或循环进度此代码(Flutter) ?我尝试了不同的解决方案，但都不走运

Question

如何在加载图像时添加进度条或循环进度此代码(Flutter) ?我尝试了不同的解决方案，但都没有运气:(

如何在加载图像时添加进度条或循环进度此代码(Flutter) ?我尝试了不同的解决方案，但都没有运气:(

import 'package:photo_view/photo_view.dart';
import 'package:photo_view/photo_view_gallery.dart';
class OnlineImage extends StatefulWidget {
@override
_OnlineImageState createState() => _OnlineImageState();
}
class _OnlineImageState extends State<OnlineImage> {
final imageList = [
'https://colorlinemapsapp.000webhostapp.com/wallpaper/DHA%20PESHAWAR%20UPDATE%20PLAN%20(%20A%20)-Model%20(1)_page-0001.jpg',
];
//images url
@override
Widget build(BuildContext context) {
return Scaffold(
backgroundColor: Colors.white,
appBar: AppBar(
backgroundColor: Colors.deepPurple,
title: Text("Hayatabad Master Plan"),
),
// add this body tag with container and photoview widget
body: Container(
child: Center(
child: Container(
height: 800,
child: Padding(
padding: const EdgeInsets.all(8.0),
child: Card(
elevation: 20,
child: Padding(
padding: const EdgeInsets.all(8.0),
child: PhotoViewGallery.builder(
itemCount: imageList.length,
builder: (context, index) {
return PhotoViewGalleryPageOptions(
basePosition: Alignment.center,
imageProvider: NetworkImage(imageList[index]),
minScale: PhotoViewComputedScale.contained * 0.8,
maxScale: PhotoViewComputedScale.covered * 5,
);
},
scrollPhysics: BouncingScrollPhysics(),
backgroundDecoration: BoxDecoration(
color: Theme.of(context).canvasColor,
),
),
),
),
),[enter image description here][1]
),
),
),
);
}
} ```

[1]: https://i.stack.imgur.com/znE6t.jpg
[2]: https://i.stack.imgur.com/6xJ7b.gif

Answer 1

使用这个插件来实现这个。

将此添加到包的pubspec中。yaml文件:

dependencies:
cached_network_image: ^2.5.1

并包含为:

CachedNetworkImage(
imageUrl: "http://via.placeholder.com/350x150",
placeholder: (context, url) => new CircularProgressIndicator(),
errorWidget: (context, url, error) => new Icon(Icons.error),
),

On your Case

class OnlineImage extends StatefulWidget {
@override
_OnlineImageState createState() => _OnlineImageState();
} 
class _OnlineImageState extends State<OnlineImage> {
final imageList = [
'https://colorlinemapsapp.000webhostapp.com/wallpaper/DHA%20PESHAWAR%20UPDATE%20PLAN%20(%20A%20)-Model%20(1)_page-0001.jpg',
];
//images url
@override
Widget build(BuildContext context) {
return Scaffold(
backgroundColor: Colors.white,
appBar: AppBar(
backgroundColor: Colors.deepPurple,
title: Text("Hayatabad Master Plan"),
),
// add this body tag with container and photoview widget
body: Container(
child: Center(
child: Container(
height: 800,
child: Padding(
padding: const EdgeInsets.all(8.0),
child: Card(
elevation: 20,
child: Padding(
padding: const EdgeInsets.all(8.0),
child: PhotoViewGallery.builder(
itemCount: imageList.length,
builder: (context, index) {
return PhotoViewGalleryPageOptions(
basePosition: Alignment.center,
imageProvider:CachedNetworkImage(
imageUrl: imageList[index],
placeholder: (context, url) => new CircularProgressIndicator(),
errorWidget: (context, url, error) => new Icon(Icons.error),
),
minScale: PhotoViewComputedScale.contained * 0.8,
maxScale: PhotoViewComputedScale.covered * 5,
);
},
scrollPhysics: BouncingScrollPhysics(),
backgroundDecoration: BoxDecoration(
color: Theme.of(context).canvasColor,
),
),
),
),
),
),
),
),
);
}
} ```