一、安装
1.安装命令
$ export PUB_HOSTED_URL=https://pub.flutter-io.cn
$ export FLUTTER_STORAGE_BASE_URL=https://storage.flutter-io.cn
$ git clone -b dev https://github.com/flutter/flutter.git
$ export PATH="$PWD/flutter/bin:$PATH"
$ cd ./flutter
$ flutter doctor
执行完flutter doctor可能会提示报错，说你缺少编译器，按照提示的命令去执行或者直接去下载编译器，然后在执行flutter doctor，就会看到错误减少。
2.更新环境变量
此时flutter命令只能在当前终端窗口运行，要想在其他终端窗口运行还得更新环境变量。
1.进入你的Flutter SDK目录下，并记住这个目录，我的是`/Users/user/flutter`
2.执行`vim $HOME/.bash_profile`
3.在`$HOME/.bash_profile`文件里面输入如下
export PUB_HOSTED_URL=https://pub.flutter-io.cn //国内用户需要设置
export FLUTTER_STORAGE_BASE_URL=https://storage.flutter-io.cn //国内用户需要设置
export PATH=(这里是我们Flutter SDK的目录)/bin:$PATH
4.结束编辑执行`source $HOME/.bash_profile `
5.运行echo $PATH目录是否在已经在PATH中。
这样你就可以在任意的终端窗口运行Flutter命令了。
二、创建项目
打开你的编译器（我选择的是Android Stutio），安装Flutter插件和Dart插件（不会使用Android Stutio的同学，问问你的Android小伙伴）。
newFluuter.png
点击进入下图我们选择Flutter Application
newProject.png
创建好我们进入项目目录查看。可以看到有ios文件和android文件夹下，分别创建了ios工程和android工程，其实也可以通过这两个文件夹下的工程去运行Flutter工程。
三、代码体验
Flutter中界面上一切都是widget(连手势都继承了widget)，又分为无状态的StatelessWidget或者是有状态的StatefulWidget。
1.Stateless widgets 是不可变的, 这意味着它们的属性不能改变 - 所有的值都是最终的.
2.Stateful widgets 持有的状态可能在widget生命周期中发生变化. 实现一个 stateful widget 至少需要两个类:
一个 StatefulWidget类。
一个 State类。 StatefulWidget类本身是不变的，但是 State类在widget生命周期中始终存在.
下面我们再看如下代码：
import 'package:flutter/material.dart';
//main函数没啥好说的
void main() => runApp(new MyApp());
//理解为整个应用是一个继承StatelessWidget的类的对象，本质上也是一个Widget，类似与ios中的window需要一个rootViewController，这里也需要一个widget,这里给他返回了一个MaterialApp对象。
class MyApp extends StatelessWidget {
@override
Widget build(BuildContext context) {
//MaterialApp有需要给home属性赋值一个Widget对象用来显示。这里我们给home赋值了一个Scaffold对象。MaterialApp是已经封装了许多属性的widget，当然我们也可以在这直接返回一简单的如Container,开发中一般我们不会动这里的返回。
return new MaterialApp(
title: 'Welcome to Flutter',
//Scaffold是封装好的widget,我们可以把它当做一个页面去理解。
home: new Scaffold(
appBar: new AppBar(
title: new Text('Welcome to Flutter'),
),
body: new Center(
child: new Text('Hello World'),
),
),
);
}
}
上面有一个问题，当我们把Scaffold当做一个页面去理解，当出现多个页面是，就需要多个Scaffold对象，而且每个页面又会只有状态，就要有多个 Scaffold的State类，反而没法区分是那个页面了。
所以我们通常这么用
import 'package:flutter/material.dart';
void main() => runApp(new MyApp());
class MyApp extends StatelessWidget {
@override
Widget build(BuildContext context) {
return new MaterialApp(
title: 'Welcome to Flutter',
home: new Widget1(),
);
}
}
//直接继承StatefulWidget的对象来充当页面，Scaffold对象充当页面中的widget。这样就可以让每个页面都有一个State类来操作。
class Widget1 extends StatefulWidget{
@override
State<StatefulWidget> createState() {
// TODO: implement createState
return new Widget1State();
}
class Widget1State extends State<Widget1>{
@override
Widget build(BuildContext context) {
return new Scaffold(
appBar: new AppBar(
title: new Text(
'aa',
),
),
body: new Text('aa'),
),
);
}
这里我们体验下Flutter的热加载，运行成功后，稍微改改文案之类的，按command+S,或者点击如图中的⚡️符号，不用再重新运行项目就可以看到变更。
hot.png
四、常用Widget
Text
new Text(
'aabbcc测试下text各种属性名字好不好',//文案
style: TextStyle(color: Colors.red,fontSize: 22,),//文字颜色，字体大小等
textAlign: TextAlign.left,//居中偏左偏右
maxLines: 1,//最大行，
overflow: TextOverflow.ellipsis,//超出问题缩略方式
)
富文本
Text.rich(
TextSpan(
text: '富文本',
children: [
TextSpan(
text: 'hell0',
style: TextStyle(color: Colors.red)
),
TextSpan(
text: '你好',
style: TextStyle(color: Colors.green)
),
],
),
)
Row、Column
body: Row(
crossAxisAlignment: CrossAxisAlignment.end, //指定了元素间对齐方式 常用
mainAxisAlignment: MainAxisAlignment.spaceEvenly, //指定了元素间的排列方式 常用
textDirection: TextDirection.rtl, //元素之间的排列顺序 row使用 不常用
verticalDirection: VerticalDirection.up, //元素之间的排列顺序 column使用 不常用
children: <Widget>[
new Container(
height: 100,
width: 100,
color: Colors.red,
),
new Container(
height: 100,
width: 100,
color: Colors.green,
),
//Expanded这个元素将暂用剩余的全部空间。
Expanded(child: new Text('aa是什么呢呢哈哈哈哈哈哈哈啊哈哈哈哈哈aa是什么呢呢哈哈哈哈哈哈哈啊哈哈哈哈哈aa是什么呢呢哈哈哈哈哈哈哈啊哈哈哈哈哈aa是什么呢呢哈哈哈哈哈哈哈啊哈哈哈哈哈aa是什么呢呢哈哈哈哈哈哈哈啊哈哈哈哈哈aa是什么呢呢哈哈哈哈哈哈哈啊哈哈哈哈哈aa是什么呢呢哈哈哈哈哈哈哈啊哈哈哈哈哈aa是什么呢呢哈哈哈哈哈哈哈啊哈哈哈哈哈aa是什么呢呢哈哈哈哈哈哈哈啊哈哈哈哈哈')),
],
),
Container
new Container(
width: 100,
height: 100,
// color: Colors.red,
padding: EdgeInsets.fromLTRB(0, 0, 50, 50), //设置子视图相对Container的边距，即内边距
alignment: AlignmentDirectional(1, 1),//设置子视图相对Container的位置
margin: EdgeInsets.all(20),//设置Container距离其他视图的位置
child: new Container( //子视图
height: 20,
width: 20,
color: Colors.green,
),
decoration: BoxDecoration( //出现这个属性外部就不能再设置颜色了
color: Colors.red,//设置颜色
border: Border.all(color: Colors.green,width: 2,), //设置边框
borderRadius: BorderRadius.all(Radius.circular(10)),//设置圆角
),
),
Image
Image有多个构造方法.
Image.asset(
'images/aa.png',
height: 200,
width: 200,
fit: BoxFit.cover,//填充方式 BoxFit.fill填满；BoxFit.contain按照图片宽高比例来有可能填不满;BoxFit.cover按照图片宽高比例来有可能图片被切割
),
body: new Image.network(
'https://wx2.sinaimg.cn/mw690/5df4326fgy1fykew2hqq1j22c02c0b29.jpg', //图片路径
width: 200,
height: 200,
),
button
button有好几种，我们先来看看它们的集成关系。
IconButton 有一个icon必填属性,需要一个widget对象，不局限于Icon类型
MaterialButton--->FlatButton(按压有墨水效果的按钮),RaisedButton(其实就是一个有抬起效果和按压有墨水效果的按钮),OutlineButton(对边框进行了封装的按钮)
DropdownButton
RawMaterialButton
FloatingActionButton 生成一个圆形的button
按钮默认点击会有水波纹的效果，设置highlightColor属性会去掉。
这里我发现两个问题：问题1.没有属性设置按钮是否可以点击；问题2.如何取设置按钮的圆角；这两个问题搞定了，就可以使用MaterialButton满足一般的开发需求了。这里我找到了后续在补充。。。。。
问题1.控制按钮是否可以点击可以控制按钮的onPressed属性，当属性为null时按钮不可点击。
//在这个方法里面控制状态
setState(() {
if(){
_isButton1Disabled = true;
}else{
_isButton1Disabled = false;
}
}
RaisedButton(
child: new Text('aa'),
onPressed: _getBtn1ClickListener(), 注意这里一定要带（）这里实际上是一个函数。
);
//根据变量去控制这个方法的返回值是null 还是_clickAction。
_getBtn1ClickListener() {
if (_isButton1Disabled) {
return null;
} else {
return _clickAction();
}
}
//真正的点击方法
void _clickAction(){
}
AppBar
new Scaffold(
appBar: new AppBar(
centerTitle: true,//控制title处于navbar的中心位置。
leading: new IconButton(icon: new Icon(Icons.add), onPressed: _addAction),//navbar左侧按钮
title: new Text(
'aa',
style: TextStyle(
color: Colors.red,
),
),
actions: <Widget>[
new IconButton(icon: new Icon(Icons.add), onPressed: _addAction),
new IconButton(icon: new Icon(Icons.add), onPressed: _addAction),
],//navbar右侧按钮
),
