Flutter 介绍及安装使用

Flutter 安装

1. 镜像的配置

Flutter 源站在国内可能不太稳定，因此谷歌中国开发者社区（GDG）专门搭建了临时镜像，使得我们的 Flutter 命令行工具可以到该镜像站点下载所需资源。

使用方法

Flutter SDK 默认从 Github 获取更新，如您访问 Github 速度慢，可以在 Flutter 目录下运行命令：

git remote set-url origin https://mirrors.tuna.tsinghua.edu.cn/git/flutter-sdk.git

将上游设置为镜像站。

或者通过下面的命令，直接从 Master 构建渠道检出 Flutter 的 SDK：

git clone -b master https://mirrors.tuna.tsinghua.edu.cn/git/flutter-sdk.git
./flutter-sdk/bin/flutter --version

您也可以替换上述代码中 git clone -b 之后的 master 为 beta 获取 Beta 渠道的构建、替换为 dev 获取 Dev 渠道的构建。

在Flutter安装目录的flutter文件下找到flutter_console.bat，双击运行并启动flutter命令行，接下来，你就可以在Flutter命令行运行flutter命令了。

 

2. 设置环境变量

配置镜像站点的环境变量
对于 macOS 和 Linux 系统来说，我们通过文本编辑器，打开 ~/.bash_profile 文件，在文件最后添加以下代码，来配置镜像站点的环境变量：

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

而对于 Windows 系统来说，我们右键点击计算机图标，依次选择属性–> 高级系统设置–> 高级–> 环境变量，新建用户变量 PUB_HOSTED_URL，其值为 https://pub.flutter-io.cn；随后新建 FLUTTER_STORAGE_BASE_URL，其值为 https://storage.flutter-io.cn，重启电脑即可完成配置。

对于 macOS 与 Linux 系统，我们编辑 ~/.bash_profile 文件，把以下代码添加至文件最后，将 flutter 命令的执行路径追加到环境变量 PATH 中：

export PATH=~/Documents/flutter/bin:$PATH

对于 Windows 系统，我们在当前用户变量下 Path，以 ; 为分隔符，在其后追加 flutter 命令行的全路径，比如：C:\src\flutter\bin，重启电脑即可完成配置。

 

3. 运行 Flutter 项目
打开 Flutter 根目录，我们可以发现有一个 examples 文件夹，里面是一些基本的 flutter 示例。

首先，通过 Flutter 命令行运行的模式启动项目

进入 hello_world 目录，输入 flutter run 命令，启动项目：

=> hello_world git:(stable) flutter run
Multiple devices found:
macOS (desktop) • macos • darwin-x64 • macOS 13.0 22A380 darwin-x64
Chrome (web) • chrome • web-javascript • Google Chrome 106.0.5249.119
[1]: macOS (macos)
[2]: Chrome (chrome)
Please choose one (To quit, press "q/Q"):

此时会让我们选择使用的模拟器，由于我们开发的 web，所以可以直接选择 [2]: Chrome (chrome) 启动。

等待几秒种，一个熟悉的 hello world 大屏幕就出现在我们面前了。

更新代码后，终端输入 r 实现热更新。

至于 Android 和 iOS 的集成开发环境，大家可以去官网看一下安装使用教程哦～

Flutter 使用
Flutter 目录结构

├── README.md
├── android # 安卓相关代码
│ └── xxx
├── ios # ios相关代码
│ └── xxx
├── lib # 入口函数
│ └── main.dart
├── linux # linux系统相关文件
│ └── xxx
├── macos # macos系统相关文件
│ └── xxx
├── my_app.iml
├── pubspec.lock
├── pubspec.yaml
├── analysis_options.yaml
├── test # 测试代码
│ └── widget_test.dart
├── web # web系统相关代码
│ └── xxx
└── windows # windows系统相关代码
└── └── xxx

Flutter 运行命令

r：Hot reload（热更新）；
R：Hot restart（重新启动）；
h：查看更多命令；
s：截屏当前屏幕保存在当前位置；
v：打开DevTools弹出开发者工具；

 

把下载链接的https改成http