1、Flutter_初体验_创建第一个应用_AndroidStudio_windows

时间:2022-12-17 15:42:02

1.前言

至于 Flutter 是啥,我就不在这啰嗦了,下面以 windows 为例,展示一下从安装 Flutter 到运行 APP 整个过程;

2.安装 Flutter

2.1、中文介绍文档:https://flutterchina.club/get-started/install/ (我的阅读方式)

   外网介绍文档:https://flutter.io/get-started/install/

2.2、Flutter SDK 下载地址:https://flutter.dev/docs/get-started/install/windows(我的下载方式)

   Github Flutter SDK 地址:https://github.com/flutter/flutter

看网上说用 git (git clone -b dev https://github.com/flutter/flutter.git),我偏不!

2.3、下载下来解压后的文件目录(我的目录)

1、Flutter_初体验_创建第一个应用_AndroidStudio_windows

2.4、配置环境变量,方便使用,配置到 path 中

1、Flutter_初体验_创建第一个应用_AndroidStudio_windows

配置上国内镜像:

PUB_HOSTED_URL=https://pub.flutter-io.cn

FLUTTER_STORAGE_BASE_URL=https://storage.flutter-io.cn

1、Flutter_初体验_创建第一个应用_AndroidStudio_windows

1、Flutter_初体验_创建第一个应用_AndroidStudio_windows

2.5、额外补充:配上你的 sdk tool,在接下来执行 flutter doctor 过程中需要;我配的有点乱,有的还多余了,将就看。

1、Flutter_初体验_创建第一个应用_AndroidStudio_windows

1、Flutter_初体验_创建第一个应用_AndroidStudio_windows

2.6、配置好环境变量后,在命令行执行 :flutter doctor

1、Flutter_初体验_创建第一个应用_AndroidStudio_windows

注意:
[√]这个是安装OK的,[X]是需要安装的,或者者是已安装但是没有运行起来的。
这里面有几项需要注意的内容:
(1)Flutter 这是Flutter工具,就是刚才git下载的那个。
(2)Android工具链,这里指的是SDK,会标注出SDK的最大版本号。
(3)Android Studio 3.0版本(这个是下载安装的版本)
(4)Connected devices 已连接的设施,能是模拟器,也能是真机,假如已连接会显示出来。

2.7、安装 Android Studio 插件:flutter + dart

右上角:file > setting > plugins >

1、Flutter_初体验_创建第一个应用_AndroidStudio_windows

1、Flutter_初体验_创建第一个应用_AndroidStudio_windows

1、Flutter_初体验_创建第一个应用_AndroidStudio_windows

2.8、上边插件装好、重启AS后、接下来就是配置 flutter sdk 路径了,毕竟这两个插件只是辅助你的,但是人家还不知道 sdk 路径在哪呢。

1、Flutter_初体验_创建第一个应用_AndroidStudio_windows

还记得上边我的 flutter sdk 的解压路径吗。配置上这个路径后,dart 就不用配置了,他会自动给你配置上:

1、Flutter_初体验_创建第一个应用_AndroidStudio_windows

至此安装 flutter 结束了。

3.创建 Flutter APP

接下来就是创建 flutter 项目了,file > new > new Flutter Project...

1、Flutter_初体验_创建第一个应用_AndroidStudio_windows

1、Flutter_初体验_创建第一个应用_AndroidStudio_windows

1、Flutter_初体验_创建第一个应用_AndroidStudio_windows

1、Flutter_初体验_创建第一个应用_AndroidStudio_windows

注意:这里能支持ios和kotlin,假如需要的话能勾上。

1、Flutter_初体验_创建第一个应用_AndroidStudio_windows

在这里,我用的我自己的真机,创建好后会自动识别的,跟创建一个普通安卓项目运行差不多,下面是我的真机运行结果:

1、Flutter_初体验_创建第一个应用_AndroidStudio_windows

博客地址:https://www.cnblogs.com/niceyoo

本文地址:https://www.cnblogs.com/niceyoo/p/9240359.html

推荐一个课程:《Flutter移动电商实战》- 快速掌握实际项目开发