作为一个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

初步完成展示

https://github.com/nullno/flutter-vmusic

安卓下载地址

https://nullno.github.io/flutter-vmusic/com.nullno.flutter.flutter_dxmusic.apk