Flutter开发环境的配置及真机如何联调

六二三
#Flutter
Page content

软件和硬件准备：

  • Flutter
  • Android Studio
  • VSCode (插件：Dart、Flutter、Gitlens)
  • Redmi Note 10 5G
  • USB 3.0（typeC）数据传输线
  • MacOS Pro

配置记录

使用Android Studio配置安卓sdk配置

这里安装Android Studio的过程就略过了，就把配置Android sdk的步骤记录下。

AS sdk设置 AS sdk设置 AS sdk设置

安装fluter并配置相关环境变量

// 安装flutter(我的电脑是intel芯，ARM架构请下载指定版本sdk)
$ wget -c https://storage.googleapis.com/flutter_infra_release/releases/stable/macos/flutter_macos_3.3.0-stable.zip
$ unzip flutter_macos_3.3.0-stable.zip
$ sudo mv flutter /usr/local/

// Android SDK环境变量设置：
$ cat ~/.zshrc
# ...(省略其他)
# Android SDK
export ANDROID_HOME=$HOME/Library/Android/sdk
export PATH=$PATH:$ANDROID_HOME/emulator
export PATH=$PATH:$ANDROID_HOME/tools
export PATH=$PATH:$ANDROID_HOME/tools/bin
export PATH=$PATH:$ANDROID_HOME/platform-tools
# Flutter SDK
export PATH="$PATH:/usr/local/flutter/bin"
export PUB_HOSTED_URL=https://pub.flutter-io.cn
export FLUTTER_STORAGE_BASE_URL=https://storage.flutter-io.cn


// 接受android sdk开发协议
$ flutter doctor --android-licenses

// 检测android的开发环境是否配置完整，
// 这里xcode会抛错，
// 没有关系，我们不需要打包ios。
$ flutter doctor
Doctor summary (to see all details, run flutter doctor -v):
[✓] Flutter (Channel stable, 3.0.5, on Mac OS X 10.15.7 19H15 darwin-x64, locale en-CN)
[✓] Android toolchain - develop for Android devices (Android SDK version 33.0.0)
[✗] Xcode - develop for iOS and macOS
    ✗ Xcode installation is incomplete; a full installation is necessary for iOS development.
      Download at: https://developer.apple.com/xcode/download/
      Or install Xcode via the App Store.
      Once installed, run:
        sudo xcode-select --switch /Applications/Xcode.app/Contents/Developer
        sudo xcodebuild -runFirstLaunch
    ✗ CocoaPods not installed.
        CocoaPods is used to retrieve the iOS and macOS platform side's plugin code that responds to your plugin usage
        on the Dart side.
        Without CocoaPods, plugins will not work on iOS or macOS.
        For more info, see https://flutter.dev/platform-plugins
      To install see https://guides.cocoapods.org/using/getting-started.html#installation for instructions.
[✓] Chrome - develop for the web
[✓] Android Studio (version 2021.2)
[✓] VS Code (version 1.71.0)
[✓] Connected device (2 available)
[✓] HTTP Host Availability
! Doctor found issues in 1 category.


$ flutter create myflutter   // 创建flutter项目
$ cd myflutter
$ flutter run       // 本地运行

执行flutter doctor访问github.com网络连接超时？

$ flutter doctor
VersionCheckError: Command exited with code 128: git fetch __flutter_version_check__ stable
Standard error: fatal: unable to access 'https://github.com/flutter/flutter.git/': Failed to connect to github.com port
443: Operation timed out

解决办法：众所周知的原因，git环境变量增加一个代理即可。

$ cat ~/.gitconfig|grep -A 2 http
[http]
    proxy = socks5://[PROXY-HOST]:[PORT]

好了，截止现在，我们的flutter软件层面就配置完成了，接下来，我们配置下安卓真机环境如何连接。

真机联调

开启安卓手机开发者模式及USB授权

  • Xiaomi HyperOS 开启办法：

红米Note10-5G

  • MIUI老版本的开启办法：

红米Note10-5G

以下部分为公共操作步骤：

红米Note10-5G

红米Note10-5G

各大厂商的安卓手机系统开发者模式开启方式可能略有不同，但是大体操作思路不会变化太大。等以上操作完成，就可以使用电脑远程连接操作手机了。

顺带这里说下，之前配置开发环境的时候踩到一个很无语的坑： 因为数据线的问题（可能是那种只能充电无法数据传输），变更完上面的配置，adb一直无法识别到目标手机，被坑了半个小时，最后尝试换了一个靠谱的数据线问题解决。

远程连接目标设备

$ brew install android-platform-tools
$ brew install scrcpy

$ adb devices     // 查看已挂载的设备
List of devices attached
BDDIHMDYHY9DRK95	device

$ scrcpy -s BDDIHMDYHY9DRK95 // 远程连接目标设备
scrcpy 1.24 <https://github.com/Genymobile/scrcpy>
/usr/local/Cellar/scrcpy/1.24/share/scrcpy/scrcpy-server:...file pushed, 0 skipped. 12.7 MB/s (41159 bytes in 0.003s)
[server] INFO: Device: Xiaomi 21091116AC (Android 12)
2022-09-03 13:18:08.461 scrcpy[15418:1065753] INFO: Renderer: metal
2022-09-03 13:18:08.474 scrcpy[15418:1065753] INFO: Initial texture: 1080x2400

具体效果如下：

adb远程

好了，搞定。接下来就是畅快的玩转flutter吧。

+++ 20231215 更新flutter版本遇到的问题 +++

doctor_error

解决办法：

JDK(17.0.9)、Android Studio(2022版)的SDK都更新了一遍依然没有解决，最后祀出大招搞定 –> 重新升级安装了AS 2023版本，并下载安装sdk文件即可。

update_as_sdk_100 update_as_sdk_101

参考文档：