Flutter 学习之 展示本地图片踩坑记录

首先：

踩坑一：

在project目录下，创建assetswen文件夹，在文件夹下面创建images文件夹，用于放置本地图片，可以再创建 @2x,@3x 两个文件夹用于适配。 拷贝所需的图片

踩坑二：

配置图片可以使用 就是在图示的pubspes.yaml 文件中，进行配置。此处需要注意的是

assets 需要与

uses-material-design: true左对齐

还有需要注意的地方就是 声明图片的时候，可以直接如图上所示：

- assets/images/

不用把每一个的名字都写进去，因为如果你那样的话，就会报错，说本来期待assets 是一个list ，但是你写的是几个string

而且那样也很麻烦 ，所以就这样写就OK了。

踩坑三：

在设置显示本地图片的时候，名字一定要写全路径。

记得带上assets 否则显示不出来。

贴出完整的代码，供小伙伴儿们 参考：

import 'package:flutter/material.dart';

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

// This widget is the root of your application.

class MyApp extends StatelessWidget{
  @override
  Widget build(BuildContext context) {
    // TODO: implement build
    return new MaterialApp(
      title: 'Welcome to Flutter',
      home: new SplashPage());
  }

}


 class SplashPage extends StatefulWidget {

  @override
  State createState() {
    // TODO: implement createState
    return new _SplashPageState();
  }

}


class _SplashPageState extends State {
  @override
  Widget build(BuildContext context) {
    // TODO: implement build
    return new Scaffold(
      appBar: new AppBar(
        
        title: new Text('加载本地的图片'),
          ),
      body: new Center(
        child: new Image.asset('assets/images/p2.png'),
        //child: Image.network('https://github.com/flutter/plugins/raw/master/packages/video_player/doc/demo_ipod.gif?raw=true'),
        
      ),
      
    );
  }

}