Flutter开发之——macOS上搭建Flutter开发环境

发表于 分类于 ， ， 阅读时长 ≈ 2 分钟

一 概述

  • macOS上镜像配置
  • 获取Flutter SDK
  • 平台设置

二 macOS上镜像配置

2.1 为何配置镜像

由于在国内访问Flutter有时可能会受到限制，Flutter官方为中国开发者搭建了临时镜像

2.2 如何配置镜像

打开/Users/zxc下的.bash_profile文件(如果没有请先创建)

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

三 获取Flutter SDK

3.1 下载Flutter SDK

  • Stable channel (macOS)下载Flutter SDK

  • 将下载后的Flutter SDK移动到某个位置(如:资源库/flutter)

  • 添加flutter到path中(.bash_profile)

    1
    2
    Flutter=/Users/zxc/Library/flutter
    export PATH=$Flutter/bin:$PATH

  • 在terminal(终端)中输入 source .bash_profile (使用刚才更新之后的内容)

3.2 运行flutter doctor

  • 打开终端，输入下面的指令，检查是否需要安装其他依赖

    1
    flutter doctor

3.3 运行错误解决

3.3.1 Some Android licenses not accepted

在终端输入

1
flutter doctor --android-licenses

3.3.2 CocoaPods not installed

在终端输入

1
sudo gem install cocoapods

安装异常显示

1
2
ERROR:  Could not find a valid gem 'cocoapods' (>= 0), here is why:
          Unable to download data from https://rubygems.org/ - too many connection resets (https://rubygems.org/specs.4.8.gz)

删除旧的连接

1
gem sources --remove https://rubygems.org/

添加新的连接

1
gem sources -a https://gems.ruby-china.com

检查设置

1
gem sources -l

再次执行指令

再次执行flutter doctor指令

3.3.3 Flutter&Dart plugin not installed

打开android studio开发之工具，依次打开：android studio—>Preferences—>Plugins，输入Flutter安装

点击：Preferences—>Languages&Frameworks—>Dart&Flutter，配置Dart和Flutter路径

再次执行flutter doctor检测

3.3.4 VS Code Flutter extension not installed

打开VS Code，搜索flutter插件安装

安装flutter插件后，再次执行flutter doctor

3.4 更新环境变量

打开(或创建) $HOME/.bash_profile

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
# java
JAVA_HOME=/Library/Java/JavaVirtualMachines/jdk1.8.0_241.jdk/Contents/Home
export CLASSPATH=.:$JAVA_HOME/lib/dt.jar:$JAVA_HOME/lib/tools.jar
export PATH=$JAVA_HOME/bin:$PATH

# android
ANDROID_HOME=/Users/zxc/Library/Android/sdk 
export PATH=$ANDROID_HOME:$PATH
export PATH=$ANDROID_HOME/tools:$PATH
export PATH=$ANDROID_HOME/platform-tools:$PATH

#gradle
GRADLE_HOME=/Users/zxc/.gradle/wrapper/dists/gradle-5.4.1-all/3221gyojl5jsh0helicew7rwx/gradle-5.4.1
export PATH=${PATH}:${GRADLE_HOME}/bin

#Flutter
export PUB_HOSTED_URL=https://pub.flutter-io.cn
export FLUTTER_STORAGE_BASE_URL=https://storage.flutter-io.cn
Flutter=/Users/zxc/Library/flutter
export PATH=$Flutter/bin:$PATH

四 创建项目

4.1 利用VS Code创建Flutter项目

查看—>命令面板—>输入flutter，选择New Project，输入项目名称并创建项目

4.2 将项目运行到模拟器上

4.2.1 将项目运行到iOS模拟器上

打开一个iOS模拟器

1
open -a Simulator

依次点击：运行—>Start Debugging

4.2.2 将项目运行到android模拟器上

打开一个android模拟器
依次点击：运行—>Start Debugging

或者终端执行flutter run