Flutter之旅：入门
Flutter allows you to build beautiful native apps on iOS and Android from a single codebase.
Flutter允许你使用同一个代码库在Android和IOS上构建漂亮的本机应用。
前言
又双叒叕要开坑了，技术日新月异，怎么可以停滞不前😭。相信很多传统开发的小伙伴都有被UI支配的恐惧，比如我们公司，一个新的项目过来，要Android、AndroidHD、IOS、IPAD、桌面最少5个版本，加上开发成本的压力，很自然的就想到了跨平台，至于为什么选择flutter，最重要的还是它媲美原生的性能吧，而且2月26日发布flutter 1.2版本的时候也提到2019年的工作重心是将flutter推广到移动平台之外，支持web和桌面，我只能说很期待！
关于这系列文章，不会写的很详细，主要还是我个人的学习记录吧，而且flutter说到底只是一个用dart语言编写的UI框架，如果有移动端开发经验的话，入门和使用还是比较简单的。至于没有这方面经验的，并不建议直接学习flutter，还是应该先学习下移动的原生开发，毕竟很多东西用flutter是做不到的。
安装配置
安装配置官方有详细文档，不再赘述。
Flutter官网
国内翻译
项目结构
首先我们新建一个Flutter项目，来看一下目录结构：
hello_flutter.png
需要我们重点关注的主要有5个目录：
- android：存放android平台相关代码，比如原生和Flutter混编，或者Flutter和Android通过Channel通信的相关代码。
- ios：功能同上，存放ios相关。
- lib：flutter的核心目录，存放我们自己编写的flutter跨平台代码。
- pubspec.yaml：项目的描述和配置文件，比如版本号、依赖库、资源文件等等。类似于android中的build.gradle文件。
- test：测试目录，学习阶段可以不使用。
入门
学习一门新的技术，首先要学会的是使用，千万不要一开始就陷入到各种xxx原理解析里面，要不可能就真的是从入门到放弃了。就像Flutter，但凡有点了解的都知道它有一个核心思想：一切皆Widget。它提供了许多的小widget，小到Padding、Size、GestureDetector都是一个widget，我们可以用这些小widget来组合成我们需要的UI。那么首先要做的，抛开生命周期，抛开渲染过程解析，了解一下flutter的内置Widgets，利用它提供的基础widget来编写一个简单的页面（比如登录页），在自己心里对它有一个模糊的概念。
分析
首先简单分析一下登录页的简单实现：
- 一个简单的垂直方向的线性布局
- logo图片
- text文本
- text输入框
- 登陆按钮
需要涉及到的Widget：
- Text：显示文本，可以自定义样式。
- Image：显示图片，可以从网络、本地、内存、资源图片等路径加载。
- Row：水平线性布局。
- Column：垂直线性布局。
- RaisedButton：Material Design风格的按钮。
- Container：应该是最常用的一个布局控件了，可以设置背景、尺寸、边距、装饰等。
- Expanded：一般用于扩展Row、Column中的某个子widget。
实践
接下来开始实践，新建工程，删除自动生成的Demo代码，从入口函数开始写起：
import 'package:flutter/material.dart';
void main(){
runApp(MyApp());
}
class MyApp extends StatelessWidget{
///我们需要在build函数中构建出我们的UI
@override
Widget build(BuildContext context) {
return null;
}
}
接下来我们写出所要用到的所有小部件：
//地址为我的头像
Image _logo = Image.network(
"https://upload.jianshu.io/users/upload_avatars/1215918/b54de985d456.jpeg?imageMogr2/auto-orient/strip|imageView2/1/w/300/h/300/format/webp"
);
Text _textAccount = Text(
"账号：",
textDirection: TextDirection.ltr,
style: TextStyle(color: Colors.pink, fontSize: 14),
);
Text _textPassword = Text(
"密码：",
textDirection: TextDirection.ltr,
style: TextStyle(color: Colors.pink, fontSize: 14),
);
TextField _textFieldAccount = TextField(
decoration: InputDecoration(hintText: "请输入账号"),
);
TextField _textFieldPassword = TextField(
decoration: InputDecoration(hintText: "请输入密码"),
);
RaisedButton _buttonLogin = RaisedButton(
onPressed: () => {},
child: Text("登陆"),
);
最后我们只需要在build方法里面将这些widget组装成我们想要的布局样式：
return MaterialApp(
home: Scaffold(
body: Container(
color: Colors.white,
child: Column(
mainAxisAlignment: MainAxisAlignment.center,
children: <Widget>[
_logo,
Row(
children: <Widget>[
_textAccount,
Expanded(
child: _textFieldAccount)
],
),
Row(
children: <Widget>[
_textPassword,
Expanded(
child: _textFieldPassword)
],
),
_buttonLogin,
],
),
),
));
最外层的MaterialApp和Scaffold是Flutter提供的，用于快速创建Material Design风格的app，因为我们这是使用到了TextField，它要求必须有一个Material Design风格的父Widget。
运行看下效果图：
效果图
实话实说。。。好丑！不过效果还是可以看到的，因为只是为了入门，有个概念，并没有再去各种嵌套调边距什么的，有兴趣的可以自己试试。
