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

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

一 概述

本文介绍在Linux上快速搭建Flutter开发环境

  • 配置镜像
  • 获取Flutter SDK
  • Android设置及项目创建

二 配置镜像

2.1 配置镜像原因

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

2.2 国内镜像配置

  • 打开/etc/profile文件，将下面的内容添加到profile中

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

  • 执行下面的执行，保存文件修改

    1
    source /ect/profile

三 获取Flutter SDK

3.1 Flutter SDK 下载

  • 选择Flutter SDK下载

3.2 解压flutter SDK文件

  • 下载后的文件名为flutter_linux_1.22.5-stable.tar.xz

  • 首先执行如下指令，将tar.xz文件解压为tar文件

    1
    xz -d flutter_linux_1.22.5-stable.tar.xz

  • 再执行如下指令，将tar文件解压为文件夹

    1
    tar xvf flutter_linux_1.22.5-stable.tar

3.3 配置Flutter相关工具到path中

  • 打开/etc/profile文件，在里面添加如下内容

    1
    export PATH=/home/pgzxc/software/flutter/bin:$PATH

  • 使之生效

    1
    source /etc/profile

四 运行flutter doctor

4.1 请先检查是否已安装git

1
git --version

如果未安装，请先执行如下指令

1
sudo apt-get install git

4.2 运行 flutter doctor

4.2.1 执行flutter doctor前，会下载dart，请确认已安装curl

1
sudo apt-get install curl

4.2.2 执行flutter doctor

4.3 解决错误问题

4.3.1 Android license status unknown

按照提示，执行指令

1
flutter doctor --android-licenses

出现提示时，输入y

1
2
Accept? (y/N): y
All SDK package licenses accepted

执行flutter doctor后，提示信息如下

1
2
3
4
5
6
7
8
9
10
11
12
13
Doctor summary (to see all details, run flutter doctor -v):
[✓] Flutter (Channel master, 1.26.0-2.0.pre.402, on Linux, locale zh_CN.UTF-8)
[✓] Android toolchain - develop for Android devices (Android SDK version
    30.0.3)
[✗] Chrome - develop for the web (Cannot find Chrome executable at
    google-chrome)
    ! Cannot find Chrome. Try setting CHROME_EXECUTABLE to a Chrome
      executable.
[!] Android Studio (not installed)
[!] Connected device
    ! No devices available

! Doctor found issues in 3 categories.

4.3.2 Cannot find Chrome

下载chrome

1
2
wget https://dl.google.com/linux/direct/google-chrome-stable_current_i386.deb //32位版本
wget https://dl.google.com/linux/direct/google-chrome-stable_current_amd64.deb //64位版本

安装chrome

1
2
sudo dpkg -i google-chrome*
sudo apt-get -f install

执行flutter doctor后

1
2
3
4
5
6
7
8
9
Doctor summary (to see all details, run flutter doctor -v):
[✓] Flutter (Channel master, 1.26.0-2.0.pre.402, on Linux, locale zh_CN.UTF-8)
[✓] Android toolchain - develop for Android devices (Android SDK version
    30.0.3)
[✓] Chrome - develop for the web
[!] Android Studio (not installed)
[✓] Connected device (1 available)

! Doctor found issues in 1 category.

4.3.3 Android Studio (not installed)

配置flutter --android-sdk

1
2
3
4
5
6
7
# android
export ANDROID_HOME=/home/pgzxc/Android/Sdk
export PATH=$ANDROID_HOME:$PATH
export PATH=$ANDROID_HOME/tools:$PATH
export PATH=$ANDROID_HOME/platform-tools:$PATH
flutter config --android-sdk="/home/pgzxc/Android/Sdk"
flutter config --android-studio-dir="/home/pgzxc/software/android-studio"

配置后，运行flutter doctor，信息如下

1
2
3
4
5
6
7
8
Doctor summary (to see all details, run flutter doctor -v):
[✓] Flutter (Channel master, 1.26.0-2.0.pre.402, on Linux, locale zh_CN.UTF-8)
[✓] Android toolchain - develop for Android devices (Android SDK version 30.0.3)
[✓] Chrome - develop for the web
[✓] Android Studio
[✓] Connected device (1 available)

• No issues found!

五 Android设置及项目创建

5.1 安装IDE flutter 插件

打开Android Studio，依次点击：File—>Settings—>Plugins—>搜索flutter

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

1
2
Dart：/home/pgzxc/software/flutter/bin/cache/dart-sdk
Flutter:/home/pgzxc/software/flutter

5.1 IDE(android studio)创建项目

依次点击：File—>New—>New Flutter Project—>Flutter Application，配置项目信息

执行如下指令，开启Web支持

1
flutter config --enable-web

运行项目到chrome浏览器上