百度360必应搜狗淘宝本站头条
当前位置:网站首页 > IT知识 > 正文

Flutter无脑入门-从零到第一个APP

liuian 2025-05-21 14:57 34 浏览

Flutter自发布正式版之后,不少大厂已开始使用这项技术构建新的终端页面或重构部分功能,虽然其自身依然存在不少待解决的问题,但作为当前跨平台门派最后一个入场的小伙子,其潜力不容小觑,为了适应风起云涌变幻莫测的技术潮流,掌握新技术的能力是技术宅必备的基础技能,于是本篇开始从0扫盲Flutter,废话不多,开搞。

安装Flutter

安装Flutter最快捷的有2个方法,大家可视情况安装:

  • 使用Git命令此方法适用于墙外或有翻墙网络环境的小伙伴,使用下面的命令即可
C:\src>git clone https://github.com/flutter/flutter.git -b stable
  • 直接下载SDK包,建议使用某雷,快的一匹:

下载地址:
https://storage.googleapis.com/flutter_infra/releases/stable/windows/flutter_windows_v1.12.13+hotfix.9-stable.zip

SDK包下载完毕,被墙的小伙伴,添加两个避开被墙的环境变量参数和参数值:

PUB_HOSTED_URL https://pub.flutter-io.cn
FLUTTER_STORAGE_BASE_URL https://storage.flutter-io.cn

无论是Windows还是Mac还是Linux,向环境变量Path中添加参数:

[你的Flutter文件夹路径]\flutter\bin


测试安装

打开命令行,输入以下命令:

C:\src\flutter>flutter doctor

如果SDK包和前面配置的路径没有问题,你会大概率看到如下信息:


如果看到类似上面的信息说明你已经安装成功了。

值得注意的是,如果你是第一次安装,可能会需要等待一段时间,因为Flutter首次安装会自动检查开发环境,并下载一系列的依赖和基础控件,因此不必惊慌,耐心等待即可。

若你的电脑上没有安装IDE、虚拟机或连接任何安卓设备,你会看到上图中后三项检查都是X,没关系,我们一步一步来。


安装安卓SDK和虚拟机

如果使用Mac的IOS虚拟机,或者已安装安卓虚拟机的小伙伴,可略过此步

首先打开AS下载链接:

https://developer.android.com/studio/index.html#features

按提示下载Android Studio安装包,无脑下一步,注意其中有一步需要勾选组件Android SDK, Android SDK Command-line ToolsAndroid SDK Build-Tools,完毕后即完成安卓SDK的安装。

打开Android Studio,进入SDK管理器:


这里面就是安卓各个版本的虚拟机列表了,勾选2-3个当前比较广泛的版本,点击OK即可;

待AS下载完虚拟机后,打开虚拟机管理器:


全新安装的小伙伴点击右下角按钮创建新虚拟机即可,过程不赘述,根据自己的情况配置虚拟机的屏幕尺寸和硬件即可,给新手一点DIY的探索空间。


安装代码编辑器Visual Studio Code

如果有自己喜欢的IDE,可以自行百度解决Flutter相关插件的安装,我比较喜欢VS,因此快速过一遍VS code的安装和配置。

打开VS下载链接,下载安装包

https://code.visualstudio.com/

无脑安装后进入VS Code,打开扩展列表,输入dart code,搜索dart插件,点击安装>重启:

VS Code重启很快,重新打开后使用快捷键Ctrl+Shift+p,打开命令面板,输入Flutter:

如果能看到上图中模糊匹配Flutter的命令,说明安装完毕,如果没有,果断重启电脑,就酱。


创建第一个APP

好了,铺垫已经做好,接下来做些比较cool的事情。

在VS Code中,快捷键Ctrl+Shift+p,打开命令面板,输入flutter,选择第一行New Project

然后输入一个比较Niubility的名字:

这时会弹出文件夹选择器,选择一个存放项目的路径即可,此时VS Code开始运行了,右下角会看到初始化项目的提示:

如果是全新开发环境,初始化项目所需的依赖需要下载,耐心等一会儿就行,如果没配置开头讲的两个环境变量大概率会被墙卡住。

项目创建完毕,全新APP的原始代码已经帮你写好了,可以直接启动使用的,这时候先启动虚拟机。

可以看到VS Code右下角有个启动虚拟机的快捷入口,点一下上面就会弹出启动虚拟机的选项,选好镜像便启动虚拟机了:

启动好虚拟机,在命令行中输入flutter run,即可启动你的第一个APP:

初次启动会比较慢,耐心等等即可,让我们看看效果:

好了,本篇结束,祝好运~!

相关推荐

2025win7专业版激活密钥(2020win7专业版永久激活码)

