Flutter系列教程——环境搭建(一)

Flutter系列教程——环境搭建(一)_第1张图片

一、Flutter 介绍

Flutter 是 Google 开源的 UI 工具包,帮助开发者通过一套代码库高效构建多平台精美应用,支持移动、Web、桌面和嵌入式平台。

Flutter 的主要组成部分包括:
  • 基础库
  • Skia 2D渲染引擎
  • 定制化设计风格的组件
Flutter 引擎

​ Flutter 的 引擎使用 C++ 开发,通过谷歌的 Skia 图形库提供底层渲染支持,亦提供平台相关的 SDK,例如 Android 和 iOS。

基础库

​ 基础库由 Dart 编写,提供了用 Flutter 构建应用所需的基本的类和函数。

组件

​ Flutter 是通过组织、创建不同的组件完成用户界面设计的。

定制化设计风格的组件

​ Flutter 框架包含了两套符合特定设计语言的组件。

​ Material Design 的组件实现的是同名的谷歌设计语言

​ Cupertino 的组件模仿了苹果 iOS 的设计。

1.1 系统要求:

名称 说明
编程语言 Dart
操作系统 Windows、macOS、Linux (iOS、Android、web)
官方网站 https://flutter.dev/docs
中文网站 https://flutter.cn/
源代码库 https://github.com/flutter/flutter

二、Flutter准备

2.1 下载 Flutter SDK:

macOS Flutter SDK 版本列表

2.2 解压文件

cd Desktop/GitHub
unzip ~/Downloads/flutter_macos_v1.9.1+hotfix.4-stable.zip

2.3 配置 Flutter 的 PATH 环境变量

export PATH="$PATH:`pwd`/flutter/bin"

# 验证 flutter 是否可用
flutter
Flutter系列教程——环境搭建(一)_第2张图片
image-20191016150620834.png

2.4 二进制文件预下载(可选)

# 可以通过下面这个命令预先下载 iOS 和 Android 的开发二进制文件
flutter precache

# 更多 precache 使用方式
flutter help precache 

2.5 升级 Flutter 版本

参考链接:https://flutter.cn/docs/development/tools/sdk/upgrading

2.6 环境配置检测

# 查看当前环境是否需要安装其他的依赖
flutter doctor
# 解决报错问题

# 1.同意 Android 许可协议
flutter doctor --android-licenses

# 2.安装 Flutter 插件,支持Flutter开发工作流 (运行、调试、热重载等)
# 3.安装 Dart 插件,提供代码分析 (输入代码时进行验证、代码补全等)
# 注意:(Flutter 会附带安装 Dart SDK,不需要再对 Dart 单独安装)
打开 Android Studio、IDEA、VSCode 安装 Flutter 插件
Flutter系列教程——环境搭建(一)_第3张图片

2.7 更新 PATH 环境变量(全局配置)

出现: flutter: command not found 问题

原因:设置环境变量的时候,直接在命令行通过 export 命令进行的,并没有全局设置,需要做如下修改。

# 将flutter/bin添加到.bash_profile或.zshrc文件中
export PATH="$PATH:[替换为FlutterSDK保存的路径]/flutter/bin"

# 修改.bash_profile文件,并更新环境变量 (适用于: Linux、macOS Mojave 之前的系统)
open -e $HOME/.bash_profile
source $HOME/.bash_profile

# 修改.zshrc文件,并更新环境变量 (适用于:macOS Catalina)
open -e $HOME/.zshrc
source $HOME/.zshrc
Flutter系列教程——环境搭建(一)_第4张图片

三、平台配置

macOS 可以开发 iOS、Android 和 Web(技术预览版正式发布)三个平台的 Flutter 应用。

iOS 开发环境

1. 安装 Xcode
2. 配置 Xcode command-line tools (可选)
# 安装多个 Xcode,可以通过命令配置配置
sudo xcode-select --switch /Applications/Xcode.app/Contents/Developer
3. Xcode 的许可协议(可选)
# 打开 Xcode,或者通过命令同意许可协议
sudo xcode-select --switch /Applications/Xcode.app/Contents/Developer
4. 配置 iOS 模拟器
# 运行模拟器
open -a Simulator

Android 开发环境

1. 安装 Android Studio
2. 配置 Android 模拟器
  • 激活机器上的 VM acceleration 选项。
  • 启动 Android Studio > Tools > Android > AVD Manager,然后选择 Create Virtual Device 选项。(只有在 Android 项目中才会显示 Android 子选项。)
  • 选择相应的设备并选择 Next 选项。
  • 选择一个或多个你想要模拟的 Android 版本的系统镜像,然后选择 Next 选项。推荐选择 x86 或者 x86_64 镜像。
  • 在 Emulated Performance 下选择 Hardware - GLES 2.0 选项来开启 硬件加速。
  • 确保 AVD 选项配置正确,并选择 Finish 选项。 想要查看上述步骤的更多详细信息,请查看 Managing AVDs 页面。
  • 在 Android Virtual Device Manager 中,点击工具栏中的 Run 选项,模拟器会启动并为你所选择的系统版本和设备显示出相应的界面。

Web 开发环境

1. 安装 Chrome

四、Flutter 常用命令

1. 通过 flutter --help 查看 Flutter 常用命令
常用命令:
  flutter create  创建项目
  flutter run [options]             运行项目
  
使用: flutter  [arguments]

全局选项:
-h, --help                  打印帮助信息
-v, --verbose               动态日志

-d, --device-id             目标设备 ID 或名称
    --version               查看命令版本
    --suppress-analytics    禁止分析报告
    --bug-report            提交 bug

可用的命令:
  analyze          分析 dart 代码
  attach           附加应用到连接中的设备
  build            构建应用
  channel          列出或者切换通道
  clean            删除 build/ 文件夹
  config           配置 flutter
  create           创建项目
  devices          列出已连接的设备
  doctor           检查 flutter 信息
  drive            Runs Flutter Driver tests for the current project.
  emulators        列出可用的设备
  format           格式化 Dart 文件
  fuchsia_reload   热加载
  help             显示帮助信息
  install          在连接的设备中安装 app
  logs             显示正在运行的应用的日志
  packages         包
  precache         Populates the Flutter tool's cache of binary artifacts.
  run              运行应用
  screenshot       为应用截图
  stop             停止运行
  test             Run Flutter unit tests for the current project.
  trace            Start and stop tracing for a running Flutter app.
  upgrade          更新 flutter

五、运行效果

1. 创建 Flutter 应用
# 创建新的 Flutter 应用
cd Desktop/GitHub
flutter create my_app
2. 启动 Flutter 应用
# 切换目录
cd Desktop/GitHub/my_app

# 注意:首先要启动模拟器 (iOS 或 Android)

# 可用模拟器设备列表
flutter devices

# 运行 Flutter 应用
flutter run -d 设备ID或名称
3. iOS、Android 运行效果

问题汇总

Q1. Got socket error trying to find package cupertino_icons at https://pub.dartlang.org.

# 修改flutter所需资源的访问方式
export PUB_HOSTED_URL=https://pub.flutter-io.cn
export FLUTTER_STORAGE_BASE_URL=https://storage.flutter-io.cn

Q2. Waiting for another flutter command to release the startup lock...

# 删除flutter lockfile文件重新启动
rm Desktop/GitHub/flutter/bin/cache/lockfile

你可能感兴趣的:(Flutter系列教程——环境搭建(一))