Flutter从入门到放弃-图片显示

上一篇的Flutter从入门到放弃-细节坑自己之一文件编码格式中没有说到如何使用图片，所以这篇大致写一下。

依旧是按照官方例子：Layout tutorial，官方的图片地址为：https://raw.githubusercontent.com/flutter/website/master/examples/layout/lakes/step5/images/lake.jpg

其实用自己随便一张图片都得。

首先先上总结：

1.在项目根目录创建images文件夹，将需要使用到的图片放进去

2.在pubspec.yaml的flutter节点下添加

    assets:

      -图片.jpg

3.在需要的地方引用图片  'images/图片名.jpg'

注：使用网络图片不需要以上操作，只需要在需要显示图片的地方使用

Image.network方法

然后是具体教程：需要在项目根目录创建保存图片的images文件夹，将图片放进去：

然后在

pubspec.yaml

文件的flutter:下添加assets节点，并加上  -图片路径，如下图：

最后，在main.dart中引用即可：

 body:  ListView(
          children: [
            Image.asset(
                'images/dog.jpg',
                width: 600,
                height: 240,
                fit: BoxFit.cover,
            ),
            titleSection,
            buttonSection,
            textSection,
          ],

最后附上完整的main.dart源码：

import 'package:flutter/material.dart';
void main() => runApp(MyApp());

class MyApp extends StatelessWidget {
  // This widget is the root of your application.
  @override
  Widget build(BuildContext context) {
    //标题组
    Widget titleSection = Container(
      padding: const EdgeInsets.all(32),
      child: Row(
        children: [
          Expanded(
            /*1*/
            child: Column(
              crossAxisAlignment: CrossAxisAlignment.start,
              children: [
                /*2*/
                Container(
                  padding: const EdgeInsets.only(bottom: 8),
                  child: Text(
                    'Oeschinen Lake Campground',
                    style: TextStyle(
                      fontWeight: FontWeight.bold,
                    ),
                  ),
                ),
                Text(
                  'Kandersteg, Switzerland',
                  style: TextStyle(
                    color: Colors.grey[500],
                  ),
                ),
              ],
            ),
          ),
          /*3*/
          Icon(
            Icons.star,
            color: Colors.red[500],
          ),
          Text('41'),
        ],
      ),
    );

    //按钮组
    Color color = Theme.of(context).primaryColor;
    Widget buttonSection =  Container(
      child:  Row(
        mainAxisAlignment: MainAxisAlignment.spaceEvenly,
        children: [
          _buildButtonColumn(color,Icons.call, 'CALL'),
          _buildButtonColumn(color,Icons.near_me, 'ROUTE'),
          _buildButtonColumn(color,Icons.share, 'SHARE'),
        ],
      ),
    );
    //文本部分
    Widget textSection =  Container(
      padding: const EdgeInsets.all(32.0),
      child:  Text(
        'Lake Oeschinen lies at the foot of the Blüemlisalp in the Bernese '
            'Alps. Situated 1,578 meters above sea level, it is one of the '
            'larger Alpine Lakes. A gondola ride from Kandersteg, followed by a '
            'half-hour walk through pastures and pine forest, leads you to the '
            'lake, which warms to 20 degrees Celsius in the summer. Activities '
            'enjoyed here include rowing, and riding the summer toboggan run.',
        softWrap: true,
      ),
    );
    return  MaterialApp(
      title: 'Flutter Layout Demo',
      theme:  ThemeData(
        primaryColor: Colors.blue,
      ),
      home: Scaffold(
        appBar: AppBar(
          title: Text('Flutter Demo'),
        ),
        body:  ListView(
          children: [
            Image.asset(
                'images/dog.jpg',
                width: 600,
                height: 240,
                fit: BoxFit.cover,
            ),
            titleSection,
            buttonSection,
            textSection,
          ],
        ),
      ),
    );
  }


  Column _buildButtonColumn(Color color,IconData icon, String label) {
    return  Column(
      mainAxisSize: MainAxisSize.min,
      mainAxisAlignment: MainAxisAlignment.center,
      children: [
         Icon(icon, color: color,),
         Container(
          margin: const EdgeInsets.only(top: 8.0),
          child:  Text(
            label,
            style:  TextStyle(
              fontSize: 12.0,
              fontWeight: FontWeight.w400,
              color: color,
            ),
          ),
        ),
      ],
    );
  }
}