介绍

Flutter提供了两种设计风格: Material 风格、Cupertino风格。今天谈一下 Material Design 风格的内容，Material是一种移动端和网页端通用的视觉设计语言，Flutter 提供了丰富的 Material 风格的 widgets。Flutter 的 Material 组件（MDC - Flutter）通过在应用间和平台间提供一个统一的用户体验组件库，把设计和工程合二为一。

基础准备

第一步：导入我们的material package

import 'package:flutter/material.dart';

第二步：将APP的入口替换为一个MaterialApp

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

class App extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return new MaterialApp();
  }
}

使用Material组件

MaterialApp

一个MaterialApp一般包含如下两部分:

MaterialApp(
    title: 'Flutter',
    home: new Scaffold(
    ),
)

其中home是我们App中可以看见的元素部分。

Scaffold

Scaffold 是 Material library 中提供的一个 widget，它提供了默认的导航栏、标题和包含主屏幕 widget 树的 body 属性。widget 树可以很复杂。简单的例子如下：

Scaffold(
    appBar: new AppBar(
      ),
      body: const Center(
      ),
 ),

ElevatedButton

ElevatedButton是一个凸起的Material矩形按钮，可以使用提升的按钮为原本基本平坦的布局添加维度，例如在长列表中，或在广阔的空间中。避免在已经提升的内容（如对话框或卡片）上使用提升按钮。
使用例子：

ElevatedButton(
    style: style,
    onPressed: null,
    child: const Text('Disabled'),
 )

IconButton

IconButton是一个带图标的Material按钮，通过填充颜色对触摸做出反应。
如果onPressed回调为空，则该按钮将被禁用，并且不会对触摸做出反应。

IconButton(
   icon: const Icon(Icons.volume_up),
   tooltip: 'Increase volume by 10',
   onPressed: () {
   setState(() {
       _volume += 10;
   });
 },
),

这个有两个注意事项：

1. 按钮需要它的一个祖先是一个Material小部件。
2. 如果可能的话，图标按钮的点击区域大小至少为KminiInteractiveDimension像素。

ButtonBar

ButtonBar用来容纳一排末端对齐的按钮，如果没有足够的水平空间，则排列成一列。会将添加的按钮水平放置。子部件们在主轴从末端开始排成一行。（初次用的时候很惊喜）

ButtonBar(
    children: <Widget>[]
)

总结

Material的设计主要的特点是三端统一，另外方便的小组件也让写代码更愉快，试试吧。