Flutter 配置及Demo

最近学习了一波Flutter，向大家分享一下经验。

本文主要讲述Flutter的SDK下载，环境配置以及如何成功运行，最后创建一个Demo。

Flutter中文网：Flutter: 为所有屏幕创造精彩 - Flutter 中文开发者网站 - Flutter

Flutter官方链接：Flutter documentation | Flutter

一、下载Flutter SDK

下载链接：Flutter SDK archive | Flutter

这里我下载的是最新版：3.16.9.

下载完之后解压最好不要放在C盘。

二、配置环境变量

我的是Windows11    win+r 输入sysdm.cpl  ->点击高级->点击下方的环境变量->在上方的用户变量那里选择新建，这里新建两个变量用于在构建Flutter时提升访问速度。

变量名：PUB_HOSTED_URL
变量值：https://pub.flutter-io.cn

变量名：FLUTTER_STORAGE_BASE_URL
变量值：https://storage.flutter-io.cn

最后配置SDK路径，

这里会弹出一个窗口，先不管它。我们进入到刚才的Flutter目录下的bin文件中。复制这里的路径

现在环境变量就配置好了。重启一下电脑，可以提前关注一下博主，防止找不到这篇文章。

三、打开Android Studio

在File->Settings->plugins->搜索Flutter（会提示让你下载Dart语言，下载完成之后Flutter也会自动下载）->重启Android Studio

win + r 输入cmd 然后输入flutter dector

这个指令适用于检查你的设备是否支持flutter.

这是我最终的样子。

然后输入

flutter config --android-sdk D:\Android\Sdk(注意这里是你的sdk地址)

这段指令用于运行时找到模拟器

最后重启

四、运行Demo

打开Android Studio 然后左上角点击Flie  点击open flie  接着打开解压后的Flutter下的examples文件点击hello-world。

在Android Studio里面左上角点击File->Settings->输入框搜索Flutter->输入自己的Flutter Sdk地址

然后点击Flie->Project Structure配置Project的Sdk和Jdk，建议不要太低，因为本身下载的Flutter就很高。

五、大功告成，最后解释一下这里面的结构

dart_tool

  这是一个dart工具文件夹，里面包含了flutter工程的构建信息，里面还有一个version文件，说明当前使用的flutter的版本，无需什么改动，了解就好。

.idea

  因为Android Studio 是由IDEA编辑器改过来的，因此会在创建项目时生成一个.idea文件夹，根据创建项目类型不同，它里面的内容就会不同，了解就好。

android

  Android的项目文件，作为Android开发者，想必你肯定知道这个android文件夹中的各个文件代表什么意思。

ios

  ios的项目文件，作为Android开发者，我不知道里面怎么操作的也很正常，嗯，暂时我们不考虑ios的问题。

lib

  这是Flutter应用源文件，里面有一个main.dart是程序入口文件，我们运行看到的第一个页面就在这里面，稍后会详细讲述这个main.dart文件。

test

  测试文件

.gitignore

  git忽略文件，就是这里面的文件在提交git时会忽略掉，一般来说就是一些编译时文件，例如build之类的。

.metadata

  用来记录Flutter 项目属性的的隐藏文件。

.packages

用来记录Flutter项目的包信息。

analysis_options.yaml

  静态分析文件。

hello_world.iml

  工程配置文件。

pubspec.lock

  记录当前项目实际依赖信息的文件。

pubspec.yaml

  管理第三方库及资源的配置文件。

README.md

  项目描述文件。

  基本的内容就说完了，这样看起来实际上Flutter工程就是一个同时内嵌了 Android 和 iOS 原生子工程的父工程，我们在 lib 目录下进行 Flutter 代码的开发，而某些特殊场景下的原生功能，则在对应的 Android 和 iOS 工程中提供相应的代码实现，供对应的 Flutter 代码引用。  Flutter 会将相关的依赖和构建产物注入这两个子工程，最终集成到各自的项目中。而我们开发的 Flutter 代码，最终则会以原生工程的形式运行。

题外话

如果后续发现速度还是提不上来可以试试下面的

清华Flutter镜像:

FLUTTER_STORAGE_BASE_URL="https://mirrors.tuna.tsinghua.edu.cn/flutter"
PUB_HOSTED_URL="https://mirrors.tuna.tsinghua.edu.cn/dart-pub"

上海交大Linux用户组:

使用反向代理方式建立的 Flutter 镜像，数据与站源实时同步。 Pub API 返回值未做处理，可能造成无法访问的情况。

PUB_HOSTED_URL=https://dart-pub.mirrors.sjtug.sjtu.edu.cn

FLUTTER_STORAGE_BASE_URL=https://mirrors.sjtug.sjtu.edu.cn

腾讯云开源镜像站:

定时（每天凌晨）与 TUNA 协会镜像同步，数据有延迟，访问速度有待反馈。

PUB_HOSTED_URL=https://mirrors.cloud.tencent.com/dart-pub

FLUTTER_STORAGE_BASE_URL=https://mirrors.cloud.tencent.com/flutter

CNNIC:
基于 TUNA 协会的镜像服务，数据策略与 TUNA 一致，通过非教育网的域名访问。

PUB_HOSTED_URL=http://mirrors.cnnic.cn/dart-pubFLUTTER_STORAGE_BASE_URL=http://mirrors.cnnic.cn/flutter