Конфигурация среды разработки Flutter "Focus on Flutter.1" (MacOS)

Flutter
Конфигурация среды разработки Flutter "Focus on Flutter.1" (MacOS)

предисловие

Эта статья посвящена загрузке, установке и настройке среды разработки Flutter в системе MacOS.

Информация о версии Flutter, на которой основана эта статья, выглядит следующим образом:

Flutter version: 2.2.1
Dart version: 2.13.1
Android Studio version: 4.2.1
Flutter Plugin version: 57.0.2
MacOS version: 11.4
Xcode: 12.5

Основные этапы настройки среды разработки Flutter:

  1. Получатьflutter sdk;
  2. Настройте необходимые переменные среды;
  3. Установите зависимости, связанные с Flutter, и проверьте, в порядке ли среда;

Получить Flutter SDK

скачать флаттер

скачатьflutter sdk, следующими способами:

  1. Официальная загрузка последняястабильная стабильная версияпакет исходного кода;
  2. клонОфициальный git-репозиторийстабильная ветка, этот метод можно постоянно обновлять [рекомендуется];

В этой статье используется второй метод, клонирование непосредственно из репозитория GitHub.

Клонируйте репозиторий флаттера локально с помощью следующей команды:

# 1.直接下载stable分支的仓库代码
$ git clone https://github.com/flutter/flutter.git -b stable

# 2.可以指定clone的深度,会屏蔽历史提交记录,下载会更快
# --depth 用来指定克隆的深度,1表示克隆最近的一次commit
$ git clone https://github.com/flutter/flutter.git -b stable --depth 1

Проблемы со скачиванием

1. git clone flutter обнаружил «SSL_read: соединение было сброшено»?

PS D:\devlibs\flutter\sdk> git clone -b stable https://github.com/flutter/flutter.git
Cloning into 'flutter'...
fatal: unable to access 'https://github.com/flutter/flutter.git/': OpenSSL SSL_read: Connection was reset
#【原因】
git客户端访问github没有走ssl的代理

#【解决办法】
# 方法一:把 https 连接改成 git【不推荐】
$ git clone -b stable git://github.com/flutter/flutter.git

# 方法二:在开启代理软件的前提下,手动配置git的代理端口【推荐】
# 设置代理的命令(注意代理端口“port”: 需要查看本机的代理端口)
$ git config --global http.proxy http://127.0.0.1:[port]
$ git config --global https.proxy http://127.0.0.1:[port]
# 如果之后取消git代理,通过如下命令如下进行重置:
$ git config --global --unset http.proxy 
$ git config --global --unset https.proxy 

Настроить переменные среды

  1. согласно сflutterисходный код, конфигурацияflutter sdkОбязательные переменные среды, чтобы.zshrcВ файле переменных среды добавьте следующую конфигурацию переменных среды:
#【环境变量】
# android sdk
export ANDROID_HOME=$HOME/Library/Android/sdk
export PATH=$PATH:$ANDROID_HOME
export PATH=$PATH:$ANDROID_HOME/tools
export PATH=$PATH:$ANDROID_HOME/platform-tools
export PATH=$PATH:$ANDROID_HOME/build-tools/28.0.3/

# Android NDK(flutter2.2.1需要依赖ndk 21.1.6352462,否则编译不过)
export ANDROID_NDK_HOME=$ANDROID_HOME/ndk/21.1.6352462
export PATH=$PATH:$ANDROID_NDK_HOME

# Flutter
# Flutter SDK
export FLUTTER_HOME=$PATH:$HOME/devlibs/flutter
export PATH=$PATH:$FLUTTER_HOME/bin
# 国内资源镜像
# flutter mirror
export FLUTTER_STORAGE_BASE_URL=https://storage.flutter-io.cn
# pub mirror	
export PUB_HOSTED_URL=https://pub.flutter-io.cn

# Dart SDK(flutter自带dart-sdk, 所以不需要额外下载)
export DART_HOME=$FLUTTER_HOME/bin/cache/dart-sdk
export PATH=$PATH:$DART_HOME/bin
  1. Проверьте настройку с помощью команды терминалаflutterДоступна ли переменная среды:
$ which flutter
/Users/userx/devlibs/flutter/bin/flutter
  1. проверка командной строкиflutterа такжеdartисходит ли команда из того жеbinсодержание.
$ which flutter dart
/Users/userx/devlibs/flutter/bin/flutter
/Users/userx/devlibs/flutter/bin/dart
# 查看dart版本
$ dart --version

Установите зависимости, связанные с Flutter

Предварительная загрузка двоичных файлов разработки

Инструмент командной строки flutter загружает двоичные файлы разработки для разных платформ.Если вам нужна закрытая среда сборки или вы используете ее при нестабильной доступности сети, вам может потребоваться предварительно загрузить двоичные файлы разработки для iOS и Android с помощью следующего командного документа:

$ flutter precache

Проверьте флаттер-среду

flutter doctor Команда используется для проверки того, в порядке ли среда Flutter, и установки недостающих зависимостей;

