版權(quán)聲明：本文為博主原創(chuàng)文章，未經(jīng)博主允許不得轉(zhuǎn)載。http://www.itdecent.cn/p/2c9867e737a1

轉(zhuǎn)載請(qǐng)標(biāo)明出處：
http://www.itdecent.cn/p/2c9867e737a1
本文出自 AWeiLoveAndroid的博客

Flutter系列博文鏈接 ↓：

工具安裝：

• Flutter從配置安裝到填坑指南詳解

Flutter基礎(chǔ)篇：

• 谷歌Flutter1.0正式版發(fā)布
• Flutter基礎(chǔ)篇（1）-- 跨平臺(tái)開發(fā)框架和工具集錦
• Flutter基礎(chǔ)篇（2）-- 老司機(jī)用一篇博客帶你快速熟悉Dart語法
• Flutter基礎(chǔ)篇（3）-- Flutter基礎(chǔ)全面詳解
• Flutter基礎(chǔ)篇（4）-- Flutter填坑全面總結(jié)
• Flutter基礎(chǔ)篇（5）-- Flutter代碼模板，解放雙手，提高開發(fā)效率必備
• Flutter基礎(chǔ)篇（6）-- 水平和垂直布局詳解
• Flutter基礎(chǔ)篇（7）-- Flutter更新錯(cuò)誤全面解決方案(圖文+視頻講解)
• Flutter基礎(chǔ)篇（8）-- Flutter for Web詳細(xì)介紹
• Flutter基礎(chǔ)篇（9）-- 手把手教你用Flutter實(shí)現(xiàn)Web頁面編寫
• Flutter1.9升級(jí)體驗(yàn)總結(jié)（Flutter Web 1.9最新版本填坑指南）

Flutter進(jìn)階篇：

• Flutter進(jìn)階篇（1）-- 手把手帶你快速上手調(diào)試Flutter項(xiàng)目
• Flutter進(jìn)階篇（2）-- Flutter路由詳解
• Flutter進(jìn)階篇（3）-- Flutter 的手勢(shì)（GestureDetector）分析詳解
• Flutter進(jìn)階篇（4）-- Flutter的Future異步詳解
• Flutter進(jìn)階篇（5）-- 使用Flutter創(chuàng)建插件詳解并發(fā)布到Pub庫
• Flutter進(jìn)階篇（6）-- PageStorageKey、PageStorageBucket和PageStorage使用詳解
• Flutter進(jìn)階篇（7）-- Flutter路由輕量級(jí)框架FRouter

Dart語法系列博文鏈接 ↓：

Dart語法基礎(chǔ)篇：

• Flutter基礎(chǔ)篇（2）-- 老司機(jī)用一篇博客帶你快速熟悉Dart語法(這是Dart語法系列的第一篇)
• Dart的語法詳解系列篇（二）-- 類與函數(shù)
• Dart的語法詳解系列篇（三）-- mixin入門
• Dart的語法詳解系列篇（四）-- 泛型、異步、庫等有關(guān)詳解
• Dart2.6正式版發(fā)布，支持編譯為native可執(zhí)行文件

Dart語法進(jìn)階篇：

• Dart語法進(jìn)階篇（一）-- Dart源碼的排序算法詳解

第1章、基礎(chǔ)入門

1.1 Flutter簡介

1.1.1 跨平臺(tái)框架的發(fā)展歷史

詳情請(qǐng)看我之前寫的博客 安卓開發(fā)方式的進(jìn)化之路

這里就以一張圖簡單的講一下：

跨平臺(tái)框架的發(fā)展歷史

Flutter是基于Dart語言編寫的。主要優(yōu)點(diǎn)：

1. 免費(fèi)開源
2. 利用保持狀態(tài)的熱重載（Hot Reload）、全新的響應(yīng)式框架、豐富的控件以及集成的開發(fā)工具這些特點(diǎn)進(jìn)行快速開發(fā)。Flutter具有熱重載（Hot Reload）功能，我們編寫代碼時(shí)可以實(shí)時(shí)更新我們的代碼而不需要重啟我們的應(yīng)用，大大減少了編譯時(shí)間，提高了效率。
3. 通過可組合的控件集合、豐富的動(dòng)畫庫以及分層可擴(kuò)展的架構(gòu)來實(shí)現(xiàn)富有感染力的靈活界面設(shè)計(jì)。

