Fultter入门学习:小白入门,搭建环境&真机运行第一个例子

开发环境:
1. window10环境
2. Flutter版本:1.22.2
3. Android Studio 3.5.2

步骤记录:

一、下载Flutter SDK
下载网址:https://flutter.cn/docs/get-started/install/windows#
下载后解压至想要保存的目录。

二、Flutter环境变量配置
1、国内镜像配置
【之所以要配置镜像,是因为国内外网络原因,Flutter在国内执行命令访问的时候,可能出现访问不了的情况。Flutter官方开放了一个镜像,可以通过镜像地址下载所需文件。最新的Flutter国内镜像可以在Flutter中文网中查看(https://flutterchina.club/setup-macos/)。】

打开环境变量配置窗口-->用户变量-->点击新建,添加下面两个值:
FLUTTER_STORAGE_BASE_URL 值:https://storage.flutter-io.cn
PUB_HOSTED_URL 值:https://pub.flutter-io.cn
如图:

Fultter入门学习:小白入门,搭建环境&真机运行第一个例子

2、把保存到本地的Flutter目录的bin目录添加到环境变量中:
打开环境变量配置窗口-->系统变量-->选中Path变量-->点击编辑,把Flutter目录的bin目录路径添加进去。

这个步骤完成后重启计算机(若环境变量生效,可不重启,我这里直接重启了)。

三、安装Android Studio
我是从这里下载的:http://www.android-studio.org/
安装步骤百度上有很详细的。其实只要Next点下去就行了。安装好后,运行时会弹出下面的窗口:
如图:

Fultter入门学习:小白入门,搭建环境&真机运行第一个例子
选Cancel就可以了,然后就是选择界面风格和安装SDK。

四、Android Studio环境配置
1、打开Settings窗口,选择Plugins,搜索安装Dart和Flutter两个插件。
如图:

Fultter入门学习:小白入门,搭建环境&真机运行第一个例子

 

Fultter入门学习:小白入门,搭建环境&真机运行第一个例子

 

按其提示安装后重启Android Studio。这就你会发现,增加了创建Flutter项目的选项。

五、打开命令行窗口,输入:flutter doctor,检查配置项
我做这一步时,还未安装Dart和Flutter两个插件,为了大家方便,我把这两个插件的安装提前讲了,所以这里这两个插件应该不会再提示了。
除了这两个插件,我安装时还提示了:Andriod licenses not accepted.
按照提示,输入 flutter doctor --android-licenses,一路选 y 即可。

以上步骤完成后,环境就搭建好了。下面就是如何在真机上跑下程序,过程一通,大功告成!

六、新建一个Flutter Application项目

点击新建项目即可。

七、真机调试
1、我的环境:Honor 7X,Android 9.0
2、点击Android Studio,Tools菜单下的SDK Manager。
下载和你的真机对应的Android版本。勾选后,点击Apply后会自动下载。
如图:

Fultter入门学习:小白入门,搭建环境&真机运行第一个例子


然后在SDK Tools下,勾选Google Usb Driver,勾选后,点击Apply会自动下载驱动。
如图:

Fultter入门学习:小白入门,搭建环境&真机运行第一个例子

3、在系统的设备管理器中安装USB驱动。
3.1 把手机连接至电脑,如果弹出窗口,选择传输文件选项。也可在手机设置里面,把手机设置里面的“选择USB配置”为MTP(多媒体传输)。

Fultter入门学习:小白入门,搭建环境&真机运行第一个例子

3.2 打开设备管理器,选中设备后点击更新驱动:

Fultter入门学习:小白入门,搭建环境&真机运行第一个例子

 

3.3 手动选择驱动,如图:

Fultter入门学习:小白入门,搭建环境&真机运行第一个例子

 

3.4 搜索位置就是你的 Android SDK的位置:

Fultter入门学习:小白入门,搭建环境&真机运行第一个例子

 

3.5 打开手机的开发者模式,每个手机打开方式可能有所不同,可百度查询。我的是Honor7X,连续点击版本号即可。打开后把“USB调试”选项打开。

3.6 进入Android Studio,这时在选择设备一栏应该就会有设备出来了,如下图:

Fultter入门学习:小白入门,搭建环境&真机运行第一个例子

 

我在这一步时,遇到设备不出来的情况,最后找到问题是,USB配置里面,我选的是“仅充电”,之后选择MTP模式就好了。

3.7 运行程序,这个过程有点长,一开始我还以为哪里出问题了,结果观察下面的console窗口,发现是running状态,显示安装和准备SDK相关的东西,这个完成后,程序终于在真机跑起来了,如图:

Fultter入门学习:小白入门,搭建环境&真机运行第一个例子

点击右下角的按钮,中间的数字会增加。

Over。喝杯茶去????