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 之后的 masterbeta 获取 Beta 渠道的构建、替换为 dev 获取 Dev 渠道的构建。

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

  1. 设置环境变量

配置镜像站点的环境变量

对于 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,重启电脑即可完成配置。

  1. 运行 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

相关推荐
苏元5 小时前
Flutter + GetX:Dio 多接口 401 拦截后跳登录,避免重复跳转和 Controller 找不到问题
flutter
Mhua_Z6 小时前
使用 flutter_tts 的配置项
flutter
你听得到118 小时前
弹窗库1.1.0版本发布!不止于统一,更是全面的体验升级!
android·前端·flutter
RaidenLiu8 小时前
Riverpod 3 :掌握异步任务处理与 AsyncNotifier
前端·flutter
无知的前端11 小时前
Flutter 模型转JSON跳过零值/null
flutter·json
jiushiapwojdap1 天前
Flutter上手记:为什么我的按钮能同时在iOS和Android上跳舞?[特殊字符][特殊字符]
android·其他·flutter·ios
木子雨廷1 天前
Flutter 局部刷新小组件汇总
前端·flutter
恋猫de小郭1 天前
iOS 26 正式版即将发布,Flutter 完成全新 devicectl + lldb 的 Debug JIT 运行支持
android·前端·flutter
君赏1 天前
Petrel(雨燕)Flutter 热更新如何在我们项目应用
flutter
JulyYu2 天前
Flutter混合栈适配安卓ActivityResult
android·flutter