作为一个web前端开发人员，写多了html/js/css 就很疲倦了，精力之余就总想折腾点什么，我们都有一个做app的梦。可能会搜过：vue怎么做app，h5怎么做app，react怎么做app之类的，或许也用过ionic uniapp 等框架把打包成app，尽管各种坑，但是为一次开发多平台使用，想想还是很不错的，很多时候公司为了节省开发成本不得不用这种开发方式，所以作为会web前端技术的掌握一两个快速开发app的的方式还是很有必要的。
我为什么选择学习一个和html不相干的flutter？
我觉得这可能是一个趋势，未来会出现各种各样的终端设备，而不局限于手机，电脑。或许，作为一个普通用户，你已不在需要手机，电脑，也可以随时获取信息，也就是说只要是能显示东西的物体都可以用上flutter，例如你的水杯、茶几、燃气灶、冰箱、镜子等固定显示设备、也或手表等承载未来新系统的任何可移动设备 ，相信谷歌的的远景。
flutter 初次使用
写多了html即写即所见，首次编写可能会懵，不是flutter嘛，为什么文件命名不和vue一样 xxx.vue，用xxx.flutter 而是xxx.dart呢？Material \MaterialApp 什么玩意？Scaffold 和Stack 有关系吗？什么时候用得到Scaffold？什么情况下要用Stack? 这些组件中的词汇量是挺多的，英文不好的同学就像我打开翻译，理解中文意思的才能更好的理解他的作用，很多时候对于一种新语言，不是不好学习使用，而是晦涩的英文就把我们拦住了。对于困惑如何解决：第一官方文档，第二百度，至于学习交流群最好就不要去问了，自己用自己熟悉的方式去获取能理解的答案。
布局
通过布局我们可以逐步的了解widget 组件，flutter一切皆为组件和万物皆对象一个道理 。app里你所看到的一切都可以作为组件Widget（按钮、输入框、卡片、列表、布局方式、动画处理等），通过不同Widget 组合成各式各样你需要的组件。整体来说flutter布局更加规范，具有约束性，没有html/css显得自由，但html能显示的效果通过flutter一样可以表达出来。例：
一个红色的盒子使子元素图片居中图片显示对比
html:
<div style="text-align:center;display:inline-block;width:100px;height:100px;color:red">
<img src="xxx" style="width:50px;"/>
</div>
flutter:
Container(
alignment:Alignment.center,
color:Colors.red,
width:100.0,
height:100.0,
child:new Image(image: new NetworkImage('xxx'),width:50)
)html:
<div style="width:100px;height:100px;color:red">
<img src="xxx" style="display:block;margin:25px auto;width:50px;">
</div>
flutter:
Container(
alignment:Alignment.center,
color:Colors.red,
width:100.0,
height:100.0,
Center(child:
new Image(image: new NetworkImage('xxx'),width:50)
)
)三个"你好"横向布局 对比
html:
<ul class="width:500px;display:flex;justify-content:space-between;">
<li style="background:red;text-align:center;">
<span style="color:white;font-weight:bold;">你好<span>
</li>
<li style="background:green;text-align:left;"> 你好</li>
<li style="background:blue;text-align:right;"> 你好</li>
</ul>
flutter:
Container(
width:500,
child:Row(
mainAxisAlignment:MainAxisAlignment.spaceBetween,
children: <Widget>[
Container(color:Colors.red,
child:Text('你好',
textAlign: TextAlign.center,
TextStyle(color:Colors.white,fontWeight:FontWeight.bold)
)
),
Container(color:Colors.red,child:Text('你好',textAlign: TextAlign.left,)),
Container(color:Colors.red,child:Text('你好',textAlign: TextAlign.right,))
]
)
)第三方插件
想要快速的实现一些功能肯定要使用一些第三方插件包，好比npm 安装依赖包
flutter 项目中的 pubspec.yaml 命令 flutter get
vue项目中package.json 命令 npm install
初步完成展示
安卓下载地址
