1.Widge组件分类
在flutter中，所有UI元素都是widget组件，除了我们常见的button，Image这些可见元素，布局也是组件，甚至文本格式控制也是组件。这里我们先简单讲解一下我们通常概念的上的UI控件。在flutter中组件有两种：有状态组件和无状态组件。
- 无状态组件（stateless widget），无状态组件不提供可变状态维护，无状态组件仅根据其属性来渲染，
- 有状态组件（stateful Widget）,组件自己维护状态，组件渲染由SetState方法调用，更具state的变化差异来更新渲染。所有的stateful widget都是建立在stateless widget上的。
这里我们先讲解stateless widget, flutter中的stateless widget主要分为这几类： - Visual Base Elemet, 可视基础元素比如：Text，Image, Icon
- Layout: 布局元素，flutter比较特别一点，它把布局也作为页面元素，这样做的主要目的是可以简化布局计算。以前UI做Layout通常通过Layout引擎根据预定的约束来进行计算, 计算过程实际上是做多元方程式求解，元素越多求解计算就越慢，参考：从 Auto Layout 的布局算法谈性能
。而flutter将layout也作为页面元素，使得布局在局部范围就可以求解。Layout元素有：Row，Column，Center，Align，Padding等 -
Painting and Effect Widgets& Animation and Motion
，绘制和效果组件。绘制和效果组件主要是负责可视元素的装饰效果，比如实现边框（DecoratedBox）,实现半透明（Opacity），位移旋转变换（Transform），Animation and Motion是比较特殊的效果组件，用于实现动画效果 - Container&compound element 大多数我们常用的各种控件都是由基础元素和布局组合而成的，比如button由Text，Image，DecoratedBox等元素组成
- Interaction Model Widgets, 这个是专门处理事件响应的组件，用于响应用户的操作
2.让我们来创建Hello World
首先我们先来写一个最基本的flutter应用吧。
1.在适当的目录执行：
flutter init -o my_hello_world_app
2.替换my_hello_world_app/lib/main.dart文件中的内容：
import 'package:flutter/material.dart';
void main() => runApp(new Center(child: new Text('Hello, world!')));
3.在my_hello_world_app目录下执行：
flutter start
4.你将会在手机上看到：
如果你能一切顺利的来到这里，那么恭喜你，你已经成功使用flutter开发了一个android的应用，虽然这个应用看上去比较单一。
main方法是这个应用的入口，要运行一个应用的话需要使用runApp方法，它接收一个Widget控件作为参数，并且把这个控件作为控件树的根节点。在我们这个例子里，控件树里有两个控件，Center控件和它的子节点Text。通常情况下框架会强制将根控件充满整个屏幕，所以相对的Text控件就以屏幕为中心了。
重要概念：
在编写flutter应用的时候，通常情况下需要自定义组件，这些组件继承自StatelessComponent或StatefulComponent,选择要继承哪一个取决于这个组件是否需要管理状态和配置。一个组件的主要工作就是实现build方法，这个方法用来反应该组件在其他组件中的表现形式。最后底层框架会统一从上到下调用build方法直至渲染树的最底层。
基本控件
flutter提供了一套完备的基本控件，最常用的有如下几个：
- Text ：Text提供了一个用来显示文本的一次性控件（即无状态）。
- Row, Column：这两个控件用来显示水平或垂直方向上的多个组件，并且是可伸缩的。
- Stack：可以将多个组件以一定的顺序排列，可以使用
Positioned控件来指定组件在Stack中的顺序。 - Container: 是一个可视化的矩形控件，它可以使用
BoxDecoration来进行外观装饰，装饰内容可以是背景，边框和阴影等。Container也有外边距，内边距等属性，也可以约束自身的大小，另外值得一提的是Container还可以利用矩阵在三维控件内做转换。
下面结合一些基本的控件来自定义我们的组件并构建应用：
修改main.dart代码如下
import 'package:flutter/material.dart';
class MyToolBar extends StatelessComponent { //（3）
MyToolBar({ this.title });
final Widget title; //（6）
Widget build(BuildContext context) {
return new Container(
height: 56.0,
padding: const EdgeDims.symmetric(horizontal: 8.0),
decoration: new BoxDecoration(
backgroundColor: Colors.blue[500]
),
child: new Row([
new IconButton(icon: 'navigation/menu'),
new Flexible(child: title),
new IconButton(icon: 'action/search'),
])
);
}
}
class MyScaffold extends StatelessComponent { //（4）
Widget build(BuildContext context) {
return new Material(
child: new Column([
new MyToolBar(
title: new Text('Example title', style: Typography.white.title)
),
new Flexible(
child: new Center(
child: new Text('Hello, world!')
)
)
])
);
}
}
void main() {
runApp(new MaterialApp( //(1)
title: 'My app',
routes: <String, RouteBuilder>{ //（2）
'/': (RouteArguments args) => new MyScaffold() //（5）
}
));
}
同时确保flutter.yaml文件内容如下：
name: my_app
material-design-icons:
- name: action/search
- name: navigation/menu
我们先来运行一下这个应用：
恭喜你，顺利存活。
代码解释如下：
- （1）处的
MaterialApp是整个应用的主题控件，一般我们自定义的组件要写在它里面才会有Material的主题风格 - （2）处的
routes的作用是页面导航作用，/表示应用打开的第一个页面。 - （3）处的
MyToolBar是我们自定义的一个无状态组件，通过build方法，我们可以看出其最外层是一个Container控件，控件高为56dp,左右内边距8dp，它由一个BoxDecoration做修饰，修饰内容是将背景颜色改为Colors.blue[500]这种颜色。Container的内部是一个Row，Row的两端分别是一个图标按钮，中间是另一个控件Flexible，它的作用是填充掉Row的剩余部分。在Flexible中传入的是title这个内部字段。 - （4）处的
MyScaffold组件将其子节点用垂直的方式组织起来，在Column的第一个位置是我们自定义的MyToolBar，在构造MyToolBar的时候将一个Text控件作为它的命名可选参数title的值传递进去。在Column的第二个位置是一个Flexible用来填充剩余的空间，在Flexible里面放置了一个Center组件，Center组件里则是一个Text用来显示“Hello，World”。 - （5）处表示这个应用的第一个见面就是
MyScaffold。
这种flutter这种层层包裹的感觉就是前面提到的组件外构建UI一小部分含义，眼尖的同学可能已经看到（6）处的title使用的是final修饰符，这里要说明一下继承自StatelessComponent的组件，如内部有配置，属性或状态的统一需要使用final修饰符，表示这个组件本身自己是无状态的，需要依赖它外部的其他组件。这也是'组件外构建UI'最重要的含义所在。
Material应用
上面那个应用我们使用自己的组件进行应用开发，发现应用整体美观度不高。是因为flutter中应用界面会撑满整个屏幕，所以有一部分内容可能会被状态栏挡住。其实flutter提供了一系列的控件供开发人员开发Material风格的应用，这之中就有MaterialApp，Scaffold，ToolBar和FloatingActionButton等。下面看一个使用了这些控件的例子：
修改main.dart内容如下：
import 'package:flutter/material.dart';
void main() {
runApp(new MaterialApp(
title: 'Flutter Tutorial',
routes: {'/': (RouteArguments args) => new TutorialHome()}));
}
class TutorialHome extends StatelessComponent {
Widget build(BuildContext context) {
return new Scaffold(
toolBar: new ToolBar(
left: new IconButton(icon: 'navigation/menu'),
center: new Text('Example title'),
right: [new IconButton(icon: 'action/search')]),
body: new Center(child: new Text('Hello, world!')),
floatingActionButton:
new FloatingActionButton(child: new Icon(icon: 'content/add')));
}
}
修改flutter.yaml文件内容如下：
name: my_app
material-design-icons:
- name: action/search
- name: content/add
- name: navigation/menu
运行结果如下：
现在我们的应用看起来是不是更像是一个Material Design的应用了？我们使用的Scaffold和ToolBar让ToolBar自带了阴影并且字体风格有有了调整。另外还加上了FloatingActionButton。
总结
本文主要讲解flutter中的组件分类，对如何创建简单Stateless组件进行了演示
