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

相关推荐
snail2012115 小时前
Flutter_boost混编开发系统MethodChannel之坑
flutter
leluckys5 小时前
flutter 专题 八十二 Flutter路由框架Fluro简介
开发语言·javascript·flutter
l软件定制开发工作室5 小时前
Flutter系列教程之(6)——Tab导航与ListView使用
flutter
null_null9999 小时前
flutter Running Gradle task ‘assembleDebug‘...
flutter
一人前行9 小时前
Flutter_学习记录_各个屏幕的适配
学习·flutter
江上清风山间明月9 小时前
一周掌握Flutter开发--3、布局与 UI 组件
flutter·column·listview·flex·gridview·row·layoutbuilder
蜉蝣之翼❉9 小时前
flutter: table calendar笔记
笔记·flutter
小墙程序员18 小时前
Flutter 教程(三)状态管理
flutter
火炎焱燚-1 天前
Flutter - 基础Widget
flutter