如何导入和使用Flutter的资源文件?

    xiaoxiao2025-02-13  13

    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注册的格式不对,应和#对齐

     

     

    最新回复(0)