ubuntu 安裝 flutter 開發環境

lsj1992g發表於2019-04-29

1、安裝flutter

cd /usr/local/

git clone -b master https://github.com/flutter/flutter.git

複製程式碼
  • 1.1 加入環境變數

# 編輯配置檔案
vi ~/.profile 
# 在末尾加入
export PATH=/usr/local/flutter/bin:$PATH
# 儲存退出,終端中執行 
source ~/.profile
# 執行 flutter doctor 這個過程需要下載Dart SDK, 需要翻牆 否則會失敗
flutter doctor
複製程式碼

2、 科學上網

藍燈github地址,

# 安裝
sudo gdebi lantern-installer-64-bit.deb 
# 執行
lantern
複製程式碼
  • 然後在執行 flutter doctor 進行檢測
    # 統一協議
    flutter doctor  --android-licenses
    複製程式碼

3、安裝android studio

3.1 首先要安裝32位依賴

sudo apt-get install libc6:i386 libncurses5:i386 libstdc++6:i386 lib32z1 libbz2-1.0:i386
複製程式碼

android 相關工具地址可以到這裡下載

3.2 安裝jdk

下載地址jdk-8u211-linux-x64.tar.gz

解壓縮 安裝

tar -zxvf jdk-8u211-linux-x64.tar.gz
mv jdk1.8.0_211/ /usr/lib/jvm/ 

vi ~/.profile
# 在最後插入:

export JAVAHOME=/usr/lib/jvm/jdk1.8.0_211
export CLASSPATH=.:$JAVAHOME/lib:$JAVAHOME/jre/lib:$CLASSPATH
export PATH=$JAVAHOME/bin:$JAVAHOME/jre/bin:$PATH

# 儲存退出,終端中執行 
    source ~/.profile
# 輸入: 
    java -version 
複製程式碼

3.3 安裝android sdk

SDK-TOOL 工具地址 sdk-tools-linux-4333796.zip

tar -zxvf android-sdk_r24.4.1-linux.tgz
mv android-sdk-linux/ /usr/local/android-sdk-linux/

vi ~/.profile
# 在最後插入:

export ANDROID_SDK_HOME=/usr/local/android-sdk-linux
export PATH=$PATH:${ANDROID_SDK_HOME}/tools
export PATH=$PATH:${ANDROID_SDK_HOME}/platform-tools

# 儲存退出,終端中執行 
    source ~/.profile
複製程式碼

3.4 下載 android studio

cd 下載
tar -zxvf android-studio-ide-183.5452501-linux.tar.gz 
sudo mv android-studio/ /usr/local/android-studio/
cd /usr/local/android-studio/
sh ./bin/studio.sh

複製程式碼
  • 安裝完成後,會自動開啟android-studio,
    • 點選右下角的 configure下拉框,選擇plugins 輸入flutter 安裝外掛,重啟。
    • 點選 congigure 下拉框選擇 AVD MANAGER 建立一個模擬器。

4、測試

執行 flutter doctor

[✓] Flutter (Channel master, v1.5.9-pre.44, on Linux, locale zh_CN.UTF-8)
[✓] Android toolchain - develop for Android devices (Android SDK version 28.0.3)
[✓] Android Studio (version 3.4)
[!] Connected device
    ! No devices available

! Doctor found issues in 1 category.

複製程式碼

4.1 建立專案

在android studio起始頁點選 start a new flutter project 會出現假死,大概1分鐘左右,根據電腦效能決定時間長短。等待就好啦。

tmd,建立專案卡這裡啦,等了十分鐘啦。

建立 android studio 快捷方式 開啟 tools -> Create Desktop Entry

建立一個模擬器就可以正常開發啦

4.2 使用vscode進行開發

4.2.1 vs code中 安裝外掛 flutter

建立專案

flutter create demo01
複製程式碼
All done!
[✓] Flutter is fully installed. (Channel master, v1.5.9-pre.44, on Linux, locale
    zh_CN.UTF-8)
[✓] Android toolchain - develop for Android devices is fully installed. (Android
    SDK version 28.0.3)
[✓] Android Studio is fully installed. (version 3.4)
[✓] Connected device is fully installed. (1 available)

In order to run your application, type:

  $ cd demo01
  $ flutter run

Your application code is in demo01/lib/main.dart.
複製程式碼

檢視模擬器列表

flutter emulator
複製程式碼
1 available emulator:

Nexus_5_API_26 • Nexus 5 • Google • Nexus 5 API 26

To run an emulator, run 'flutter emulators --launch <emulator id>'.
To create a new emulator, run 'flutter emulators --create [--name xyz]'.

You can find more information on managing emulators at the links below:
  https://developer.android.com/studio/run/managing-avds
  https://developer.android.com/studio/command-line/avdmanager

複製程式碼

執行模擬器