4. 快速的2D渲染引擎：Flutter不依賴于原生平臺(tái)，它有自己的Skia渲染引擎，通過這個(gè)可移植的 GPU 加速的渲染引擎以及高性能本地 ARM 代碼運(yùn)行時(shí)，達(dá)到跨設(shè)備跨平臺(tái)的高質(zhì)量用戶體驗(yàn)（高幀率60bps）。

   
   
   
   
5. 提高效率：使用一套代碼同時(shí)開發(fā)Android和iOS。
6. 可擴(kuò)展性很強(qiáng)：Flutter框架本身提供了豐富的Material Design和Cupertino(iOS-flavor)風(fēng)格的控件，可自由擴(kuò)展控件不受手機(jī)平臺(tái)控件的限制。

1.1.2 Flutter的起源

2015年， Google 內(nèi)部開始測(cè)試另一種高性能的編程方式，那就 Google 的 Sky 項(xiàng)目。Sky 項(xiàng)目使用網(wǎng)頁開發(fā)語言Dart開發(fā)原生Android 應(yīng)用，強(qiáng)調(diào)應(yīng)用的運(yùn)行速度和與 Web 的高度集成。Sky將其Web后端也帶到了移動(dòng)開發(fā)領(lǐng)域。Sky不依賴于平臺(tái)，其代碼可以運(yùn)行在Android、iOS，或是任何包含Dart虛擬機(jī)的平臺(tái)上。

可以說sky是Flutter框架的前身。

在 2017年的谷歌 I/O大會(huì)上，Google推出了Flutter —— 一款新的用于創(chuàng)建移動(dòng)應(yīng)用的開源庫。在2018年初世界移動(dòng)大會(huì)上發(fā)布了 Flutter的第一個(gè)Beta版本，2018年5月的 I/O大會(huì)上更新到了Beta3版本，向正式版又邁進(jìn)了一步。一時(shí)間業(yè)內(nèi)對(duì)這個(gè)框架的關(guān)注度越來越高。

關(guān)于sky的起源相關(guān)新聞，可以點(diǎn)擊以下幾篇文章：

Google Sky 開源項(xiàng)目：不使用 JAVA 開發(fā) 120 FPS 的安卓應(yīng)用

谷歌推出Sky框架：使用Dart編寫120fps的Android應(yīng)用

谷歌推出全新Android開發(fā)框架Sky讓App更流暢

1.1.3 Flutter體系結(jié)構(gòu)

Flutter框架分為2層：分別是框架層（Framework）和引擎層（Engine）。

框架層（Framework）

框架層是由Dart所編寫的，里面包含：Material（Material Design風(fēng)格的組件）、Cupertino（針對(duì)iOS風(fēng)格的組件）、Widgets（組件）、Rendering（渲染）、Animation（動(dòng)畫）、Painting（繪制）、Gestures（手勢(shì)）、Foundation（基礎(chǔ)庫）。通常開發(fā)者使用Framework層所提供的API去開發(fā)自己的項(xiàng)目。

引擎層（Engine）

引擎層（Engine）是由C++編寫而成，里面包含Skia、Dart、Text三個(gè)部分。

Skia：圖形渲染引擎庫，也是最核心的部分。
Dart：指的是Dart VM虛擬機(jī)，用于編譯和運(yùn)行Dart代碼。
Text：文本渲染，不同平臺(tái)采用的渲染方式不一樣。

1.1.4 DartVM虛擬機(jī)

下回分解

1.2 Flutter開發(fā)環(huán)境

1.2.1 安裝Flutter開發(fā)環(huán)境

詳細(xì)的安裝過程和注意事項(xiàng)，請(qǐng)看我的博客。Flutter從配置安裝到填坑指南詳解

1.2.2 常用的命令行

以下是常用命令：

1.2.3 調(diào)試工具

具體講解，請(qǐng)看我得博客 手把手帶你快速上手調(diào)試Flutter項(xiàng)目

1.3 開發(fā)第一個(gè)Flutter程序

1.3.1 HelloWorld案例

創(chuàng)建project過程和普通安卓項(xiàng)目是很類似的。

（一）打開AS，點(diǎn)擊 File --> New Flutter Project，看看3種不同類型的項(xiàng)目模板

解釋這三種類型的含義：

• Flutter Application（Flutter應(yīng)用項(xiàng)目）

