Flutter第一次上手作个app

做为一个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复制代码

初步完成展现

github.com/nullno/flut…

安卓下载地址

nullno.github.io/flutter-vmu…