本文基于Mac系統來搭建Flutter開發環境
一、安裝Android Studio
使用Android Studio作為Flutter的開發工具
目前使用是3.5版本
官網下載自備梯子
國內可以訪問:https://developer.android.google.cn/studio
由于我是做Android 開發的,Android Studio 安裝過程就不詳細演示了,安裝完打開,按照提示下載SDK和一些工具即可~
二、安裝 Xcode
在App Store 搜索 Xcode 安裝打開即可
Xcode 是ios/mac的軟件開發工具,Flutter 需要用Xcode打包才能安裝到ios設備上。
三、安裝Flutter
Flutter 國內站點不太穩定,可以通過環境變量配置其它穩定的站點,mac操作如下
控制臺輸入命令打開 ~/.bash_profile
open -e ~/.bash_profile
添加這兩個變量
export PUB_HOSTED_URL=https://pub.flutter-io.cn
export FLUTTER_STORAGE_BASE_URL=https://storage.flutter-io.cn
刷新環境變量
source ~/.bash_profile
如果是Windows 系統,右鍵點擊計算機圖標,依次選擇屬性–> 高級系統設置–> 高級–> 環境變量,新建用戶變量 PUB_HOSTED_URL
,其值為https://pub.flutter-io.cn;隨后新建 FLUTTER_STORAGE_BASE_URL
,其值為https://storage.flutter-io.cn,重啟電腦即可完成配置。
下載Flutter
下載最新穩定版
為了可以在命令行中執行 flutter 命令,配置環境變量
mac/linux 打開~/.bash_profile
open -e ~/.bash_profile
添加
export PATH=~/Documents/flutter/bin:$PATH
路徑換成你自己的。
Windows 系統則是把Flutter 的bin目錄配置到環境變量的 PATH后面即可
切換到開發分支
flutter channel dev
檢查環境
flutter doctor
如圖,我已經在Android Studio中安裝了 Dart和Flutter插件(如果沒有安裝則按照提示去安裝),只差一個ios的工具沒安裝,按提示安裝即可~
四、創建flutter模塊
命令行的方式
創建命令
flutter create -t module flutter_demo
運行
flutter run
如果環境配置正確,并且連接Android設備,Flutter項目就會運行到設備上。
五、創建插件
flutter create --org com.example --template=plugin --platforms=android,ios -a kotlin plugin_hello
六、集成插件
編輯pubspec.yaml文件
dependencies:
flutter:
sdk: flutter
# The following adds the Cupertino Icons font to your application.
# Use with the CupertinoIcons class for iOS style icons.
cupertino_icons: ^1.0.2
plugin_hello:
path: plugins/plugin_hello
執行flutter pub get 即可
七、Flutter集成到Android項目
這里只說源碼集成的方式
Android項目(FlutterApp)跟Flutter項目(Flutter_2021)是兩個庫,我們要在Android項目中,用git submodule
命令依賴Flutter項目
git submodule add https://github.com/lanshifu/flutter_2021.git
cd flutter_2021
flutter pub get
//執行下面命令同步submodule代碼
git submodule update --init --recursive
修改Android項目的setting.gradle
include ':app'
rootProject.name = "FlutterApp"
#下面是新增的配置
setBinding(new Binding([gradle: this]))
evaluate(new File(settingsDir, 'flutter_2021/.android/include_flutter.groovy'))
include ':flutter_2021'
project(':flutter_2021').projectDir = new File('flutter_2021/')
注意:
Flutter項目名/.android/include_flutter.groovy
路徑不要寫錯,寫錯會編譯失敗,而且報錯并不是這里。
app的build.gradle添加依賴
implementation project(':flutter')
然后讓MainActivity繼承FlutterActivity
class MainActivity : FlutterActivity() {
}
先不重寫onCreate方法,運行可以看到效果。
配置和目錄如上圖所示。
踩坑
如果項目中有用到版本管理ext,可能遇到報錯如下:
這個報錯看了半天很無解,其它一個項目是正常的,看看源碼位置
最后經過艱難排查,發現是版本管理ext里定義了一個android,讀到的是配置的這個android,這個里面確實是沒有applicationVariants對象...
排查這種問題,可以通過源碼斷言 assert ,appProject.android.applicationVariants != null
,如果不通過,會在控制臺輸出這個android對象。
aar集成方式和IOS集成方式可以參考如下官方鏈接: