本文目的
在Flutter中加载本地图片和网络图片
效果图
image
1. 加载本地图片
-
将图片放在工程目录下,如images目录
image - 修改pubspec.yaml,在flutter节点下增加如下信息:
assets:
- images/
image
- 显示本地图片
new Image.asset(
'images/baduanjin_2.webp',
)
2. 加载网络图片
Image.network(
'https://upload-images.jianshu.io/upload_images/7439651-d5e585fa4baa1e5f.gif?imageMogr2/auto-orient/strip|imageView2/2/w/298/format/webp',
)
主要代码
import 'package:flutter/material.dart';
void main() => runApp(MyApp());
class MyApp extends StatelessWidget {
@override
Widget build(BuildContext context) {
return MaterialApp(
title: 'Flutter Demo',
theme: ThemeData(
primarySwatch: Colors.blue,
),
home: MyHomePage(title: 'Flutter Demo Home Page'),
);
}
}
class MyHomePage extends StatefulWidget {
MyHomePage({Key key, this.title}) : super(key: key);
final String title;
@override
_MyHomePageState createState() => _MyHomePageState();
}
class _MyHomePageState extends State<MyHomePage> {
@override
Widget build(BuildContext context) {
return new Scaffold(
appBar: new AppBar(
title: new Text('加载图片demo'),
),
body: new ListView(
children: <Widget>[
Container(
margin: EdgeInsets.only(top: 12.0),
child: Column(
children: <Widget>[
Text('1.加载网络图片'),
Image.network(
'https://upload-images.jianshu.io/upload_images/7439651-d5e585fa4baa1e5f.gif?imageMogr2/auto-orient/strip|imageView2/2/w/298/format/webp',
),
],
),
),
Container(
margin: EdgeInsets.only(top: 12.0),
child: Column(
children: <Widget>[
Text('2.加载本地图片'),
new Image.asset(
'images/baduanjin_2.webp',
),
],
),
),
],
),
);
}
}
