Flutter系列01: App Dashboard

这是Flutter Thursday系列的首篇文章。我们会在今后每周从互联网上寻找一些APP设计转换成Flutter UI。
假设读者已经了解Dart（Flutter应用开发语言）并设置了编译环境，所以不会再介绍Dart及Flutter的安装步聚，只会解释一些概念和相关问题。接下来我们将做一个简单的任务：一个移动APP的dashboard，如下图：

image.png

开启终端并创建一个新应用：

flutter create dashboard
cd dashboard

Flutter会自动生成一个有良好注释的主文件放在lib目录下（lib/main.dart）。删掉主程序文件内容并创建dashboard.dart在同目录下。增加main.dart内容如下：

import 'package:flutter/material.dart';
import 'package:dashboard/dashboard.dart';

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

class MyApp extends StatelessWidget {
  // This widget is the root of your application.
  @override
  Widget build(BuildContext context) {
    return new MaterialApp(
      title: 'Flutter Demo',
      theme: new ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: Dashboard(),
    );
  }
}

MyApp是应用根类。runApp()方法加载(inflates)MyApp组件并展示到屏幕。Flutter支持material设计，需要调用MaterialApp类。
Home定义了默认路由，本例中为：Dashboard()。
dashboard.dart文件内容如下：

import 'package:flutter/material.dart';

class Dashboard extends StatefulWidget {
  @override
  _DashboardState createState() => _DashboardState();
}

class _DashboardState extends State<Dashboard> {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text("Awesome Dashboard is coming!"),
      ),
    );
  }
}

接着对AppBar提升至0.1，改变标题文本及背景色：

appBar: AppBar(
        title: Text("INDHOLD"),
        elevation: .1,
        backgroundColor: Color.fromRGBO(49, 87, 110, 1.0),
),

接着编写一个grid显示dashboard项。增加body组件，设置为Container，设置padding并加入GridView.count做为子组件。代码如下：

      body: Container(
        padding: EdgeInsets.symmetric(vertical: 20.0, horizontal: 8.0),
        child: GridView.count(
          crossAxisCount: 2,
          padding: EdgeInsets.all(3.0),
          children: <Widget>[],
        ),
      ),

设置container外间距横纵分别为20像素和8像素。使用crossAxisCount:2定义两列grid，GridView子组件为children——children:<Widget>[]。接下来创建一个函数返回Card组件的自定义项，命名为makeDashboardItem(String title,IconData icon)，名含title和icon两个参数，这会展示在dashboard的项目中

Card makeDashboardItem(String title, IconData icon) {
    return Card(
        elevation: 1.0,
        margin: new EdgeInsets.all(8.0),
        child: Container(
    
        ));
  }

Card设置elevation和margins，并增加Container的子组件，以下为Card组件内容：

Card makeDashboardItem(String title, IconData icon) {
    return Card(
        elevation: 1.0,
        margin: new EdgeInsets.all(8.0),
        child: Container(
          decoration: BoxDecoration(color: Color.fromRGBO(220, 220, 220, 1.0)),
          child: new InkWell(
            onTap: () {},
            child: Column(
              crossAxisAlignment: CrossAxisAlignment.stretch,
              mainAxisSize: MainAxisSize.min,
              verticalDirection: VerticalDirection.down,
              children: <Widget>[
                SizedBox(height: 50.0),
                Center(
                    child: Icon(
                  icon,
                  size: 40.0,
                  color: Colors.black,
                )),
                SizedBox(height: 20.0),
                new Center(
                  child: new Text(title,
                      style:
                          new TextStyle(fontSize: 18.0, color: Colors.black)),
                )
              ],
            ),
          ),
        ));
  }

在container容器中，使用BoxDecoration(color:Color.fromRGBO(220,200,200,1.0))设置颜色。container容器需要一个子组件，在这里使用InkWell组件，这样可以对每一个项目进行触控事件响应。在InkWell组件中定义子组件Column，显示children:两个包含图标和文本Center组件；两个SizedBox对其进行垂直分割。
使用makeDashboardItem函数填充GridView.count的子组件列表

      body: Container(
        padding: EdgeInsets.symmetric(vertical: 20.0, horizontal: 2.0),
        child: GridView.count(
          crossAxisCount: 2,
          padding: EdgeInsets.all(3.0),
          children: <Widget>[
            makeDashboardItem("Ordbog", Icons.book),
            makeDashboardItem("Alphabet", Icons.alarm),
            makeDashboardItem("Alphabet", Icons.alarm),
            makeDashboardItem("Alphabet", Icons.alarm),
            makeDashboardItem("Alphabet", Icons.alarm),
            makeDashboardItem("Alphabet", Icons.alarm)
          ],
        ),
      ),

运行app显示以下内容：

image.png

原文地址(需翻墙)