Flutter加载图片躺坑记录

加载本地图片步骤

1、在根目录下建立文件夹,也可以建在其它目录下,官方建议命名为images

2.在pubspec.yaml文件中声明本地图片, 每一个使用的本地图片都需要在yaml文件中声明

  # To add assets to your application, add an assets section, like this:
  # assets:
  #  - images/a_dot_burr.jpeg
  #  - images/a_dot_ham.jpeg
 # An image asset can refer to one or more resolution-specific "variants", see
  # https://flutter.dev/assets-and-images/#resolution-aware.

  # For details regarding adding assets from package dependencies, see
  # https://flutter.dev/assets-and-images/#from-packages

在使用的时候我们可以把官方的注释打开,按照格式申明我们自己的图片路径:

  assets:
    - images/girl.jpeg

然后进行编译的时候,会有以下错误提示:

Error detected in pubspec.yaml:
Error on line 44, column 4: Expected a key while parsing a block mapping.
   ╷
44 │    assets:
   │    ^
   ╵
Please correct the pubspec.yaml file at /Users/CodingSnail/Documents/workspace/FlutterSpace/custom_widget/pubspec.yaml
Process finished with exit code 1

\color{red}{官方的坑:}原因是assets前面有一个空格,assets需要与上面的uses-material-design对齐,把它对齐重新编译就好了。

3.在代码中执行加载本地图片,示例:

import 'package:flutter/material.dart';

void main() => runApp(MyApp());

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
          appBar: AppBar(
            title: Text('加载本地图片示例'),
          ),
          body: Column(
            children: <Widget>[
              Image.asset(
                'images/girl.jpeg',
              ),
            ],
          )),
    );
  }
}

结果展示如下:

WechatIMG1196 (1).png

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。