Flutter开发环境搭建

键盘侠黄金3号
397 阅读5分钟

在macOS上搭建Flutter开发环境

1.获取Flutter SDK

官网地址：flutter.dev/sdk-archive…

github：github.com/flutter/flu…

直接下载release包解压后，运行flutter doctor验证时会报错，需要使用 git clone 的方式 直接下载解压后移动到指定文件夹，配置好环境变量，运行flutter doctor不会报错。

选择的安装目录：

mkdir development
cd ~/development
git clone https://github.com/flutter/flutter.git -b stable

建议在 Apple Silicon 机器上使用 Flutter 2.5 或更高版本。您还必须有可用的Rosetta 2 

sudo softwareupdate --install-rosetta --agree-to-license

2.环境变量配置

  1. 打开文件~/.bash_profile，如果没有这个文件，先执行touch .bash_profile创建一个。
  2. 添加以下路径： 
    export PATH=~/development/flutter/bin:$PATH
  3. 如果使用的是zsh终端：
    1. 打开.zshrc文件 open ～/.zshrc
    2. 添加此行到末尾：source ～/.bash_profile
  4. 运行 source $HOME/.bash_profile 刷新当前终端窗口。
  5. 验证“flutter/bin”是否已在PATH中：echo $PATH

3. 安装Android Studio

  1. 下载地址：developer.android.google.cn/studio/#dow…
  2. 启动Android Studio，初次启动会安装最新的Android SDK、Android SDK平台工具和Android SDK构建工具。

安装Flutter和Dart插件

需要安装两个插件:

  • Flutter插件： 支持Flutter开发工作流 (运行、调试、热重载等)。
  • Dart插件： 提供代码分析 (输入代码时进行验证、代码补全等)。

安装Android SDK Command-line Tools

按照图示路径，勾选 Android SDK Command-line Tools，可以通过右上角的SDK Manager按钮快捷进入。

截屏2022-04-26 上午11.01.06.png

如果在Android Studio里面运行项目，控制台会提示安装失败；需要修改Flutter镜像地址，改成国内地址：

export PUB_HOSTED_URL=https://pub.flutter-io.cn
export FLUTTER_STORAGE_BASE_URL=https://storage.flutter-io.cn

将上面命令加到.bash_profile文件里

如果Flutter是老版本，Android Studio是新版本，flutter doctor可能会出现报错：

Flutter version 3.3.10
Android Studio version 2022.1
!Error: Unable to find bundled Java version

原因:
新版AndroidStudio里面JavaSDK目录由jre改为了jbr,而旧版Flutter查找JavaSDK路径依然使用的是jre。
解决方案：
创建软连接

cd /Applications/Android\ Studio.app/Contents
ln -s jbr jre

安装步骤：

  1. 启动Android Studio。
  2. 打开插件首选项 (macOS：Preferences>Plugins, Windows：File>Settings>Plugins)。
  3. 选择 Browse repositories…，选择 flutter 插件并点击 install。
  4. 重启Android Studio后插件生效。

创建Flutter应用

  1. 选择 File>New Flutter Project 。
  2. 选择 Flutter application 作为 project 类型, 然后点击 Next。
  3. 输入项目名称 (如 myapp)，然后点击 Next。
  4. 点击 Finish。
  5. 等待Android Studio安装SDK并创建项目。

上述命令创建一个Flutter项目，项目名为myapp，其中包含一个使用Material 组件 (opens new window)的简单演示应用程序。

在项目目录中，您应用程序的代码位于 lib/main.dart。

3.VS Code的配置与使用

VS Code是一个轻量级编辑器，支持Flutter运行和调试。

安装flutter插件

  1. 启动 VS Code。
  2. 调用 View>Command Palette…。
  3. 输入 ‘install’, 然后选择 Extensions: Install Extension action。
  4. 在搜索框输入 flutter ，在搜索结果列表中选择 ‘Flutter’, 然后点击 Install。
  5. 选择 ‘OK’ 重新启动 VS Code。
  6. 验证配置
    1. 调用 View>Command Palette…
    2. 输入 ‘doctor’, 然后选择 ‘Flutter: Run Flutter Doctor’ action。
    3. 查看“OUTPUT”窗口中的输出是否有问题

创建Flutter应用

  1. 启动 VS Code
  2. 调用 View>Command Palette…
  3. 输入 ‘flutter’, 然后选择 ‘Flutter: New Project’ action
  4. 输入 Project 名称 (如myapp), 然后按回车键
  5. 指定放置项目的位置，然后按蓝色的确定按钮
  6. 等待项目创建继续，并显示main.dart文件

连接设备运行Flutter应用

Window下只支持为Android设备构建并运行Flutter应用，而macOS同时支持iOS和Android设备。下面分别介绍如何连接Android和iOS设备来运行flutter应用。

连接Android模拟器

  1. 启动 Android Studio>Tools>Android>AVD Manager 并选择 Create Virtual Device.
  2. 选择一个设备并选择 Next。
  3. 为要模拟的Android版本选择一个或多个系统印象，然后选择 Next. 建议使用 x86 或 x86_64 image .
  4. 在 “Emulated Performance”下, 选择 Hardware - GLES 2.0 以启用 硬件加速
  5. 验证AVD配置是否正确，然后选择 Finish。
  6. 在“Android Virtual Device Manager”中，点击工具栏的 Run。模拟器启动并显示所选操作系统版本或设备的启动画面。
  7. 运行flutter run 启动您的设备。 连接的设备名是 Android SDK built for <platform>，其中 platform 是芯片系列，如 x86。

连接Android真机设备

要准备在Android设备上运行并测试Flutter应用，需要**Android 4.1（API level 16）**或更高版本的Android设备.

  1. 在Android设备上启用 开发人员选项 和 **USB调试 **。详细说明可在Android文档 中找到。
  2. 使用USB将手机插入电脑。如果设备出现调试授权提示，请授权你的电脑可以访问该设备。
  3. 在命令行运行 flutter devices 命令以验证Flutter识别您连接的Android设备。
  4. 运行启动你应用程序 flutter run。 默认情况下，Flutter使用的Android SDK版本是基于你的 adb 工具版本。 如果想让Flutter使用不同版本的Android SDK，则必须将该 ANDROID_HOME 环境变量设置为相应的SDK安装目录。

连接iOS模拟器

要准备在iOS模拟器上运行并测试Flutter应用，请按以下步骤操作：

  1. 在你的MAC上，通过 Spotlight 或以下命令找到模拟器： 
    open -a Simulator
  2. 根据你电脑屏幕大小，模拟高清屏iOS设备可能会溢出屏幕。可以在模拟器的 Window> Scale 菜单下设置设备比例。
  3. 运行 flutter run启动flutter应用程序。

连接iOS真机设备

要将Flutter应用安装到iOS真机设备，需要一些额外的工具和一个Apple帐户，还需要在Xcode中进行一些设置。

  1. 安装 homebrew (opens new window) （如果已经安装了brew,跳过此步骤）。
  2. 打开终端并运行如下这些命令: 
    brew update
brew install --HEAD libimobiledevice
brew install ideviceinstaller ios-deploy cocoapods
pod setup
  3. 遵循Xcode签名流程来配置您的项目:
  4. 运行 flutter run启动flutter应用程序。
avatar
文章
阅读
粉丝