Flutter 制作官网上的那个APP

参考
意思就是将每个版块拆分开来,每个版块又分为行和列去组成,最后将这些版块都合并起来就是个完整的界面了

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是最该应用最基本的,在这个widget进行嵌套

    Widget titleSection = new Container(//左图中的第二个红框部分
      padding: const EdgeInsets.all(32.0),//这个是该容器进行设置边距
      child: new Row(//首先是行,看行有哪些控件
        children: [//开始写控件
          new Expanded(//放大,相当于设置宽度为0,倍数为1,后面的控件就去到最后面了
            child: new Column(//首先行的第一个元素是用列布置的
              crossAxisAlignment: CrossAxisAlignment.start, //子项左对齐
              children: [//这个就是行的第一个元素中嵌套的元素
                new Container(//第一个元素当作是一个容器,然后设置边距
                  padding: const EdgeInsets.only(bottom: 8.0), //底部添加8像素填充
                  child: new Text(//第一个元素
                    'Oeschinen Lake Campground',
                    style: new TextStyle(
                      fontWeight: FontWeight.bold,
                    ),
                  ),
                ),
                new Text(//第二个元素
                  'Kandersteg, Switzerland',
                  style: new TextStyle(
                    color: Colors.grey[500],
                  ),
                ),
              ],
            ),
          ),
          new Icon(//行的第二个元素
            Icons.star,//给个图标
            color: Colors.red[500],//图标上色
          ),
          new Text('41'),//行的第三个元素
        ],
      ),
    );

    Column buildButtonColumn(IconData icon, String label) {//嵌套函数：把共同的属性写好，方便buttonSection调用
      Color color = Theme.of(context).primaryColor;//设置主题颜色

      return new Column(//调用该方法后返回这个显示,每个元素以列的方式显示
        mainAxisSize: MainAxisSize.min,
        mainAxisAlignment: MainAxisAlignment.center,
        children: [//有两个元素
          new Icon(icon, color: color),//图标
          new Container(//将文字设置为容器,设置边距
            margin: const EdgeInsets.only(top: 8.0),//文字距离上面图标的距离
            child: new Text(//元素就是一个文字
              label,
              style: new TextStyle(//设置文字风格
                fontSize: 12.0,
                fontWeight: FontWeight.w400,
                color: color,
              ),
            ),
          )
        ],
      );
    }

    Widget buttonSection = new Container(//左图中的第三个红框部分
      child: new Row(//先从行上开始进行分析
        mainAxisAlignment: MainAxisAlignment.spaceEvenly, //平均的分配每个列占据的行空间
        children: [//行上了三个元素
          buildButtonColumn(Icons.call, 'CALL'),//调用方法,不然要写很多
          buildButtonColumn(Icons.near_me, 'ROUTE'),
          buildButtonColumn(Icons.share, 'SHARE'),
        ],
      ),
    );

    Widget textSection = new Container(//左图中的第四个红框部分
      padding: const EdgeInsets.all(32), //每条边添加32像素
      child: new 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 new MaterialApp(//必须写在后面,这个是显示全部界面的
      title: 'Flutter Demo',
      theme: new ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: new Scaffold(
        appBar: new AppBar(//状态栏
          title: new Text('mcl'),
        ),
        body: new ListView(//整个界面,一个图片和三个部分用ListView显示
          children: [    //进行组合，把前面写的合在一起
            new Image.asset(
              'images/base_widgets/[e-mail]',
              width: 600.0,
              height: 240.0,
              fit: BoxFit.cover,
            ),
            titleSection,
            buttonSection,
            textSection,
          ],
        ),
      ),
    );
  }
}