首页手记 Flutter从配置安装到运行第一个app详解

Flutter从配置安装到运行第一个app详解

标签：

Android

Flutter 是谷歌今年年初提出的一个新工具，可以跨平台开发安卓，ios,还支持kotlin语法，最近研究了一下Flutter，这个工具从安装到运行经历了九九八十一难，好在终于成功运行起来了。

下面先来看一下效果图：

下面就详细的讲一下我的安装之路和遇到的一些问题：

社会我韦哥，人好干货多。开始撸码！

一、安装：

使用git命令行（关于如何使用git，请查看我的博文 Git及GitHub快速入门图文全面详解）：

git clone -b beta https://github.com/flutter/flutter.git

运行过程截图：

二、如果已经安装Fluttter，需要更新请看（不更新的就跳过此步）：

要同时更新Flutter SDK和包，请使用以下命令：

flutter upgrade

三、配置环境变量

如果想在命令行中使用 flutter 命令，你需要添加flutter的路径到path中去。这个和配置java环境变量是同样的做法，找到flutter安装路径，比如我的是E:\develop\flutter\bin，我复制这个路径，右键我的电脑-->属性-->高级系统属性-->环境变量-->找到PATH，点击编辑-->在最后把刚复制的路径粘贴进来，-->一直保存确定就可以了。

四、打开flutter命令行

win + R 快捷键，输入cmd，回车，输入flutter doctor，回车。

这个命令初次运行可能会很慢，Flutter会自动安装所需依赖，并进行编译。建议科学上网。

安装过程截图：

下一步我忘了截图了，这个图来自于网上的。

我所有的工具都安装好了是这样的：

注意：
[√]这个是安装OK的，[X]是需要安装的，或者是已安装但是没有运行起来的。
这里面有四项内容：

（1）Flutter 这是Flutter工具，就是刚才git下载的那个。
（2）Android工具链，这里指的是SDK，会标注出SDK的最大版本号。
（3）Android Studio 2.2版本（这个是下载安装的版本）
（4）Android Studio 3.2版本（这个是免安装的版本，所以也会显示出来）
（5）已连接的设备，可以是模拟器，也可以是真机，如果已连接会显示出来。

C:\Users\admin>flutter doctor
Doctor summary (to see all details, run flutter doctor -v):
[√] Flutter (Channel beta, v0.3.2, on Microsoft Windows [Version 10.0.15063], locale zh-CN)[√] Android toolchain - develop for Android devices (Android SDK 27.0.3)[√] Android Studio (version 2.2)[√] Android Studio (version 3.2)
    X Flutter plugin not installed; this adds Flutter specific functionality.
    X Dart plugin not installed; this adds Dart specific functionality.
[√] Connected devices (1 available)• No issues found!

五、几个flutter常用命令

查看版本号的命令使用截图如下：

以下是常用命令：

常用命令	含义
--version	查看Flutter版本
-h或者--help	打印所有命令行用法信息
analyze	分析项目的Dart代码。
build	Flutter构建命令。
channel	列表或开关Flutter通道。
clean	删除构建/目录。
config	配置Flutter设置。
create	创建一个新的Flutter项目。
devices	列出所有连接的设备。
doctor	展示了有关安装工具的信息。
drive	为当前项目运行Flutter驱动程序测试。
format	格式一个或多个Dart文件。
fuchsia_reload	在Fuchsia上进行热重载。
help	显示帮助信息的Flutter。
install	在附加设备上安装Flutter应用程序。
logs	显示用于运行Flutter应用程序的日志输出。
packages	命令用于管理Flutter包。
precache	填充了Flutter工具的二进制工件缓存。
run	在附加设备上运行你的Flutter应用程序。
screenshot	从一个连接的设备截图。
stop	停止在附加设备上的Flutter应用。
test	对当前项目的Flutter单元测试。
trace	开始并停止跟踪运行的Flutter应用程序。
upgrade	升级你的Flutter副本。

六、开发工具的安装

（一）AS

这个就不用说了，大家都安装了吧，jdk,sdk这些都配置好了吧.直接下一步好了。

（二） Flutter和Dart插件安装

Flutter需要Flutter和Dart插件才可以使用：

File --> settings --> Plugins --> Browse repositories，然后输入Flutter就可以下载了，Drat也是一样的道理。

Flutter插件安装：

Dart插件安装：

安装好之后重启一下AS就可以使用插件了。

七、运行一个demo app

创建project过程和普通安卓项目是很类似的。

（一）打开AS，点击 File --> New Flutter Project，选择Flutter application ，点击next，输入一个工程名字

注意：项目名称必须是小写，单词之间用下划线隔开，你看我这样创建就给我提示错误了，报错的如图所示。

（二）输入包名，点击next，点击finish，等待编译就可以了。如果没配置好，这个时候往往会报错。

注意：这里可以支持ios和kotlin，如果需要的话可以勾上。

（三）首先模拟器，然后选择要运行的项目，注意了，这里有一个MainActivity 和 main.dart，选择main.dart，然后点击绿色的三角号图标运行（或者点击菜单栏 Run）就可以了。

我用的AS3.2，我截个图，菜单栏跟以前版本有点不同，之前的AS版本可以在Build菜单找到编译选项的。

如果代码有更改，可以点击黄色的闪电图标

点击它之后就可以进行热加载。

遇到的一些问题：

（一） Flutter插件不支持当前AS版本。当前的AS是3.2，我的gradle编译的api是27的，可能Flutter目前最高只能支持26，果然我在build.gradle里面的编译版本改成了26，重新编译一下，OK了。

（二）编译一个demo居然安装包是30多M，这个也太坑了吧。。安卓原生的apk包最多就几M。

（三）Flutter有一个Flutter Inspector的工具，主要是检查Widget的，可以用于诊断布局渲染问题，查看app当前的视图树结构。但是：这个视图树层次太深了，看起来很费劲有木有。。详细使用描述可以参考官网文档：http://doc.flutter-dev.cn/inspector/