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
为 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