Flutter入门环境搭建

最新推荐文章于 2024-08-04 20:34:11 发布

喻志强(Xeon)

最新推荐文章于 2024-08-04 20:34:11 发布

阅读量4.1k

点赞数 2

分类专栏： Flutter入门系列文章标签： Flutter Flutter环境搭建 Flutter Demo Flutter官方demo Flutter专栏

本文为博主原创文章，转载请注明本文转自 [喻志强的博客](https://blog.csdn.net/yuzhiqiang_1993)。如果文中有什么纰漏或错误,请留言指正。如果您觉得文章对你有帮助，请三连支持，谢谢！

本文链接：https://blog.csdn.net/yuzhiqiang_1993/article/details/84939634

版权

Flutter入门系列专栏收录该内容

21 篇文章 59 订阅

订阅专栏

Flutter1.0已经发布了，如果你还不知道Flutter是干什么的，建议你先看一下关于Flutter的介绍。
Flutter发布会介绍

相信看这篇文章的同学们应该都对Flutter有一定的了解了，Flutter是用Dart语言实现的，Dart语言也是一门面向对象的语言，所以有Java或Kotlin基础的人上手相对很容易。

我是一名Android开发人员，所以当Flutter一发布的时候就体验了下官方demo，Flutter确实解决了原生开发的一些痛点。
比如热重载，跨平台且相对于传统的混合开发性能更高等，但是毕竟还是刚出来的新技术，肯定不如现在的Android原生开发技术这么完善，所以建议大家还是先观望观望，有时间的话先入个门。

本篇博客我们就开始搭建一下Flutter的环境，并创建一个Demo运行到Android手机上看看效果是怎么样的。

首先，Android相关的环境的配置这里就不介绍了。JDK、SDK的Path都要配置，否则，后期检测的时候可能会有异常。
比如你的Android SDK没有配置Path，那么后期就可能提示 Flutter获取不到设备的异常等。

这里默认你的Android相关的配置是完善的，我们直接开始搭建Flutter开发环境。

1.首先下载安装Flutter的SDK
我这里使用的是Windows.Mac的根据官方教程下载安装即可。
https://flutter.io/docs/get-started/install

选择windows后点击下载SDK压缩包，Flutter是用Dart语言编写的，默认Flutter的SDK中包含的有Dart相关的sdk，所以我们不需要单独下载安装Dart
在这里插入图片描述

目前是版本号是1.0.0，如果你打不开网页或者下载不了，那可能就需要科学上网了，不想去官网下载的可以直接点击下载 Flutter SDK

下载完成后直接解压到C盘即可，这里建议直接就放到C盘。
在这里插入图片描述

可以看到默认就包含的有Dart相关的SDK
在这里插入图片描述

2.配置环境变量

环境变量配置很简单，找到你解压的Flutter目录下的bin目录，赋值添加到Path中去即可。

在这里插入图片描述

Path配置完成后我们来看一下是否配置成功
打开命令行工具，跳转到Flutter目录
运行flutter doctor

如果你的配置全部正常的话，那么检查后应该全部是勾，关于IntelliJ我们可以不用管，Android Studio的正常就可以，毕竟我们还是用AS去开发Android。
在这里插入图片描述

3.创建Flutter项目
环境配置完毕后我们先打开Android Studio。这里我们需要先安装一下Flutter插件。

打开AS的插件，搜索flutter安装后重启即可，这里我已经安装过了

在这里插入图片描述

插件安装后我们就可以创建一个Flutter项目了。

我们new的时候直接选择创建flutter项目即可
在这里插入图片描述

首次创建Flutter项目时需要配置一下本地安装的Flutter SDK的路径

在这里插入图片描述

直接一路next然后finish即可

项目完毕后长这样，可以看到默认有两个平台分别是android和ios，而我们的flutter代码就是在lib中存放的，后期我们主要也是在这个目录中进行代码编写。

在这里插入图片描述

我们先不管代码，直接运行看一下。
没错，就是下面这样，点击按钮有个计数功能。
在这里插入图片描述

我们先来随便改一下代码，看看Flutter 热重载是个什么样子。
做过android的对这个浮动按钮比较熟悉，类似于Android中的FloatingActionButton,Icon从字面意思来看就是图标的意思，我们来随便改个图标，然后保存，保存后可以看到ui直接就发生变化了。我们再改一下标题，也是一保存ui就直接更新了。

在这里插入图片描述

在这里插入图片描述
这尼玛就厉害了，想想之前我们调整ui的时候，随便修改一个小地方，那都是要重新运行的，小项目还好，十几二十秒可以运行，要是项目大了，编译几分钟都是有可能的，单单这个热重载就能给我们省掉很多时间了，大大提升了开发效率，再加上跨平台，高性能的特性，可以预见，Flutter会对传统的Web App,React Native,H5+Cordova等混合开发技术有很大的冲击，毕竟性能高这个优势太明显了。
我们现在就可以跟进这门技术了，拭目以待吧！