本文中創(chuàng)建的就是這種類型。具體的下面會(huì)詳解。

• Flutter Plugin（Flutter插件項(xiàng)目）

當(dāng)我們創(chuàng)建了Flutter Plugin之后，發(fā)現(xiàn)多了一個(gè)我們自己命名的目錄，這個(gè)相當(dāng)于一個(gè)本地的lib庫，
可以在` pubspec.yaml`文件中配置路徑，然后在項(xiàng)目中使用。如下圖所示：

Flutter Package工程結(jié)構(gòu)

• Flutter Package （Flutter包項(xiàng)目）

（二）打開AS，點(diǎn)擊 File --> New Flutter Project，選擇Flutter application ，然后點(diǎn)擊next，輸入一個(gè)工程名字。

注意： 項(xiàng)目名稱必須是小寫，單詞之間用下劃線隔開，你看我這樣創(chuàng)建就給我提示錯(cuò)誤了，報(bào)錯(cuò)的如圖所示。

錯(cuò)誤示范

（三）輸入包名，點(diǎn)擊next，點(diǎn)擊finish，等待編譯就可以了。如果沒配置好，這個(gè)時(shí)候往往會(huì)報(bào)錯(cuò)。

注意： 這里可以支持ios和kotlin，如果需要的話可以勾上。

（四）首先模擬器，然后選擇要運(yùn)行的項(xiàng)目，注意了，這里有一個(gè)MainActivity 和 main.dart，選擇main.dart，然后點(diǎn)擊綠色的三角號(hào)圖標(biāo)運(yùn)行（或者點(diǎn)擊菜單欄 Run）就可以了。

Run運(yùn)行示意圖

我用的AS3.2，我截個(gè)圖，菜單欄跟以前版本有點(diǎn)不同，之前的AS版本可以在Build菜單找到編譯選項(xiàng)的。

AS3.2編譯菜單欄

如果代碼有更改，可以點(diǎn)擊黃色的閃電圖標(biāo)

（五）運(yùn)行hello world程序

點(diǎn)擊菜單欄Run，選擇main.dart，就可以運(yùn)行到模擬器了，運(yùn)行效果如圖所示，上面是一個(gè)AppBar，中間是文本，右下角是一個(gè)FloatingActionButton（后文簡稱FAB），點(diǎn)擊FAB，中間的文本數(shù)字加1：

下圖是我點(diǎn)擊2次之后的截的圖：

1.3.2 程序結(jié)構(gòu)

打開剛才創(chuàng)建的程序，切換到project視圖，看看項(xiàng)目的結(jié)構(gòu)：

【注意】 新建Flutter項(xiàng)目的結(jié)構(gòu)和原生android的工程結(jié)構(gòu)不一樣，我們不能用android那種多module 多l(xiāng)ib的結(jié)構(gòu)去創(chuàng)建module和lib，因?yàn)槲覀兊拇a都是在lib目錄里面完成的，除非要用到原生交互的代碼，你可以在android目錄里面去寫，然后在lib目錄里面去引用這些交互的代碼。

android目錄

這里存放的是Flutter與android原生交互的一些代碼，這個(gè)路徑的文件和創(chuàng)建單獨(dú)的Android項(xiàng)目的基本一樣的。不過里面的代碼配置跟單獨(dú)創(chuàng)建Android項(xiàng)目有些不一樣。

ios目錄

這里存放的是Flutter與ios原生交互的一些代碼。

lib目錄

這里存放的是Dart語言編寫的代碼，這里是核心代碼。不管是Android平臺(tái)，還是ios平臺(tái)，安裝配置好環(huán)境，可以把dart代碼運(yùn)行到對(duì)應(yīng)的設(shè)備或模擬器上面。剛才的示例中，就是運(yùn)行的lib目錄下的main.dart這個(gè)文件。
我們可以在這個(gè)lib目錄下面創(chuàng)建不同的文件夾，里面存放不同的文件，使用Dart語言寫我們的自己的代碼。

pubspec.yaml文件

這個(gè)是配置依賴項(xiàng)的文件，比如配置遠(yuǎn)程pub倉庫的依賴庫，或者指定本地資源（圖片、字體、音頻、視頻等）。
例如剛才創(chuàng)建的項(xiàng)目的pubspec.yaml里面的：cupertino_icons: ^0.1.2，表示項(xiàng)目要依賴cupertino_icons這個(gè)庫，版本號(hào)為0.1.2。

