先來看看我們最終會用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都先玩一下
閱讀更多 新新猿類 的文章