flutter emulators --launch <模擬器ID>
複製程式碼
flutter emulators --launch Nexus_5_API_26 • Nexus 5 • Google • Nexus 5 API 26
複製程式碼

執行專案

cd demo01/
flutter run
複製程式碼
  • 這時候其實可以用任意編輯器編輯程式碼,在終端輸入r可以熱載入。

R鍵:熱載入

P鍵:在虛擬機器中顯示網格

O鍵:切換Android和IOS模式

Q鍵:退出除錯

建立新的模擬器

flutter emulators --create [--name <模擬器ID>]
複製程式碼
# 建立
flutter emulators --create --name phone01
# 檢視
flutter emulators
# 結果
Nexus_5_API_26   • Nexus 5 • Google • Nexus 5 API 26
phone01

# 執行指定模擬器
flutter emulators --launch phone01

# 執行專案
flutter run 
# 給出提示
More than one device connected; please specify a device with the '-d <deviceId>'
flag, or use '-d all' to act on all devices.

Android SDK built for x86 • emulator-5554 • android-x86 • Android 8.0.0 (API 26)
(emulator)
Android SDK built for x86 • emulator-5556 • android-x86 • Android 8.0.0 (API 26)
(emulator)

複製程式碼
  • 看到模擬器頭部 有文字說明當前是哪一個
    ubuntu 安裝 flutter 開發環境
    知道是5556的這個所以繼續執行
flutter run -d emulator-5556
複製程式碼

接下來可以正常開發。

5 真機執行除錯

5.1 首先手機要開啟usb除錯功能,這個自己百度,插usb 授權電腦訪問手機,

# 執行flutter doctor 檢查
$ flutter doctor
Doctor summary (to see all details, run flutter doctor -v):
[✓] Flutter (Channel master, v1.5.9-pre.44, on Linux, locale zh_CN.UTF-8)
⣽Error retrieving device properties for ro.product.cpu.abi:
error: insufficient permissions for device: user in plugdev group; are your udev rules wrong?
See [http://developer.android.com/tools/device.html] for more information


 
[✓] Android toolchain - develop for Android devices (Android SDK version 28.0.3)
[✓] Android Studio (version 3.4)
[✓] Connected device (2 available)

• No issues found!

複製程式碼

5.1.1 看到有報錯:

⣽Error retrieving device properties for ro.product.cpu.abi:
error: insufficient permissions for device: user in plugdev group; are your udev rules wrong?
See [http://developer.android.com/tools/device.html] for more information
複製程式碼
cd /usr/local/android-sdk-linux
# 檢視說明檔案
vi SDK Readme.txt
# 文件中說明了 需要聯網才能進行一下平臺工具的安裝 如: including adb, dexdump, and others.To install Platform-tools
執行 android 選擇需要安裝的平臺,進行安裝。
複製程式碼

5.2 安裝成功

ubuntu 安裝 flutter 開發環境

輸入

adb devices
複製程式碼

仍然無法檢測到裝置

List of devices attached
47fcff73	no permissions (user in plugdev group; are your udev rules wrong?); see [http://developer.android.com/tools/device.html]
複製程式碼

5.3 全域性設定adb

 # 在PATH預設的bin目錄下,新建adb的軟連結,檢視sudo $PATH
 echo 'echo $PATH' | sudo sh 
 # /usr/local/sbin:/usr/local/bin:/usr/sbin:/usr/bin:/sbin:/bin:/usr/X11R6/bin
 # 進入目錄
 cd /usr/local/sbin
 # 設定軟連結
 sudo ln -s /usr/local/android-sdk-linux/platform-tools/adb
 # 重啟
 sudo adb kill-server
 sudo adb start-server
 # 檢測 
 輸入:  adb devices
 輸出:      List of devices attached
            47fcff73	unauthorized

複製程式碼

5.3.1 輸入 flutter doctor

Doctor summary (to see all details, run flutter doctor -v):
[✓] Flutter (Channel master, v1.5.9-pre.44, on Linux, locale zh_CN.UTF-8)
 
[✓] Android toolchain - develop for Android devices (Android SDK version 28.0.3)
[✓] Android Studio (version 3.4)
[!] Connected device

! Doctor found issues in 1 category.
複製程式碼
輸入 flutter devices
複製程式碼
# 顯示沒有授權,重新拔掉手機,再次接入允許授權
No devices detected.

Run 'flutter emulators' to list and start any available device emulators.

Or, if you expected your device to be detected, please run "flutter doctor" to diagnose potential issues, or visit https://flutter.dev/setup/ for troubleshooting
tips.

• Device 47fcff73 is not authorized.
You might need to check your device for an authorization dialog
複製程式碼
輸入: flutter device
輸出:
1 connected device:

MI 8 • 47fcff73 • android-arm64 • Android 9 (API 28)
複製程式碼

vscode 中 點選除錯,手機上 執行 繼續安裝 就可以在手機上除錯啦。

相關文章