在学习的边缘试探
Flutter最近实在太火了，并且Flutter Web一出震惊四座。可以说是不学不是前端人！Flutter依然是一个正在发展中的框架，一个’Moving Target’，还有很多未来的可能性。
关于Flutter
Flutter是一个SDK，基于Dart语言，是一套代码实现各端的并且可以达到原生性能的框架。
安装环境
这次先体验Flutter对移动端的支持啦。
首先先安装环境，官网上有很详细的说明。下载安装flutter以后配备一下开发ios和android所需要的环境。其中包括ios所需要的Xcode和android端的Android Studio，主要方便调试。https://flutter.dev/
运行flutter doctor查看一下环境是否都安装正常，然后使用flutter create APP_NAME创建一个新的flutter app，可以看到一个模板的Flutter App，是一个counter小程序。
vscode中安装了flutter插件以后就可以完美地在vscode中编写程序啦，只要打开手机模拟器，更改就会热更新到模拟器上啦，so easy!
做一个简单的小程序
开始简单的页面
主要跟着code labs上的教程做了一个简单的聊天UI，体验一下Dart和Flutter开发。教程地址如下：codelabs
Flutter中一切皆为Widget，包括组件，包括页面。首先创建一个主页面。
void main() {
runApp(
new MaterialApp(
title: "Friendlychat",
home: new Scaffold(
appBar: new AppBar(
title: new Text("Friendlychat"),
),
),
),
);
}
一个简单的主页面就创建成功啦
接下来简单的嵌套一个聊天屏幕
class MyApp extends StatelessWidget {
@override
Widget build(BuildContext context) {
return new MaterialApp(
title: "FriendlyChat",
home: new ChatScreen(),
);
}
}
class ChatScreen extends StatelessWidget {
@override
Widget build(BuildContext context) {
return new Scaffold(
appBar: new AppBar(title: new Text("来聊天呀")),
);
}
}
stateful组件
之前创建的都是stateless组件，接下来要创建stateful组件。简单的来说stateless就是没有state的一种固态组件，而stateful组件就是有state可以修改state导致重新渲染的组件。
在stateful组件中，要创建一个自己的State实体，在实体中完成组件的定义。改造后的结构就和下面一样啦。
class ChatScreen extends StatefulWidget {
@override
State createState() => new ChatScreenState();
}
class ChatScreenState extends State<ChatScreen> {
@override
Widget build(BuildContext context) {
return new Scaffold(
appBar: new AppBar(title: new Text("来聊天呀")),
);
}
}
接下来就不赘述了（其实本来想把流程贴出来的，但发现也就只是贴贴代码。。）
dart入门确实不难，只要熟悉以下api就可以了，并且官网有很好的开发比对，比如说web开发的css样式和dart的放在一起对比提供给你。学习这些样式布局就很快。
通过这一个小项目的学习差不多就知道布局的逻辑了。我个人的理解就是（非常粗浅），把组件拼接，每一个行每一个列也都是一个组件，组件里面包裹子孩子还有样式，基本的margin，padding也都有。最简单的就是写行和列了，写一个行列，把子组件放到children队列中就可以了。交互逻辑就绑定事件。
Stateful的组件就是拥有state，根据setState可以去重新渲染该部分的组件。不需要重新渲染的就用StatelessWidget。