cad序列号和密钥是111-111111,可以通用的,但激活码则需要通过CAD2014注册机对申请号的换算才能得出结果,当然结果有很多,用户可以不断的Generate一个。cad序列号和密钥是111-...

window7下载itunes什么版本(window7怎么下载itunes)

出现此问题一般是因为itunes没有正确安装,可以参考如下解决方法:1.请查看本机电脑数位,计算机---右键---属性---看是32的还是64的;2.官网下载数位对应的iTunes;3...

u盘什么牌子的好(大容量的u盘什么牌子好)

十大耐用云U盘排行分别是:第一名闪迪第二名雷克沙第三名金士顿第四名三星第五名美商海盗船第六名东芝第七名惠普第八名威刚第九名台电第十名朗科。十大耐用云U盘排行分别是:第一名闪迪第二名雷克沙第三名金士顿第...

英文翻译器下载(英文翻译器软件下载)

APK(全称:Androidapplicationpackage,Android应用程序包)是Android操作系统使用的一种应用程序包文件格式,用于分发和安装移动应用及中间件。一个Android...

oppo主题包下载(oppoi主题下载)

opporeno5壁纸可以选择主题商店下载。1、打开手机设置,点击【个性化定制】,选择壁纸。2、可以选择本地相册、静态壁纸、动态壁纸、ART+,还可以选择主题商店。3、选择自己喜欢的壁纸,点击设置即...

老tplink路由器无线桥接设置图解
  • 老tplink路由器无线桥接设置图解
  • 老tplink路由器无线桥接设置图解
  • 老tplink路由器无线桥接设置图解
  • 老tplink路由器无线桥接设置图解
电脑连接正常却无法上网(电脑网络连接正常但是上不了网无线网正常)
  • 电脑连接正常却无法上网(电脑网络连接正常但是上不了网无线网正常)
  • 电脑连接正常却无法上网(电脑网络连接正常但是上不了网无线网正常)
  • 电脑连接正常却无法上网(电脑网络连接正常但是上不了网无线网正常)
  • 电脑连接正常却无法上网(电脑网络连接正常但是上不了网无线网正常)
硬盘开盘恢复数据(硬盘开盘恢复数据怎样收费)

  硬盘因为某些原因损坏,比如磁头损坏,用于驱动磁臂移动的电机烧毁等故障,可以通过打开硬盘盘体,更换相应的部件来维修的办法,以便进行数据恢复工作,这也就是一般所说的“开盘”。  开盘维修必须在无尘环境...

微软surface平板(微软surface平板电脑的降温散热是由风扇进行的吗)

可以。包括微软Surface平板电脑在内的一系列Windows平板,它们搭载的系统都是与电脑完全相同的Windows系统,其界面和操作方式都与电脑无异,并且全面支持电脑EXE应用程序,比如功能完整的O...

怎样恢复电脑删除的文件(怎样恢复电脑删除的文件记录)

文件误删了之后,先停止对电脑上其他文件的操作,然后判断该文件删除方式,如果是普通删除的文件可以打开回收站进行查看,之后进行还原的操作,如果是永久删除的文件,那可以借助到专业的数据恢复软件来进行恢复操作...

win7纯净原版(win7旗舰纯净原版)

windows7ghost纯净版特色:1、专业为电脑制作,定制版系统使笔记本电脑运行更加可靠。2、安装盘经过多名电脑安装人员测试,稳定性和兼容性非常好。3、通过多台不同硬件型号的计算机测试,没有蓝屏,...

电脑摄像头驱动器怎么安装(电脑摄像头的驱动程序)

摄像头驱动的安装方法:首先,先取出摄像头,然后将USB端口插入电脑的端口中。当然,如果是需要长时间使用,建议将其插入后面板上。其次,初次使用摄像头时,系统可能会搜索驱动程序进行安装。那些免驱动的都可以...

win10虚拟机装win7(win10虚拟机怎么装win7)

WIN7系统下是可以安装Win10虚拟机,用户可以按照以下方法安装:1、网上搜索下载安装360软件管家;2、在搜索栏里输入VM,然后在VMwareWorkstation旁点下载,系统会自动安装;3、安...

u盘启动盘怎么还原成普通u盘

将U盘还原为普通U盘的方法如下:1.在电脑上打开磁盘管理工具,找到你想要还原的U盘。2.删除该U盘中所有的分区和卷标,在删除时,需要格外小心,确保不要删错其他存储设备。可以右键点击该分区来进行删除...

最新款手机vivo(vivo最新款手机及价格表)

vivoX60Pro+、vivoX70Pro、vivoX60、vivoX70、vivoX70Pro+、vivoiQOO7、vivoiQOO7Pro、vivoIQOO8、viv...