花了一個晚上搞本地圖片，但是跟官網寫的一模一樣，卻怎麼也顯示不了，這裡記錄一下。

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

謝謝觀看。