Flutter无脑入门-从零到第一个APP
liuian 2025-05-21 14:57 3 浏览
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 Tools和Android 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:
初次启动会比较慢,耐心等等即可,让我们看看效果:
好了,本篇结束,祝好运~!
相关推荐
- vue怎么和后端php配合
-
Vue和后端PHP可以通过HTTP请求进行配合。首先,前端Vue可以使用axios库或者Vue自带的$http对象来发送HTTP请求到后端PHP接口。通过axios库发送POST、GET、PUT等请求...
- Ansible最佳实践之 AWX 使用 Ansible 与 API 通信
-
#头条创作挑战赛#API简单介绍红帽AWX提供了一个类似Swagger的RESTful风格的Web服务框架,可以和awx直接交互。使管理员和开发人员能够在webUI之外控制其...
- PHP8.3 错误处理革命:Exception 与 Error 全面升级
-
亲爱的小伙伴,好久没有发布信息了,最近学习了一下PHP8.3的升级,都有哪些优化和提升,把学到的分享出来给需要的小伙伴充下电。技术段位:高可用性必修目标收益:精准错误定位+异常链路追踪适配场景...
- 使用 mix/vega + mix/db 进行现代化的原生 PHP 开发
-
最近几年在javascript、golang生态中游走,发现很多npm、gomod的优点。最近回过头开发MixPHPV3,发现composer其实一直都是一个非常优秀的工具,但是...
- 15 个非常好用的 JSON 工具
-
JSON(JavaScriptObjectNotation)是一种流行的数据交换格式,已经成为许多应用程序中常用的标准。无论您是开发Web应用程序,构建API,还是处理数据,使用JSON工具可以大...
- php8环境原生实现rpc
-
大数据分布式架构盛行时代的程序员面试,常常遇到分布式架构,RPC,本文的主角是RPC,英文名为RemoteProcedureCall,翻译过来为“远程过程调用”。主流的平台中都支持各种远程调用技术...
- 「PHP编程」如何搭建私有Composer包仓库?
-
在前一篇文章「PHP编程」如何制作自己的Composer包?中,我们已经介绍了如何制作自己的composer包,以及如何使用composer安装自己制作的composer包。不过,这其中有...
- WAF-Bypass之SQL注入绕过思路总结
-
过WAF(针对云WAF)寻找真实IP(源站)绕过如果流量都没有经过WAF,WAF当然无法拦截攻击请求。当前多数云WAF架构,例如百度云加速、阿里云盾等,通过更改DNS解析,把流量引入WAF集群,流量经...
- 【推荐】一款 IDEA 必备的 JSON 处理工具插件 — Json Assistant
-
JsonAssistant是基于IntelliJIDEs的JSON工具插件,让JSON处理变得更轻松!主要功能完全支持JSON5JSON窗口(多选项卡)选项卡更名移动至主编辑器用...
- 技术分享 | 利用PHAR协议进行PHP反序列化攻击
-
PHAR(“PhpARchive”)是PHP中的打包文件,相当于Java中的JAR文件,在php5.3或者更高的版本中默认开启。PHAR文件缺省状态是只读的,当我们要创建一个Phar文件需要修改...
- php进阶到架构之swoole系列教程(一)windows安装swoole
-
目录概述安装Cygwin安装swoolephp7进阶到架构师相关阅读概述这是关于php进阶到架构之swoole系列学习课程:第一节:windows安装swoole学习目标:在Windows环境将搭建s...
- go 和 php 性能如何进行对比?
-
PHP性能很差吗?每次讲到PHP和其他语言间的性能对比,似乎都会发现这样一个声音:单纯的性能对比没有意义,主要瓶颈首先是数据库,其次是业务代码等等。好像PHP的性能真的不能单独拿出来讨论似的。但其实一...
- Linux(CentOS )手动搭建LNMP(Linux+Nginx+Mysql+PHP)坏境
-
CentOS搭建LNMP(Linux+Nginx+Mysql+PHP)坏境由于网上各种版本新旧不一,而且Linux版本也不尽相同,所以自己写一遍根据官网的提示自己手动搭建过程。看官方文档很重要,永远...
- json和jsonp区别
-
JSON和JSONP虽然只有一个字母的差别,但其实他们根本不是一回事儿:JSON是一种数据交换格式,而JSONP是一种非官方跨域数据交互协议。一个是描述信息的格式,一个是信息传递的约定方法。一、...
- web后端正确的返回JSON
-
在web开发中,前端和后端发生数据交换传输现在最常见的形式就是异步ajax交互,一般返回给js都是json,如何才是正确的返回呢?前端代码想要获取JSON数据代码如下:$.get('/user-inf...
- 一周热门
-
-
Python实现人事自动打卡,再也不会被批评
-
Psutil + Flask + Pyecharts + Bootstrap 开发动态可视化系统监控
-
一个解决支持HTML/CSS/JS网页转PDF(高质量)的终极解决方案
-
【验证码逆向专栏】vaptcha 手势验证码逆向分析
-
再见Swagger UI 国人开源了一款超好用的 API 文档生成框架,真香
-
网页转成pdf文件的经验分享 网页转成pdf文件的经验分享怎么弄
-
C++ std::vector 简介
-
python使用fitz模块提取pdf中的图片
-
《人人译客》如何规划你的移动电商网站(2)
-
Jupyterhub安装教程 jupyter怎么安装包
-
- 最近发表
- 标签列表
-
- python判断字典是否为空 (50)
- crontab每周一执行 (48)
- aes和des区别 (43)
- bash脚本和shell脚本的区别 (35)
- canvas库 (33)
- dataframe筛选满足条件的行 (35)
- gitlab日志 (33)
- lua xpcall (36)
- blob转json (33)
- python判断是否在列表中 (34)
- python html转pdf (36)
- 安装指定版本npm (37)
- idea搜索jar包内容 (33)
- css鼠标悬停出现隐藏的文字 (34)
- linux nacos启动命令 (33)
- gitlab 日志 (36)
- adb pull (37)
- table.render (33)
- uniapp textarea (33)
- python判断元素在不在列表里 (34)
- python 字典删除元素 (34)
- react-admin (33)
- vscode切换git分支 (35)
- vscode美化代码 (33)
- python bytes转16进制 (35)