Leo's Blog

Flutter 开发环境搭建


前言:因为笔者使用的是MAC,所以我这里只介绍MAC系统的开发环境搭建,Windows及Linux系统请移步 Flutter 开发环境搭建


基于 Flutter 1.9.1 版本(下载

系统要求

  1. 操作系统: macOS(64-bit)
  2. 剩余磁盘空间: 2.8GB
  3. 命令行工具:
  • bash
  • curl
  • git 2.x
  • mkdir
  • rm
  • unzip
  • which

环境变量配置

获取Flutter SDK

  • Mac Flutter下载
  • 解压文件
    1
    2
    cd ~/development
    unzip ~/Downloads/flutter_macos_v1.9.1+hotfix.2-stable.zip

环境变量配置

  • 设置环境变量
1
$ export PATH="$PATH:`pwd`/flutter/bin" // 仅配置当前终端变量
1
2
# PATH_TO_FLUTTER_GIT_DIRECTORY 为Flutter SDK 存储目录
$ export PATH="$PATH:[PATH_TO_FLUTTER_GIT_DIRECTORY]/flutter/bin"
  • 刷新环境变量

    1
    $ source $HOME/.bash_profile
  • 验证环境变量配置

    1
    2
    $ echo $PATH
    $ which flutter

诊断开发环境 Flutter Doctor

这时候它会将你未安装的依赖一一列出,每个电脑缺少的依赖都不尽相同,例如下面这样,然后按照错误提示逐条修复

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
wangyonggangdeMacBook-Pro:~ LeoPoldCrossing$ flutter doctor
Doctor summary (to see all details, run flutter doctor -v):
[✓] Flutter (Channel beta, v1.9.1+hotfix.2, on Mac OS X 10.14 18A391, locale
zh-Hans-CN)
[!] Android toolchain - develop for Android devices (Android SDK version 28.0.3)
! Some Android licenses not accepted. To resolve this, run: flutter doctor
--android-licenses
[!] Xcode - develop for iOS and macOS (Xcode 10.1)
✗ CocoaPods installed but not initialized.
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 initialize CocoaPods, run:
pod setup
once to finalize CocoaPods' installation.
[✓] Android Studio (version 3.4)
[!] IntelliJ IDEA Ultimate Edition (version 2018.1.4)
✗ Flutter plugin not installed; this adds Flutter specific functionality.
✗ Dart plugin not installed; this adds Dart specific functionality.
[!] IntelliJ IDEA Ultimate Edition (version 2016.3.1)
✗ Flutter plugin not installed; this adds Flutter specific functionality.
✗ Dart plugin not installed; this adds Dart specific functionality.
✗ This install is older than the minimum recommended version of 2017.1.0.
[✓] VS Code (version 1.38.1)
[✓] Connected device (1 available)

国内镜像

由于一些flutter命令需要联网获取数据,如果您是在国内访问,由于众所周知的原因,直接访问很可能不会成功。 下面的PUB_HOSTED_URL和FLUTTER_STORAGE_BASE_URL是google为国内开发者搭建的临时镜像。详情请参考 Using Flutter in China

1
2
3
4
5
6
7
8
9
10
11
$ export PUB_HOSTED_URL=https://pub.flutter-io.cn(https://mirrors.sjtug.sjtu.edu.cn/)
$ export FLUTTER_STORAGE_BASE_URL=https://storage.flutter-io.cn
or
$ export PUB_HOSTED_URL= https://dart-pub.mirrors.sjtug.sjtu.edu.cn/
$ export FLUTTER_STORAGE_BASE_URL=https://mirrors.sjtug.sjtu.edu.cn/
$ export PATH="$PWD/flutter/bin:$PATH"
$ cd ./flutter
$ flutter doctor

平台配置

IOS设置

1. Xcode安装

  • Xcode 或通过 AppStore 安装最新版XCode
  • 配置XCode命令使用最新安装的Xcode版本(如果使用其他版本,请替换路径)

    1
    $ sudo xcode-select --switch /Applications/Xcode.app/Contents/Developer
  • 同意XCode条款,可通过以下命令操作

    1
    $ sodo xcodebuild -license

2. IOS 模拟器设置

  • 打开模拟器

    1
    $ open -a Simulator
  • 设备选择(64位,至少Iphone5s) Hardware - Device

  • 运行Flutter APP

    1
    2
    3
    4
    5
    $ flutter create my_app
    $ cd my_app
    $ flutter run

3. 真机运行

  • 安装并设置CocoaPods

    1
    2
    $ sudo gem install cocoapods
    $ pod setup
  • 添加账号及信任设备

    • 在Flutter项目根目录下运行 open ios/Runner.xcworkspace
    • 选择要运行项目的的设备
    • 左侧面板选择Runner工程
    • 选择Team

      1. Xcode 9 & 10, General > Signing > Team.
      2. Xcode 11, Signing & Capabilities > Team
    • 第一次运行IOS项目需要账号
      此处输入图片的描述

    • 信任开发者
      通用 - 设备管理
  • Flutter Run 跑起来

Android 配置

1. 安装AndroidStudio下载地址

2. Android真机设备

  • 系统版本要求
    Android 4.1以上
  • 设置
    • 打开开发调试模式
    • 运行flutter devices检测是否识别
  • Android模拟器
    AndroidStudio - Tools - Android - AVD Manager - Create Virtual Device 选择一个模拟器创建

    编辑器配置

    Android Studio

  • 安装Android Studio 下载地址
  • 安装Flutter插件
    Perferences - Plugin - 搜索Flutter - 安装
  • 安装Dart插件
    Perferences - Plugin - 搜索Dart - 安装

    VS Code

  • 安装VS Code 下载地址
  • 安装Flutter插件
    查看 - 命令面板 - 输入install - 选择Extensions: Install Extensions - 输入Flutter
  • 安装Dart插件
    查看 - 命令面板 - 输入install - 选择Extensions: Install Extensions - Dart
  • 检查设置
    查看 - 命令面板 - 输入Doctor - 选择Flutter: Run Flutter Doctor