При первом запуске этой команды выполняются следующие операции:

  • Будут установлены основные зависимости, включая библиотеки dart и некоторые базовые библиотеки;
  • И проверьте конфигурацию среды студии Xcode и Android для флаттера, будут отображены результаты окончательной проверки и установки;

Выполните команду flutter doctor и следуйте инструкциям, пока не отобразится следующая информация, указывающая на завершение настройки:

[user:~xxx]$ flutter doctor
Doctor summary (to see all details, run flutter doctor -v):
[✓] Flutter (Channel stable, v1.0.0, on Mac OS X 10.14.2 18C54, locale zh-Hans-CN)
[✓] Android toolchain - develop for Android devices (Android SDK 28.0.3)
[✓] iOS toolchain - develop for iOS devices (Xcode 10.1)
[✓] Android Studio (version 3.3)
[✓] IntelliJ IDEA Ultimate Edition (version 2018.3.3)
[✓] VS Code (version 1.30.2)
[✓] Connected device (1 available)

• No issues found!

Если сообщается об ошибке, измените ее в соответствии с журналом ошибок;

$ flutter doctor
....
# 如: 初次配置环境时,会提示接受android flutter相关的licenses
$ flutter doctor --android-licenses

Конфигурация среды Android

  1. Android SDK: базовая конфигурация для запуска приложений Android, которая не будет здесь описываться.
  2. NDK: flutter2.2.1нужно зависеть отndk 21.1.6352462, иначе будет выдано сообщение об ошибке при компиляции модуля android отдельно в Android Studio.

Обновление версии флаттера

Проверьте и обновите версию флаттера с помощью следующей команды:

$ flutter upgrade

Общие команды флаттера

# 帮助命令
flutter config -h

#【flutter环境信息】
# 检查flutter环境是否配置好
flutter doctor
# 查看系统中flutter相关环境的配置
flutter doctor -v
# 检查并升级flutter
flutter upgrade 

#【分支】
# 查看当前使用的分支:
flutter channel
# 切换分支:
# 切换beta分支
flutter channel beta 
# 切换master分支
flutter channel master

#【更新】
# 获取pubspec.yaml文件中列出的所有依赖包:
flutter packages get
# 获取pubspec.yaml文件中列出的所有依赖包的最新版本
flutter packages upgrade 

#【设备相关】
# 查看flutter识别的设备
$ flutter devices 

#【运行应用】
flutter run

среда программирования IDE

В качестве IDE для кодирования рекомендуется использовать Android Studio.Android Studio предоставляет Flutter все возможности визуальной разработки IDE.В конце концов, это настраиваемая IDE от Google. Конечно, вы также можете использовать vscode или IDEA.

Будь то Android Studio, IDEA, vscode, вам нужно всего лишь установить плагины flutter и dart, чтобы завершить настройку среды программирования IDE.

Создать проект

создание командной строки

# 创建flutter项目(Android模块默认使用Kotlin并支持AndroidX,iOS模块默认使用Swift)
$ flutter create myapp
# 相当于
$ flutter create -i swift -a kotlin myapp
# 自定义包名的创建方式
$ flutter create --org com.focus -i swift -a kotlin myapp
# 创建flutter项目,Android端基于java, ios端基于object-c(--org 标识组织)
$ flutter create --org com.focus -i objc -a java myapp

# 支持AndroidX的创建方式(flutter 2.0以前默认创建的Android模块如果要使用AndroidX,需要手动配置)
$ flutter create --org com.focus -i swift -a kotlin --androidx myapp

# 检查设备是否在运行
$ flutter devices
# 运行应用程序:
$ cd myapp
$ flutter run

# flutter run 后命令界面常用快捷键
# 热重载
r
# 热重载重启
R
# 显示网格,这个可以很好的掌握布局情况
p
# 切换android和ios的预览模式
o 
# 退出调试预览模式
q 

Android Studio

Android Studio предоставляет Flutter полный визуальный способ создания проектов, а также очень удобную среду кодирования и инструменты отладки.

Когда Android Studio создает проект Flutter, просто следуйте инструкциям в визуальном интерфейсе и выберите необходимые функции, чтобы быстро завершить создание проекта.

Упаковка приложения

Упаковка Android-приложения

  1. Создание подписи из командной строки
# 1> 先确定秘钥信息如下:
keystore password: focus1024
alias: focus_flutter
key password: focus2048
validity(years): 100
first and last name(姓名): thlllzq
organizational unit(组织): focus
organization:focus
city and locality(城市和地区):shanghai
state or province(州或省):shanghai
country code(国家代码): CHN
--------------------
# 2> 再通过命令行创建秘钥:
# 输入以下keytool命令生成jks秘钥,并按提示填写额外的配置信息,最后以Y结束。
$ keytool -genkey -v -keystore keystore.jks -keyalg RSA -keysize 2048 -validity 36500 -alias focus_flutter -storepass focus1024 -keypass focus2048
  1. Настройте информацию о подписи упаковки приложения для модуля Android;
# 1.在“project/app/”目录下创建“key.properties”秘钥属性文件,并配置如下配置:
--------------------
# key.properties
storePassword=focus1024
keyPassword=focus2048
keyAlias=focus_flutter
storeFile=keystore.jks
--------------------

