使用Image.network()
直接在network()添加图片的网络地址URL。
import 'package:flutter/material.dart';
void main(){
runApp(HomaPage());
}
class HomaPage extends StatelessWidget{
@override
Widget build(BuildContext context) {
return MaterialApp(
home: Scaffold(
appBar: AppBar(
title: const Text(
"Image"
),
),
body: Image.network("https://alifei03.cfp.cn/creative/vcg/800/new/VCG211147957933.jpg"),
),
);
}
}
显示效果如下:
使用本地资源Image.asset()
首先在项目的根目录创建一个文件夹assets, 然后可以把包含图片的文件夹复制到该目录下,也可以直接把图片放到该文件里面。
然后在pubspec.yaml文件添加对资源的引用,找到如下图所示内容取消注释,然后根据自己的图片的存放方式写下路径。两种写法,一种是写下所有图片的完整路径,一种是只写包含图片的文件夹。
# To add assets to your application, add an assets section, like this:
assets:
- assets/images/p1.jpg
- assets/images/p2.jpg
- assets/images/p3.jpg
# To add assets to your application, add an assets section, like this:
assets:
- assets/images/
该文件更新后,记得点击上边的pub get
然后在代码里面引用图片即可
import 'package:flutter/material.dart';
void main(){
runApp(HomaPage());
}
class HomaPage extends StatelessWidget{
@override
Widget build(BuildContext context) {
return MaterialApp(
home: Scaffold(
appBar: AppBar(
title: const Text(
"Image"
),
),
body: Image.asset("assets/images/p3.jpg"),
),
);
}
}
显示效果如下
其它方式
未完待续