Flutter 用本地图片（例如android 中的drawble--mipmap）

版权声明：本文为博主原创文章，未经博主允许不得转载。 https://blog.csdn.net/qq_24531461/article/details/85529861

花了一个晚上搞本地图片，但是跟官网写的一模一样，却怎么也显示不了，这里记录一下。

1、在项目里，与pubspec.yaml在同一级建一个文件夹，例如我的叫images

然后将你的图片拷进images文件夹里

2、在pubspec.yaml中显示引入图片（有坑）

参考官网：https://flutter.io/docs/development/ui/assets-and-images#resolution-aware

https://flutter.io/docs/get-started/flutter-for/android-devs

摘取：

Project structure & resources
Where do I store my resolution-dependent image files?
While Android treats resources and assets as distinct items, Flutter apps have only assets. All resources that would live in the res/drawable-* folders on Android, are placed in an assets folder for Flutter.

Flutter follows a simple density-based format like iOS. Assets might be 1.0x, 2.0x, 3.0x, or any other multiplier. Flutter doesn’t have dps but there are logical pixels, which are basically the same as device-independent pixels. The so-called devicePixelRatio expresses the ratio of physical pixels in a single logical pixel.

The equivalent to Android’s density buckets are:

Android density qualifier	Flutter pixel ratio
ldpi	0.75x
mdpi	1.0x
hdpi	1.5x
xhdpi	2.0x
xxhdpi	3.0x
xxxhdpi	4.0x
Assets are located in any arbitrary folder—Flutter has no predefined folder structure. You declare the assets (with location) in the pubspec.yaml file, and Flutter picks them up.

Note that before Flutter 1.0 beta 2, assets defined in Flutter were not accessible from the native side, and vice versa, native assets and resources weren’t available to Flutter, as they lived in separate folders.

As of Flutter beta 2, assets are stored in the native asset folder, and are accessed on the native side using Android’s AssetManager:

val flutterAssetStream = assetManager.open("flutter_assets/assets/my_flutter_asset.png")
As of Flutter beta 2, Flutter still cannot access native resources, nor it can access native assets.

To add a new image asset called my_icon.png to our Flutter project, for example, and deciding that it should live in a folder we arbitrarily called images, you would put the base image (1.0x) in the images folder, and all the other variants in sub-folders called with the appropriate ratio multiplier:

images/my_icon.png       // Base: 1.0x image
images/2.0x/my_icon.png  // 2.0x image
images/3.0x/my_icon.png  // 3.0x image
Next, you’ll need to declare these images in your pubspec.yaml file:

assets:
 - images/my_icon.jpeg
You can then access your images using AssetImage:

return AssetImage("images/a_dot_burr.jpeg");
or directly in an Image widget:

@override
Widget build(BuildContext context) {
  return Image.asset("images/my_image.png");
}

在这里笔者跟着官网做了一晚上 ，一直引用不了本地图片，网上资料也很少，早上起来偶然间引用起来了。一定要注意 - 前面有5个空格，后面有一个空格，然后写上路径，这样就显示把图片加入进来了。

3、新建一个dart文件，我们来用一下这个图片吧

import 'package:flutter/material.dart';

void main() => runApp(MaterialApp(home: MyImage()));

class MyImage extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    // TODO: implement build
    return MaterialApp(
        title: 'Listview Flutter Demo',
        home: Scaffold(
          appBar: new AppBar(
            title: new Text('ListView Widget'),
          ),
          body: Image.asset("images/wxm1.jpg")
        ));
  }
}

4、观察结果

run

谢谢观看。