Flutter(一)Windows下环境的搭建与安装并创建第一个Flutter工程解析目录

文章目录

简介

都说原生Android和ios性能更好,跨平台开发总会存在性能问题,为什么还要有跨平台开发存在呢?主要还是为了节省成本,一套代码多端使用,一个维护团队就足够了。而市面上那么多跨平台开发的选择比如rn,uni等等,为什么要选择flutter呢?

Flutter是Google的移动UI框架,可以在Android和ios上面构建原生用户界面;flutter可以实现和现有的代码一起工作,不是说选用flutter就要推掉之前的代码重写整个项目,不需要;统一UI不用区分Android和IOIS;最重要的一点开源、免费(哈哈)。

除了上面这些之外还有一点也是选择flutter至关重要的一点,其他的跨屏台开发基本上都要搭建桥梁,而flutter不需要,因为flutter通过dart虚拟机把flutter编译成我们想要发布的平台比如Android,比如ios不同的机器码;并不需要再去搭建一个两端链接的桥梁,在性能上面会有很大的提高。

环境的搭建与安装

Flutter官网
Flutter中国官网

1.配置镜像:我的电脑-属性-高级系统设置-环境变量-新建系统变量PUB_HOSTED_URL值是https://pub.flutter-io.cn;在新建系统变量FLUTTER_STORAGE_BASE_URL值是https://storage.flutter-io.cn

Flutter(一)Windows下环境的搭建与安装并创建第一个Flutter工程解析目录
Flutter(一)Windows下环境的搭建与安装并创建第一个Flutter工程解析目录
2.官网下载Flutter SDK。下载地址

3.解压SDK,创建一个新目录来进行解压,注意不要解压安装到一些高权限路径,比如C:\Program Files\。解压完成之后可以看到一下效果:
Flutter(一)Windows下环境的搭建与安装并创建第一个Flutter工程解析目录
4.配置Flutter SDK的环境变量,还是打开系统的环境变量设置,将sdk的bin目录添加到path里面
Flutter(一)Windows下环境的搭建与安装并创建第一个Flutter工程解析目录
5.测试环境变量,win+r打开cmd,输入flutter doctor会检查当前flutter的环境配置,并将错处信息输出
Flutter(一)Windows下环境的搭建与安装并创建第一个Flutter工程解析目录
6.在Android studio上面配置flutter,File-Setting-Plugins输入Flutter插件搜索下载,下载完成之后需要重启Android studio。
Flutter(一)Windows下环境的搭建与安装并创建第一个Flutter工程解析目录
在执行这一步的时候需要注意,在下载flutter的时候会弹出一个提示,是否下载dart插件,这里要点击是,因为flutter是基于dart语言进行开发的。

7.重启完成之后,File-New就可以看到New Flutter Project的选项,就可以创建一个flutter项目了。
Flutter(一)Windows下环境的搭建与安装并创建第一个Flutter工程解析目录

创建第一个flutter工程

1.选择创建类型。在New Flutter Project的时候会出现以下四个选项,我们选择我们所需要的进行创建就可以了
Flutter(一)Windows下环境的搭建与安装并创建第一个Flutter工程解析目录
这里先创建Flutter Application应用程序。

2.配置项目信息。在创建flutter项目的时候要对我们的项目进行配置,特别注意的时候sdk路径这一块,要配置到我们解压安装的flutter sdk目录下的flutter层就可以了。Project name不能大写
Flutter(一)Windows下环境的搭建与安装并创建第一个Flutter工程解析目录
3.最后一步,包名的设置,直接填写自己所要的包名就行了,Android开发对这一步还是很了解的,最后点击finish创建。
Flutter(一)Windows下环境的搭建与安装并创建第一个Flutter工程解析目录

工程目录解析

在创建完一个flutter工程之后,我们可以看到它有以下的工程目录,这里就分别拆分一下各个目录有什么用。
Flutter(一)Windows下环境的搭建与安装并创建第一个Flutter工程解析目录
Android目录:存放Android的gradle工程

ios目录:存放ios的 xcode工程

lib目录:存放flutter项目源码,在进行flutter开发的时候编写的源码,flutter是基于dart语言开发的,所以在创建文件的时候都是.dart结尾。

pubspec.yaml文件:这个文件就相当于Android里面的build.gradle文件,我们在编写项目过程中需要因日的一些第三方库就写在这个文件里面。

最后运行一下工程,就可以在模拟器上面看到界面了
Flutter(一)Windows下环境的搭建与安装并创建第一个Flutter工程解析目录
文章到这里也就结束了~。

上一篇:DarVM笔记


下一篇:Flutter混合栈路由实践与优化