Flutter，起飞

xun-ming

已于 2023-06-30 12:59:35 修改

阅读量464

点赞数

分类专栏：安卓文章标签： android flutter

于 2021-04-30 19:44:59 首次发布

本文为博主（xunming）原创文章，转载请注明出处。

本文链接：https://blog.csdn.net/diyangxia/article/details/115899443

版权

安卓专栏收录该内容

60 篇文章 0 订阅

订阅专栏

本文介绍了Flutter的开发环境配置，包括下载、环境变量设置和插件安装，并通过步骤演示了从设备检测、新建项目、运行调试到体验热重载功能的过程。此外，还分享了一个实际案例，展示如何使用Flutter开发一个宫格图片浏览应用，涵盖了gridView、widget使用、页面跳转和第三方库引用等知识点。

摘要由CSDN通过智能技术生成

1、前言

最近看了几篇jetpack compose的文章，一脸蒙，不太能看懂，底下一堆评论说跟flutter很像，而且compose本身还没稳定版出来，目前都是beta版，同时Android Studio最新稳定版4.1.3也不支持compose，所以就找了之前很火的flutter来学习学习，据郭神大佬说，以后Android会去掉xml界面布局方式，或许跨平台的编程语言在未来会成为主流

2、开发准备

2.1 下载与配置

1，下载地址：点击下载，下载完成后，解压到指定目录，比如D:\flutter

2，配置环境变量，win + s 快捷键快速打开windows搜索栏，输入env，选择编辑系统环境变量，修改用户变量下的Path值，添加 D:\flutter\bin ，确定即可

在命令行中执行以下体检命令：

flutter doctor

在这里插入图片描述
如果显示上图错误的话，Ctrl C取消，重新执行一遍体检命令

检测完发现有个问题，需要修复，根据提示，继续执行命令：

flutter doctor --android-licenses

会有几个提示询问是否Accept，输入y即可，直到出现那All SDK packahe licenses accepted后，再次输入体检命令，会提示No issues found，至此配置完毕
在这里插入图片描述

2.2 插件安装

打开插件偏好设置 (位于 File > Settings > Plugins)

选择 Marketplace (扩展商店)，选择 Flutter plugin 然后点击 Install (安装)。

当弹出重新启动提示时，点击 Restart。

3、开发初体验

3.1 设备检测

作为一名Android开发者，Android Studio和SDK都已安装完毕，执行以下命令来检测设备

flutter devices

可以看到，能检测到mobile和web设备
在这里插入图片描述

3.2 新建项目

File - New - New Flutter Project
在这里插入图片描述
选择Flutter Application，点击Next

输入名字和描述，选择Flutter SDK路径，点击Next，设置包名，点击Finish完成

在这里插入图片描述

3.3 运行项目

直接点击Run，试跑一下，首次编译可能会比较慢，大概十分钟，以下为Run日志

Launching lib\main.dart on Mi Note 3 in debug mode…
Running Gradle task ‘assembleDebug’…
√ Built build\app\outputs\flutter-apk\app-debug.apk.
Installing build\app\outputs\flutter-apk\app.apk…
Activating Dart DevTools…
Debug service listening on ws://127.0.0.1:54288/fZNrjqFSpEQ=/ws
Syncing files to device Mi Note 3…

在这里插入图片描述