效果图一:
由于是网络图片,加载速度由网速决定,所以先显示进度条圈圈
效果图二:
加载完毕后,淡入淡出的显示图片,不是一下子显示的哟!
导入依赖:
transparent_image: ^1.0.0
代码+注释:
import 'package:chapter02one/Api.dart';
import 'package:flutter/material.dart';
import 'package:transparent_image/transparent_image.dart';
void main() {
runApp(new MyApp());
}
class MyApp extends StatelessWidget {
@override
Widget build(BuildContext context) {
final title = 'Fade in images';
return new MaterialApp(
title: title,
home: new Scaffold(
appBar: new AppBar(
title: new Text(title),
),
body: new Stack(
children: <Widget>[
new Center(child: new CircularProgressIndicator()),
new Center(
/**
* FadeInImage.memoryNetwork
* 正在加载时,会显示加载进度条
* 加载完毕后,会慢慢淡入淡出的显示图片
*/
child: new FadeInImage.memoryNetwork(
placeholder: kTransparentImage,
image:
'${Api.URL}/aa.png',
),
),
],
),
),
);
}
}
喜欢记得点个赞哟,我是王睿,很高兴认识大家!
更多原理请参考谷歌官网:
用占位符淡入图片