本文的目的在于：介绍快速入门Flutter的知识，学习本篇后你能更好的理解Flutter的框架结构。打好基础后，你可以选择把本文介绍到的每一项更深入的学习，以便完成更加复杂的功能。本文会以知识点加例子的方式来展开。本文将flutter的widget称为控件。
你将学到
1.常用控件的使用和介绍
2.常用添加手势的方法
3.根据用户操作动态改变控件状态
4.控件的一些简单生命周期事件
项目开篇介绍
一个Flutter项目从main函数中的runApp调用开始。在ranApp函数中所接收的控件会成为整个屏幕的根控件，并覆盖在整个屏幕。（可以将这个控件理解成iOS中的rootViewController或android中在manifest文件中配置的mainActivity的界面）。而其他的控件（widget）都是在这个根控件上添加的。
举个例子：在屏幕上显示一句hello world的代码：
这样一个效果的代码：
import 'package:flutter/material.dart';
void main() {
runApp( // 接收的是根的widget
new Center( //根的widget，Center可以在屏幕中心显示控件
child: new Text(
'Hello, world!',
textDirection: TextDirection.ltr,
),
),
);
}
常用的控件
Text：该 widget 可让创建一个带格式的文本。Row、Column： 这些具有弹性空间的布局类Widget可让您在水平（Row）和垂直（Column）方向上创建灵活的布局。Stack： 取代线性布局 (译者语：和Android中的LinearLayout相似)，Stack允许子 widget 堆叠， 你可以使用Positioned来定位他们相对于Stack的上下左右四条边的位置。Stacks是基于Web开发中的绝度定位（absolute positioning )布局模型设计的。Container：Container可让您创建矩形视觉元素。container 可以装饰为一个BoxDecoration, 如 background、一个边框、或者一个阴影。Container也可以具有边距（margins）、填充(padding)和应用于其大小的约束(constraints)。另外，Container可以使用矩阵在三维空间中对其进行变换。
举例，使用简单控件自定义一个AppBar：
分析：
- 用container来作为appbar的矩形框，设置了height（高度），padding（内边距），decoration（背景）等属性。在矩形内部添加了横向控件Row，分别添加了IconButton、Expanded和另一个IconButton分别代表左侧的图标、中间的标题和右边的图标。
- 这里定义了一个title属性，它在Expanded中被使用。title的值由外部通过参数传入。这里告诉我们，widget可以被当作参数传递。
原文链接
更多教程
使用 Material 组件
虽然我们可以自定义很多控件，但是Flutter还是预定义了很多的组件可以方便的直接使用。例如：
-
Navigator管理由字符串标识的Widget栈，可以让您的应用程序在页面之间的切换。
看一个例子：
分析：
1.Material应用程序以
MaterialAppwidget开始。 是否使用MaterialApp完全是可选的，但是使用它是一个很好的做法。2.
AppBar中，我们给参数leading、actions、title分别传一个widget3.FloatingActionButton是右下角的按钮
此外，
Scaffold也是一个widget，可以接收许多不同的widget的作为参数，其中的每一个被放置在Scaffold布局中相应的位置。
添加手势处理
可以使用手势检测器 GestureDetector 添加手势处理。例如自定义按钮的点击事件处理：
代码中的 GestureDetector widget并不具有显示效果，只能检测由用户做出的手势。 当用户点击Container时， GestureDetector会调用它的onTap回调， 在回调中，将消息打印到控制台。您可以使用GestureDetector来检测各种输入手势，包括点击、拖动和缩放。
常见的手势事件如下：
- Tap
- onTapDown 指针已经在特定位置与屏幕接触
- onTapUp 指针停止在特定位置与屏幕接触
- onTap tap事件触发
- onTapCancel 先前指针触发的onTapDown不会在触发tap事件
- 双击
- onDoubleTap 用户快速连续两次在同一位置轻敲屏幕.
- 长按
- onLongPress 指针在相同位置长时间保持与屏幕接触
- 垂直拖动
- onVerticalDragStart 指针已经与屏幕接触并可能开始垂直移动
- onVerticalDragUpdate 指针与屏幕接触并已沿垂直方向移动.
- onVerticalDragEnd 先前与屏幕接触并垂直移动的指针不再与屏幕接触，并且在停止接触屏幕时以特定速度移动
- 水平拖动
- onHorizontalDragStart 指针已经接触到屏幕并可能开始水平移动
- onHorizontalDragUpdate 指针与屏幕接触并已沿水平方向移动
- onHorizontalDragEnd 先前与屏幕接触并水平移动的指针不再与屏幕接触，并在停止接触屏幕时以特定速度移动
稍微复杂点的例子，listView多状态处理
效果：
整个效果分两部分讲解：
- 1.listview部分
- 2.cell部分（listview中的每一行）
ListView
import 'package:flutter/material.dart';
void main() {
runApp(new MaterialApp(
title: 'Shopping App',
home: new ShoppingList(
products: <Product>[
new Product(name: 'Eggs'),
new Product(name: 'Flour'),
new Product(name: 'Chocolate chips'),
],
),
));
}
class ShoppingList extends StatefulWidget {
ShoppingList({Key key, this.products}) : super(key: key);
final List<Product> products; //接收main函数中传递过来的数据
@override
_ShoppingListState createState() => new _ShoppingListState();
}
class _ShoppingListState extends State<ShoppingList> {
Set<Product> _shoppingCart = new Set<Product>();
void _handleCartChanged(Product product, bool inCart) {
setState(() { //调用setState会触发重新构建界面
if (inCart)
_shoppingCart.add(product);
else
_shoppingCart.remove(product);
});
}
@override
Widget build(BuildContext context) {
return new Scaffold(
appBar: new AppBar(
title: new Text('Shopping List'),
),
body: new ListView(
padding: new EdgeInsets.symmetric(vertical: 8.0),
children: widget.products.map((Product product) { //遍历父控件的值构建ListView
return new ShoppingListItem( //构建cell
product: product,
inCart: _shoppingCart.contains(product), //传递inCart值
onCartChanged: _handleCartChanged, //传递点击函数
);
}).toList(),
),
);
}
}
Cell部分
class Product {
const Product({this.name});
final String name;
}
typedef void CartChangedCallback(Product product, bool inCart);
class ShoppingListItem extends StatelessWidget {
ShoppingListItem({Product product, this.inCart, this.onCartChanged}) //接收父控件传递过来的值
: product = product,
super(key: new ObjectKey(product));
final Product product;
final bool inCart;
final CartChangedCallback onCartChanged;
Color _getColor(BuildContext context) {
return inCart ? Colors.black54 : Theme.of(context).primaryColor; //根据inCart不同值显示不同颜色
}
TextStyle _getTextStyle(BuildContext context) {
if (!inCart) return null;
return new TextStyle(
color: Colors.black54,
decoration: TextDecoration.lineThrough,
);
}
@override
Widget build(BuildContext context) {
return new ListTile( //构造cell
onTap: () { //点击方法，调用父控件传递过来的方法
onCartChanged(product, !inCart);
},
leading: new CircleAvatar(
backgroundColor: _getColor(context),
child: new Text(product.name[0]),
),
title: new Text(product.name, style: _getTextStyle(context)),
);
}
}