# 2 build.gradle中配置release签名和编译类型
# build.gradle
--------------------
# 在android{}配置信息前,加载keystore.jks的配置信息
def keystoreProperties = new Properties()
def keystorePropertiesFile = rootProject.file('app/key.properties')
if (keystorePropertiesFile.exists()) {
    keystoreProperties.load(new FileInputStream(keystorePropertiesFile))
}
...
android {
    signingConfigs {
        # 读取秘钥配置文件中的签名秘钥
        release {
            keyAlias keystoreProperties['keyAlias']
            keyPassword keystoreProperties['keyPassword']
            storeFile keystoreProperties['storeFile'] ? file(keystoreProperties['storeFile']) : null
            storePassword keystoreProperties['storePassword']
        }
    }
    buildTypes {
        release {
            signingConfig signingConfigs.release
        }
    }
}
--------------------
  1. Пакет
# “flutter build”默认打release包,是包含所有目标ABI编译代码的胖apk,初始项目打包大小为15.4MB.
$ flutter build apk
# “--split-per-abi”设置按不同目标ABI分别打包,不同ABI的包更小。
$ flutter build apk --split-per-abi
# 分包打包,包含如下几个类型apk,初始项目打包,单个包大小约为5MB.
[project]/build/app/outputs/apk/release/app-armeabi-v7a-release.apk
[project]/build/app/outputs/apk/release/app-arm64-v8a-release.apk
[project]/build/app/outputs/apk/release/app-x86_64-release.apk
# 指定ABI架构打包
$ flutter build apk --target-platform android-arm
  1. Команда устанавливает apk на устройство:
# 默认安装的是root/build/app/outputs/app.apk
# (打debug或release包会在同一位置生成app.apk文件)
flutter install

Многоплатформенная работа

iOS

эмулятор

# 打开IOS模拟器
$ open -a Simulator
# 运行应用到模拟器
$ flutter run

настоящая машина

Чтобы запустить проект Flutter на реальном устройстве iOS, вам необходимо настроить информацию о разработчике для модуля ios в Xcode.

Вам нужно открыть модуль ios с помощью Xcode и выполнить следующие шаги, чтобы запустить приложение.

# project->flutter->open iOS module in Xcode
# Flutter 支持 iOS 8.0+

1. 在Xcode中,打开App的iOS目录中的 Runner.xcworkspace。
2. 在Xcode的项目导航栏中选择Runner,在Runner配置窗口来配置App:
-----------------------
->[General]
    Display Name: 设置应用名称
    Bundle Identifier: 设置包名(AppID)
->[Signing & Capabilities]
    Team: 设置Apple开发者账号
->[Info】
		Bundle name:设置应用名
-----------------------
3. 连接iPhone手机,手机会提示信任;
3. 安装应用:输入命令“flutter run”即可将应用安装到iPhone设备。
4. 安装信任问题:第一次安装到手机无法打开,会提示到设置里设置信任后再运行!!!
-----------------------
iPhone设置信任:设置->通用->设备管理->选择信任的开发者;
-----------------------

Android

Здесь предполагается, что вы настроили SDK, JDK, Android-Studio и другие инструменты, необходимые для Android, и ваша среда может запускать приложения Android;

эмулятор

Создание эмулятора Android Studio avd: Android 4.1 (уровень API 16) или выше x86 или x86_64 Устройство-эмулятор Android, эмулируемая производительность Чтобы выбрать «Оборудование» — GLES 2.0, чтобы включить аппаратное ускорение.

Ниже приведены соответствующие команды для работы с эмулятором Android:

#【模拟器】
# android模拟器列表
$ ~/Library/Android/sdk/tools/./emulator -list-avds
# 打开一个android模拟器
$ ~/Library/Android/sdk/tools/./emulator @PixelXL
$ ~/Library/Android/sdk/tools/./emulator -netdelay none -netspeed full -avd PixelXL
$ ~/Library/Android/sdk/tools/./emulator -netdelay none -netspeed full @PixelXL
# -netdelay none :设置模拟器的网络延迟时间,默认为none,就是没有延迟。
# -netspeed full: 设置网络加速值,full代表全速。

Запустите проект на устройстве Android:

# 查看flutter识别的设备
$ flutter devices 
# 运行启动您的应用程序 
$ flutter run

issues

  • Обновление флаттера или пакеты флаттера получают отчет о конфликте Проблема с блокировкой !!!
waiting for another flutter command to release the startup lock...
# 解决办法:删除flutter/bin/cache/lockfile文件重新执行命令即可。
  • флаттер не может подключиться к устройству
连锁问题:flutter doctor 检查卡住;
解决方式:可尝试杀掉所有dart进程,重新检查环境即可:
$ killall -9 dart

История версий флаттера

2.2.1

  • Версия NDK, от которой зависит модуль Android, повышена до21.1.6352462, эта версия должна быть установлена ​​локально, в противном случае открытие модуля Android с помощью Android Studio будет компилироваться, но ошибка отсутствуетNDK 21.1.6352462.