1、
Flutter资源文件里有常用的图片以及字体文件,最常用的就是图片了。
2、
在pubspec.yaml文件中的assets节点下配置资源的路径,包括缩略符
3、创建一个文件夹,并导入图片
4、
配置图片资源
5、
创建res_page.dart文件
6、
使用图片
7、
运行结果:图片正确加载
8、
import 'package:flutter/material.dart'; import 'package:flutter_color_plugin/flutter_color_plugin.dart'; void main() => runApp(ResPage()); class ResPage extends StatefulWidget { @override _ResPageState createState() => _ResPageState(); } class _ResPageState extends State<ResPage> { int _counter = 0; void _incrementCounter() { setState(() { _counter++; }); } @override Widget build(BuildContext context) { return Scaffold( appBar: AppBar( title: Text('如何导入和使用Flutter的资源文件?'), leading:GestureDetector( onTap: (){ Navigator.pop(context); }, child: Icon(Icons.arrow_back), ) ), body: Center( child: Column( mainAxisAlignment: MainAxisAlignment.center, children: <Widget>[ Image( width: 400, height:400, image: AssetImage('images/egle.png'), ) ], ), ), floatingActionButton: FloatingActionButton( onPressed: _incrementCounter, tooltip: 'Increment', child: Icon(Icons.add), ), // This trailing comma makes auto-formatting nicer for build methods. ); } }
注:出现的问题:
1、
Error on line 45, column 4: Expected a key while parsing a block mapping.
原因:assets注册的格式不对,应和#对齐