本文中的本地图片都放在/assets中
插入本地图片
一. 使用Image组件
1
2
3
4
|
Image(
image: AssetImage('路径'),
width // 宽度
)
|
代码:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
|
import 'package:flutter/material.dart';
void main() {
runApp(MyApp());
}
class MyApp extends StatelessWidget {
@override
Widget build(BuildContext context) {
return MaterialApp(
title: 'home',
home: HomePage(),
);
}
}
class HomePage extends StatelessWidget {
@override
Widget build(BuildContext context) {
return Scaffold(
body: Padding(
padding: EdgeInsets.all(20),
child: Center(
child:Image(
image: AssetImage("images/1.png"),
width: 200.0
)
)
),
);
}
}
|
二. 也可以使用Image.asset构造函数
1
2
3
4
|
Image.asset(
'iamges/1.png',
width: 300
)
|
插入网络图片
一. 使用Image组件
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
|
import 'package:flutter/material.dart';
void main() {
runApp(MyApp());
}
class MyApp extends StatelessWidget {
@override
Widget build(BuildContext context) {
return MaterialApp(
title: 'home',
home: HomePage(),
);
}
}
class HomePage extends StatelessWidget {
@override
Widget build(BuildContext context) {
return Scaffold(
body: Padding(
padding: EdgeInsets.all(20),
child: Center(
child: Image(
image: NetworkImage('http://api.codequan.com/static/blogs/qDI9QtI5cj881dfLxaUjbRqVIUXpfLL7/images/1.gif'),
width: 300
),
)
),
);
}
}
|
二. 也可以使用构造函数Image.network()
1
2
3
4
|
Image.network(
'http://api.codequan.com/static/blogs/qDI9QtI5cj881dfLxaUjbRqVIUXpfLL7/images/1.gif',
width: 300,
)
|
网络图片渐出效果
网络图片加载可能需要一些时间,可以使transparent_image包实现渐出效果
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
|
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) {
return MaterialApp(
title: 'app',
home: Scaffold(
appBar: AppBar(
title: Text('app bar'),
),
body: Container(
child: FadeInImage.memoryNetwork(placeholder: kTransparentImage, image: 'http://api.codequan.com/static/blogs/7NB1D6Zco7J04HQHkbbBBf7t3q5RwDjB/images/01.png'),
),
),
);
}
}
|
网路图片设置占位符loading
cached_network_image包可以给网络图片设置占位符,在图片尚未下载完成时展示
下面这个案例使用的是CircularProgressIndicator作为占位符
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
|
import 'package:flutter/material.dart';
import 'package:cached_network_image/cached_network_image.dart';
void main() {
runApp(MyApp());
}
class MyApp extends StatelessWidget {
@override
Widget build(BuildContext context) {
return MaterialApp(
title: 'app',
home: Scaffold(
appBar: AppBar(
title: Text('app bar'),
),
body: Container(
height: 200,
child: Center(
child: CachedNetworkImage(
imageUrl:
'http://api.codequan.com/static/blogs/qDI9QtI5cj881dfLxaUjbRqVIUXpfLL7/images/1.gif',
placeholder: (context, url) => CircularProgressIndicator(),
)
)
),
),
);
}
}
|
也可以使用本地图片作为占位符
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
|
import 'package:flutter/material.dart';
import 'package:cached_network_image/cached_network_image.dart';
void main() {
runApp(MyApp());
}
class MyApp extends StatelessWidget {
@override
Widget build(BuildContext context) {
return MaterialApp(
title: 'app',
home: Scaffold(
appBar: AppBar(
title: Text('app bar'),
),
body: Container(
height: 200,
child: Center(
child: CachedNetworkImage(
imageUrl:
'http://api.codequan.com/static/blogs/qDI9QtI5cj881dfLxaUjbRqVIUXpfLL7/images/1.gif',
placeholder: (context, url) => Image.asset('../images/lake.jpg'),
)
)
),
),
);
}
}
|
这个占位符可以使用任何widget!cached_network_image包除了为网络图片设置占位符,还可以缓存下载的图片,便于应用程序脱机使用