下載的三方庫存放在C盤，路徑為：C:\Users\用戶名\AppData\Roaming\Pub\Cache\hosted\pub.dartlang.org\XXX 注意：這個(gè)用戶名對(duì)應(yīng)的是你電腦的用戶名，比如我的是Administrator，有的人是admin，看你自己的電腦的設(shè)置了。后面那個(gè)XXX就是你想藥查找的對(duì)應(yīng)的庫的名字了。（AppData是一個(gè)隱藏目錄，需要先設(shè)置顯示隱藏文件才可以看到）下面給一張截圖示例一下：

下載的三方庫存放的本地路徑

1.3.3 打包過程

（1）創(chuàng)建keystore證書

如果您已經(jīng)創(chuàng)建過證書則可以跳過這一步。若要?jiǎng)?chuàng)建新的證書，請(qǐng)?jiān)诿钚兄袌?zhí)行如下命令：

keytool -genkey -alias flutterkey -keyalg RSA -keysize 1024 -keypass 123456 -validity 3650 -storepass 111111 -keystore D:\keytoolTest\flutterkeys.jks

其中部分參數(shù)意義如下。

• -genkey：創(chuàng)建一個(gè)默認(rèn)文件“.keystore”。
• keyAlias：就是上述命令行輸入的 -alias flutterkey，flutterkey就是keyAlias的值。
• -keyalg：指定密鑰的算法，我們這里指定是的RSA算法。
• -keysize：指定密鑰的長度。
• keyPassword：就是上述命令行輸入的-keypass 123456，這個(gè)123456就是keyPassword的值。
• storePassword：如果不在命令行里指定 -storepass 111111，命令行里提示要輸入的密鑰庫口令(有的JDK版本提示是keystore)，其實(shí)就是表示storePassword為111111。
• storeFile：證書存儲(chǔ)路徑，上例中我們存放證書的路徑為D:\keytoolTest\flutterkeys.jks。

（2）在應(yīng)用中引用keystore證書

打開我們創(chuàng)建的flutter項(xiàng)目，進(jìn)入android目錄，新建一個(gè)文件，命名為“key.properties”（該文件完整路徑目錄為“項(xiàng)目根路徑/android/key.properties”），可以填寫的配置有這些：

具體的配置如下（對(duì)照著上面的命令行填寫，你可以根據(jù)你的命令行設(shè)置的參數(shù)進(jìn)行修改）：

storePassword=111111
keyPassword=123456
keyAlias=flutterkey
storeFile=D:\keytoolTest\flutterkeys.jks

（3）在 gradle 中配置簽名選項(xiàng)

進(jìn)入“flutter項(xiàng)目根路徑/android/app/build.gradle” 文件，做一下更改，具體如下。

1.在末尾添加配置文件:

def keystorePropertiesFile = rootProject.file("key.properties")
def keystoreProperties = new Properties()
keystoreProperties.load(new FileInputStream(keystorePropertiesFile))

2.在最后面添加以下簽名配置：

signingConfigs {
  release {
    // 讀取key.properties配置文件里面的每一項(xiàng)
    keyAlias keystoreProperties['keyAlias']
    keyPassword keystoreProperties['keyPassword']
    storeFile file(keystoreProperties['storeFile'])
    storePassword keystoreProperties['storePassword']
  }
}

3.找到buildTypes，把release里面的內(nèi)容替換為：signingConfig signingConfigs.release，如圖所示：

（4）構(gòu)建 release 版應(yīng)用

在命令行使用:

1.cd flutter項(xiàng)目根路徑（例如：cd E:/flutter_demo )。

2.運(yùn)行flutter build apk (flutter build命令默認(rèn)使用--release)。

3.您應(yīng)用的release版本的APK會(huì)生成在flutter項(xiàng)目根路徑/build/app/outputs/apk/app-release.apk，例如我們項(xiàng)目名稱為“flutter_demo”，那么生成的apk路徑在這里：“E:/flutter_demo/build/app/outputs/apk/app-release.apk”。

（5）將 release 版本的 APK 安裝到設(shè)備上

使用命令行命令:

使用USB將Android設(shè)備連接到您的計(jì)算機(jī)。
cd flutter項(xiàng)目根路徑 (例如：cd E:/flutter_demo。然后運(yùn)行 flutter install