先来看看我们最终会用Flutter写一个仿照微信的APP
image
因为我们主要是实战，环境安装和配置我就不多说了，官网说的比较清楚了点此进入 不懂的或者配置出错的可以给我留言 还有就是Google的东西大家都懂得，最好有梯子，如果大家没有账号或者懒得弄的话，可以关注文末的公众号会有免费的梯子可用
IDE选择
- VS Code
- Android Studio
这两个都可以，我选择用的Android Studio，毕竟是Google的亲儿子，插件，兼容还有调试各方面都很方便，当然VS Code也挺好用，这个就根据自己的喜好选择吧，下面我们直接进入主题,下载完SDK后大家记得配置PATH
我们首先 flutter doctor下看看是否所有事项都已准备完毕
image
一切准备完毕然后我们开始新建工程，大家可以用命令行，flutter create flutter_demo 来创建，我这里直接用Android Studio来创建了，大家记得安装Flutter插件，装完插件就会有新建Flutter Application选项了
image
我们点击 Start a new Flutter project
image
后面其他几个选项我们到后面都会用到,用到的时候我们再细说
建完工程后，大家可以运行下系统给我们写好的代码看看效果，
image
然后我们把系统给我们写好的代码全部干掉，我们对比着写iOS项目来尝试下如何写Flutter项目，我们先来写一个简单的在屏幕中央显示一行文字
- 首先，import 'package:flutter/material.dart'; 相当于我们iOS的UIKit
- 然后，得有入口函数吧，我们来写个
<code>void main(){
}
/<code>- 我们再想想iOS的main函数里干的事情，是不是return了UIApplicationMain，Flutter里有个类似的叫 runApp我们接着写
<code>void main(){
runApp(
);
}
/<code>- 接着我们要在屏幕中央显示一行Hello Flutter，我们会用到一个Center Layout，这个Layout有一个child的属性，我们可以想象成addSubview，我们传一个Text相当于iOS的UILabel组件进去，最终代码如下：
<code>void main(){
runApp(
Center(
child: Text('Hello Flutter', textDirection: TextDirection.ltr,),
)
);
}
/<code>Flutter 让开发人员描述当前的 UI 状态，并把状态切换的的工作留给了框架。Flutter这种布局方式叫声明式UI，SwiftUI也是这种框架，后面我们再详细介绍
需要注意的是，虽然声明式UI能帮我们减轻很多负担，但大家要将布局的思维方式要转变过来。
我们点击运行按钮看下效果
image
是不是发现跟iOS开发都是大同小异的，今天先到这里，后面我们会把常用的widget都先玩一下
閱讀更多 新新猿類 的文章
