Flutter(一)——认识Flutter以及搭建开发环境

简介: Flutter(一)——认识Flutter以及搭建开发环境

什么是Flutter


Flutter是谷歌新推出的一套跨平台的,开源UI框架,同时支持Android与IOS开发,对于以前需要用两种语言分别开发IOS,Android程序与来说,无疑简单了许多。而且Flutter是未来新操作系统Fuchsia的默认开发软件,谷歌目前正在大力推广flutter,可以说是目前比较前沿的开发工具。


Flutter开发优势


(1)跨平台性:真正做了一套代码可以同时在Android和IOS上运行,避免过高的维护成本,节省测试,开发资源。


(2)通过“自绘UI+原生系统”实现高帧率的流畅UI。不使用WebView这种比较老的开发模式,而使用Skia作为2D渲染引擎,使用Dart语言作为运行,以及使用Text作为文字排版引擎。


(3)支持开发过程中的热重载。在开发过程中,只需要保存操作步骤就可以刷新Flutter项目,提高开发效率。


(4)对开发环境要求不高,可以使用Android Studio,也可以使用VSCode


(5)高性能:直接调用系统的API绘制UI,因此,性能更接近原生。


(6)学习成本低:如果之前学过RN,那么在学习Flutter也会很快就能掌握。如果具有前端或者纯原生开发经验,则学起来也比较省力。


对比其他技术


技术类型

UI渲染方式 性能 开发效率 动态化 取值
HTML5+原生 WebView渲染 一般

支持 Cordova,Ionic
JavaScript+原生渲染 原生控件渲染

支持 RN,Weex
自绘UI+原生 调用系统API渲染 Flutter高,Qt低 默认不支持 Qt,Flutter

博主做了一个表格,详细对比了其他技术的优缺点,相信非常直观了,一目了然。


Android Studio搭建Flutter开发环境


(1)首先打开Android Studio,然后选择Setting-plugins,搜索框输入Flutter,然后点击安装,如下图所示:


(2)安装完成之后,重启Android Studio会看到如下界面,点击创建Flutter项目:


(3)我们点击start a new Flutter project后,会发现要我们输入Flutter SDK目录,我们先只安装了Android开发的插件,并没有下载Flutter SDK,所以我们需要选择一个目录,点击后面的install SDK(flutter sdk path后面有下载按钮,这里博主已经点击下载所以消失了,下面显示下载进度):

(4)下载完成之后,就可以创建项目了,如图:


(5)这样创建并不能运行到手机中,因为你没有配置环境变量,所以我们还需要配置两个环境变量,首先在系统环境变量中添加Android_HOME也就是Android的SDK目录:


其次,我们需要在系统环境变量的Path中,添加flutter的环境变量:


如果你配置后不知道自己是否成功,可以在CMD中输入如下命令,如果出现下图提示,就表示环境已经搭建完成, 可以运行Flutter到手机上显示了:

其实这里的脚本命令非常简单,就是用医生检查以下flutter环境是否搭建成功。这样我们的Android Studio的flutter项目运行环境就搭建完成了,我们可以看看默认创建项目的运行效果,以及它的图标:



VSCode搭建Flutter开发环境


除了Android Studio外,如果你一直时前端的开发人员,并且一直使用VSCode,现在想开发手机应用,也可以直接使用VSCode进行开发,它的搭建步骤如下:


(1)打开VSCode选择菜单中的View-Command Palette,会出现一个搜索框,然后输入install,选择Extensions:Install Extension。


(2)点击后,会出现如下界面,然后输入Flutter进行安装


(3)安装完成后,同样通过第一步View-Command Palette搜索Flutter,然后点击Flutter:New Project创建项目进行开发。


因为博主后续讲解的都是Android的手机开发,所以后续都以Android Studio开发Flutter为主。

相关文章
|
24天前
|
开发工具 Android开发 git
鸿蒙Flutter实战:01-搭建开发环境
本文介绍了如何搭建鸿蒙 Flutter 开发环境,包括安装 DevEco Studio 等工具,并详细说明了 Mac 和 Windows 系统下的环境变量配置。此外,还介绍了如何使用 FVM 管理多个 Flutter 版本,并提供了一些常见问题的解决方案和交流群信息。
81 0
鸿蒙Flutter实战:01-搭建开发环境
|
2月前
|
Oracle Java 关系型数据库
Mac电脑上安装和配置Flutter开发环境
Mac电脑上安装和配置Flutter开发环境
47 3
|
6月前
|
Dart 前端开发 开发工具
【Flutter前端技术开发专栏】Flutter入门指南:搭建开发环境与第一个应用
【4月更文挑战第30天】本文介绍了Flutter SDK的安装和配置过程,以及如何创建并运行第一个Flutter应用。首先确保安装了Dart SDK和Flutter SDK,支持macOS、Linux和Windows。安装完成后,设置环境变量,然后通过`flutter doctor`验证安装。接着,使用`flutter create`命令创建新项目,进入项目目录并运行`flutter run`启动应用。在`main.dart`中修改代码以自定义应用。Flutter支持热重载和DevTools调试。本文为Flutter初学者提供了快速入门的指导。
97 0
【Flutter前端技术开发专栏】Flutter入门指南:搭建开发环境与第一个应用
|
4月前
|
开发工具 Android开发 iOS开发
搭建Flutter开发环境、从零基础到精通
搭建Flutter开发环境、从零基础到精通
|
4月前
|
Dart 开发工具 Android开发
flutter 搭建开发环境
flutter 搭建开发环境
36 1
|
4月前
|
Android开发 开发者
flutter 开发环境配置和生命周期学习
flutter 开发环境配置和生命周期学习
|
5月前
|
Dart 开发工具 Android开发
在 Windows 操作系统上安装和配置 Flutter 开发环境
在 Windows 操作系统上安装和配置 Flutter 开发环境
122 0
N..
|
6月前
|
开发框架 Dart 开发工具
搭建Flutter开发环境
搭建Flutter开发环境
N..
50 0
|
Web App开发 Dart 前端开发
flutter开发环境搭建
flutter开发环境搭建
168 0