想學Flutter，就請關注這個專欄
Flutter系列（一）——詳細介紹
Flutter系列（二）——與React Native進行對比
Flutter系列（三）——環境搭建（Windows）
Flutter系列（四）——HelloWorld
文件歸檔：
github.com/yang0range/…
建立的第一個Demo
上一篇文章，詳細的介紹了Flutter的環境搭建，搭建完成之後，自然迫不及待看看如何建立我們的第一個Demo。
開啟Android Studio
可以看到，可以看見有四個選項。
那麼這四個選項有什麼區別呢？
Flutter Application
Flutter標準引用程式
Flutter Plugin
Flutter封裝的Native工程的基礎外掛
Flutter Package
純Dart庫工程
Flutter Modue
作為已有工程的一個Module
這裡，我們需要建立一個Flutter Application專案。
工程目錄結構
這裡，我們首先可以看到三個比較重要的目錄，分別是android，ios還有lib。
android
顧名思義，就是寫Android平臺相關程式碼的地方。
ios
和上面類似，這就就是寫ios平臺相關程式碼的地方。
lib
這裡才是我們真正寫flutter相關程式碼的地方。
這裡還有一個十分重要的檔案，
pubspec.yaml
這個檔案是我們flutter的配置檔案，比如三方的依賴都在這裡，最重要的是這裡還要寫一些資原始檔，比如圖片等等，後面我們會詳細介紹。
從上面目錄結構大致可以理解為，整理的flutter的工程結構為。
執行官方Demo
先把官方Demo執行起來。
執行不起來
我們第一次執行官方Demo的時候，可能會有執行不來，一直卡在
Running Gradle task 'assembleDebug'...
的情況，這裡是因為Gradle的Maven倉庫在國外，因為眾所周知的問題，無法載入。
解決辦法
這裡，我們就可以使用阿里雲的映象地址，來解決這個問題。
開啟如下目錄，修改的地方。
也可以直接複製如下程式碼。
buildscript {
ext.kotlin\_version = '1.3.50'
repositories {
// 這裡做了修改，使用國內阿里的代理
// google()
// jcenter() maven { url 'https://maven.aliyun.com/repository/google' }
maven { url 'https://maven.aliyun.com/repository/jcenter' }
maven { url 'http://maven.aliyun.com/nexus/content/groups/public' }
}
dependencies {
classpath 'com.android.tools.build:gradle:3.5.0'
classpath "org.jetbrains.kotlin:kotlin-gradle-plugin:$kotlin\_version"
}
}
allprojects {
repositories {
//修改的地方
//google()
//jcenter() maven { url 'https://maven.aliyun.com/repository/google' }
maven { url 'https://maven.aliyun.com/repository/jcenter' }
maven { url 'http://maven.aliyun.com/nexus/content/groups/public' }
}}
複製程式碼接著開啟flutter.gradle檔案，路徑在
..\fluttersdk\flutter\packages\flutter_tools\gradle下，修改內容
buildscript {
repositories {
// 這裡做了修改，使用國內阿里的代理
// google()
// jcenter()
maven { url 'https://maven.aliyun.com/repository/google' }
maven { url 'https://maven.aliyun.com/repository/jcenter' }
maven { url 'http://maven.aliyun.com/nexus/content/groups/public' }
}
dependencies {
classpath 'com.android.tools.build:gradle:3.5.0'
}
}
複製程式碼再重新執行，就成功了！
官方Demo結構
開啟main.dart檔案，就是運動Demo的程式碼了。
根據程式碼，我們可以畫出這個Demo的結構如下圖。
官方Demo中幾個重要的內容
下面我們著重依次介紹一下。
void main() => runApp(MyApp());
入口函式，這裡用的是Dart語法當中的箭頭函式，這裡和Kotlin的用法十分相像。
我們可以看到這裡的MyApp()繼承的是StatelessWidget而StatelessWidget繼承的是Widget
這裡的 runApp起到了一個全域性更新的作用，一般flutter啟動時呼叫後不會再呼叫
MyApp
這裡的Myapp返回的是一個MaterialApp相信瞭解Android的小夥伴對這個不會陌生，這個就是讓這個Flutter保持一個MMaterial的UI風格。
當然，也有IOS的風格，這裡我們可以使用CupertinoApp。
StatelessWidget
無中間狀態變化的widget，初始狀態設定以後就不可再變化，
用於不需要維護元件狀態的場景，
createElement()建立StatelessElement物件，一個StatelessWidget對應一個StatelessElement。
可以看到MyApp就是繼承自StatelessWidget。
StatefulWidget
存在中間狀態變化的widget，createElement()建立StatelfulElement物件
，createState()建立State物件(可能呼叫多次)，createState()建立State物件(可能呼叫多次)。
MyHomePage因為有點選的count++的導致UI變化，所以繼承自StatefulWidget。
State
State是一個狀態物件，<>裡面是表示該狀態是跟誰繫結的。
State有兩個作用
1.在修改狀態就在這個類裡編寫，Weidget的時候可以同步的讀取。
2.當狀態有所改變的時候，呼叫State.setState()同時去重新整理Weidget。
State.setState()
將子樹作StatefulWidget的一個子Widget，並建立對應的State類例項，通過呼叫State.setState()觸發子樹的重新整理。
在Demo當中，可以看到_MyHomePageState就是繼承自State並且通過State.setState()這個方法區域性重新整理UI。
最後
以上就是關於整個官方Demo的一個較為詳細的介紹，也是我們接觸的第一個Flutter專案，接下來我們就瞭解一下什麼是Dart語言，看看Dart語言有哪些特點，為什麼Flutter要使用Dart語言。
Flutter已經是Top20的軟體庫，通過接下來的一系列的文章，希望我和大家一起來學習Flutter，一起進步，一起有所收穫，掌握未來技術主流的主動權！
有什麼好的建議，意見，想法歡迎給我留言！