1.Image
Flutter 中的图片控件是 Image ,支持下面几种类型的构造函数:
new Image 从ImageProvider获取图片
new Image.asset 使用key从AssetBundle获取图片
new Image.network 从网络获取图片
new Image.file 本地文件获取图片
new Image.memory 从Uint8List获取图片
支持的图片类型:JPEG, PNG, GIF, Animated GIF, WebP, Animated WebP, BMP, WBMP
2.加载网络图片
class MyApp extends StatelessWidget {
const MyApp({Key? key}) : super(key: key);
@override
Widget build(BuildContext context) {
return MaterialApp(
title: 'Flutter Demo',
theme: ThemeData(
primarySwatch: Colors.blue,
),
home: Image.network('http://www.devio.org/img/avatar.png'),
);
}
}
3.加载静态图片
在 pubspec.yaml 文件中声明图片资源路径;
使用 AssetImage 加载该图片;
首先把图片放到指定目录下面,assets文件夹要在根目录下:
然后在 pubspec.yaml 文件中指定目录:
flutter:
uses-material-design: true
assets:
- assets/images/my_icon.jpg
最后代码中添加:
class MyApp extends StatelessWidget {
const MyApp({Key? key}) : super(key: key);
@override
Widget build(BuildContext context) {
return MaterialApp(
title: 'Flutter Demo',
theme: ThemeData(
primarySwatch: Colors.blue,
),
home: Image(height: 100,width: 100,
image: AssetImage('assets/images/my_icon.jpg'),),
);
}
}
另一种方法通过 Image.asset 加载:
home: Image.asset('assets/images/my_icon.jpg',width: 100,height: 100)
4.加载本地图片
加载手机中的图片
Image.file(File('/storage/emulated/0/Download/test.jpg')
,width: 100,height: 100)
加载手机中的图片,有一些别的问题,添加权限获取授权,然后再进行显示图片,这里代码较多,所以写到另一篇文章中,下面链接文章最后有完整代码:
https://blog.csdn.net/wuqingsen1/article/details/121061597
5.设置 Placeholder
transparent_image 插件加载图片,可以显示进度条,逐渐透明显示出来加载的图片:
pubspec.yaml 添加:
transparent_image: ^2.0.0
添加包:
import 'package:transparent_image/transparent_image.dart';
添加代码:
class MyApp extends StatelessWidget {
const MyApp({Key? key}) : super(key: key);
@override
Widget build(BuildContext context) {
return MaterialApp(
title: 'Flutter Demo',
theme: ThemeData(
primarySwatch: Colors.blue,
),
home: Stack(
children: [
//进度条
Center(child: CircularProgressIndicator(),),
Center(
//网络加载时渐变出现
child: FadeInImage.memoryNetwork(
// Placeholder
placeholder: kTransparentImage,
image: "https://www.devio.org/img/avatar.png",
),
)
],
),
);
}
}
加载本地资源图片,先显示我们的gif进度条,然后再显示加载成功的图片:
@override
Widget build(BuildContext context) {
return MaterialApp(
title: 'Flutter Demo',
theme: ThemeData(
primarySwatch: Colors.blue,
),
home: Stack(
children: [
// 进度条
Center(
// 网络加载时渐变出现
child: FadeInImage.assetNetwork(
// Placeholder
placeholder: 'assets/images/my_icon.gif',
image: "https://www.devio.org/img/avatar.png",
),
)
],
),
);
}
6.配置图片缓存
利用 cached_network_image 插件加载网络图片,缓存到本地:
pubspec.yaml 添加:
cached_network_image: ^2.0.0-rc
添加包:
import 'package:cached_network_image/cached_network_image.dart';
添加代码:
home: Scaffold(
appBar: AppBar(
title: Text('title'),
),
body: Center(
child: CachedNetworkImage(
// Placeholder
placeholder: (context, url) => CircularProgressIndicator(),
imageUrl: "https://www.devio.org/img/avatar.png",
errorWidget: (context, url, error) => new Icon(Icons.error),
),
),
)
7.加载 Icon
使用 Flutter 内置的 material_fonts :
@override
Widget build(BuildContext context) {
return MaterialApp(
title: 'Flutter Demo',
theme: ThemeData(
primarySwatch: Colors.blue,
),
home: Scaffold(
appBar: AppBar(
title: Text('title'),
),
body: Center(
child: new Icon(Icons.android,size:100),
),
),
);
}