如何开发你的第一个Flutter App?

news2024/11/22 11:43:30

Flutter这些年发展的很快,特别是在 Google 持续的加持下,Flutter SDK 的版本号已经来到了 3开头,也正式开始对 Windows、macOS 和 Linux 桌面环境提供支持。如果从 Flutter 特有的优势来看,我个人认为主要是它已经几乎和原生的性能表现没什么太大的差别,这一点是 React Native 和 Vue 等前端框架望尘莫及的。

在我们熟悉的应用中也有很多是使用 flutter 或更严谨的说部分用到 flutter 进行开发的,例如微信、闲鱼、淘宝、学习强国、微博等大家经常会使用到的 App。所以有国内大厂们做技术的案例,同时他们的参与也持续的丰富了技术生态,很多企业或个人开发者在考虑应用开发时不可避免的会将 flutter 作为技术选型的目标之一。

那我们作为一个普通开发者或者更直白的说,作为一个之前没有接触过 flutter 的开发者,我们应该如何去开发自己的第一个 flutter app 呢?

在这里我主要分享开发使用 flutter app 的一个环境配置相关的注意项。

环境配置的主要步骤可以分为6步:

1、软硬件系统的准备

硬件系统主要包括操作系统和内存,这里我们以 Windows 为例,操作系统需要是 64 位的 Windows 10 或以上版本;

磁盘的空间我们需要预留大约 30 GB,因为里面需要包括到 flutter SDK、Android SDK、IntelliJ IDEA、Visual Studio、Chrome、Git 和 Java SE 等工具。

相信这一步大家的电脑都能做到,如果准备完这一步,那相当于完成了第一步,将正式进入到环境的配置环节。

2、Java 环境配置

为什么会配置 Java 环境呢?因为 Flutter 是基于 Android 的,所以要安装 Java 环境。

Java 环境下载地址需要访问 Oracle 的官网,具体的安装步骤和正常的软件安装一样比较简单,这里就不进行赘述了。

3、配置 Flutter SDK

在这一步大家应该都知道 flutter 是使用的 dart 语法,所以在这一步我们也需要同步的集成 dart sdk ,按照 flutter sdk 也非常简单,只需要在官网下载安装包即可。

另外这里需要注意的是解压缩后的 zip 文件,需要选择一个合适的文档位置存放。这个位置用来保存 flutter sdk 和 dart sdk,此后非必要不要随意进行移动。

打开解压后的文件会看到 flutter_console 文件,后面我们使用 flutter 命令时,也需要通过双击这个文件进来再执行flutter相关命令。

安装成功后,需要复制代码下面的代码在命令行验证环境配置。

flutter doctor

如果看到下面的这个界面就代表 flutter 安装成功了。

4、安装 IntelliJ IDEA

IntelliJ IDEA 也是访问官网下载页面,这里我们下载并安装个人免费的 Community(社区版)就够用了。

安装完毕后,启动 IDEA,选择“New Project”(新建项目),接着依次选择 Android -> Install SDK。

最后我们还需要在 IntelliJ IDEA 中安装 IDEA 的 Dart 和 Flutter 插件,安装 Flutter 插件时,会提示安装 Dart 插件,一并安装即可。

5、安装 Chrome

这个就不用多说了,我相信开发者的电脑都有 Chrome 浏览器,如果没有的话直接百度下进行安装即可,这个安装非常简单也不用多说。

可能也有小伙伴会问为什么需要安装Chrome,因为我们主要用于预览和调试 Web App页面。

6、安装 Visual Studio

Visual Studio 用于开发运行在 Windows 中的软件,下载 Community(免费的个人社区) 版本即可。

安装时可以对照下面的图进行配置选择:

到这一步,整个环境配置的流程就完成了,我们可以启动 IDEA 开启第一个 flutter app 的搭建。

7、小程序运行环境集成

另外针对很多同学是直接从小程序转到flutter,同样一个功能业务仅需一次小程序开发,即可实现在除了微信端的其它 App 中也运行起来。

原理其实挺简单的,FinClip 提供了小程序 SDK 给 Flutter 应用进行集成,这样以来 App 即拥有了一套可运行小程序业务代码的宿主环境。

集成 SDK 需要在 FinClip 平台中创建应用并绑定小程序,获得每个应用专属的 SDK KEY 及 SDK SECRET ,随后可以在集成 SDK 时填写对应的参数。打开小程序时 SDK 会自动初始化,并校验 SDK KEY,SDK SECRET 与BundleID (Application ID) 是否正确。

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.coloradmin.cn/o/1194471.html

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈,一经查实,立即删除!

相关文章

6.2.1 邻接矩阵

邻接矩阵 表示方法:优点:缺点:适用情况:案例代码 邻接矩阵是一种常见的图的存储结构,用于表示图中顶点之间的连接关系。它是一个二维数组,其中行和列分别表示图中的顶点,而数组中的值表示连接顶…

工商银行卡安全码怎么看

工商银行的安全码,作为一项至关重要的安全措施,旨在保护用户的银行账户和交易安全。为了查看工商银行的安全码用户需要按照以下步骤操作: 首先,用户需要使用电脑或手机访问工商银行的网上银行平台。在平台首页,用户需要…

创建一个事务级临时表或者会话级临时表继续测试,在什么情况下临时表里的数据会消失

目录 一、测试事务级临时表 1、创建事务级临时表 2、插入测试数据 3、查看表中的数据 4、提交事务 5、再次查看表中数据 二、测试会话级临时表 1、创建会话级临时表 2、插入测试数据 3、查看表中的数据 4、提交事务再次查看数据 5、关闭当前会话 6、再次进入数据库…

Android发热监控实践

一、背景 相信移动端高度普及的现在,大家或多或少都会存在电量焦虑,拥有过手机发热发烫的糟糕体验。而发热问题是一个长时间、多场景的指标存在,且涉及到端侧应用层、手机 ROM 厂商系统、外界环境等多方面的影响。如何有效衡量发热场景、定位…

【GUI软件开发】小红书评论采集:自动采集1w多条,含二级评论!

文章目录 一、爬取目标1.1 效果截图1.2 演示视频1.3 软件说明 二、代码讲解2.1 爬虫采集模块2.2 软件界面模块2.3 日志模块 三、附完整源码及软件 一、爬取目标 您好!我是马哥python说 ,一名10年程序猿。 我用python开发了一个爬虫采集软件&#xff0c…

8年经验之谈 —— 性能压测工具选型对比!

本文致力于给出性能压测的概念与背景介绍,同时针对市场上的一些性能压测工具,给出相应的对比,从而帮助大家更好地针对自身需求实现性能压测。 为什么要做性能压测 在介绍性能压测概念与背景之前,首先解释下为什么要做性能压测。…

基于人群行为分析技术的AI智能公园管理系统

一、系统概括 智能公园视频监控管理系统旨在利用人群行为分析技术,结合先进的物联网、人工智能和大数据分析等技术手段,实现对公园内人流量、行为活动和安全问题的实时监测与管理。旭帆科技智能公园视频监控管理系统将通过智能视频监控、感知设备和数据…

thinkphp6 起步

1、安装 composer create-project topthink/think6.0 tp62、使用多应用模式,你需要安装多应用模式扩展think-multi-app composer require topthink/think-multi-app3、config/app.php中,将 ‘auto_multi_app’ > flase, 改为true; 需要自…

远程运维的定义以及优点详细讲解-行云管家

对于IT运维小伙伴而言,远程运维是最平常不过的一件事情了。比如下班了需要工作,可以远程运维就好了;比如帮助用户远程安装远程运维软件等等。今天我们就一起来简单聊聊远程运维的定义以及优点,顺便看看市面上哪款远程运维软件好用…

AUTOSAR CAN Busoff处理

Busoff产生机制 CAN通信Busoff即总线关闭态,一个CAN节点有三种状态,主动错误状态、被动错误状态以及总线关闭态。如下图可知进入Busoff的原因是因为发错错误大于255,在此状态节点不能收发报文。 单节点特殊情况 根据CAN规范,单节点发送报文NO ACK的错误也会使发送节点的T…

绕过防盗链的几种方式

需要进行防盗链的绕过,我们必须先要了解Iframe、Referer和XMLHttpRequest对象的基本知识 目录 Iframe 基本用法 sandbox 属性 loading 属性 Referer Referrer-policy 设置referrer的两种方法 下面举三个将referrer设置为no-referrer的例子: 首先…

js运算,笔试踩坑知识点

文章目录 前端面试系列运算符记住口诀先计算 后 赋值赋值从右向左 和 - -计算从左向右括号里的加减优先于括号外的乘除交换俩数的值答案 前端面试系列 js运算 笔试踩坑知识点 前端js面试题 (三) 前端js面试题(二) 前端js面试题 (…

【数据在内存中的存储】

提示:文章写完后,目录可以自动生成,如何生成可参考右边的帮助文档 目录 前言 1. 整数在内存中的存储 2. 大小端字节序和字节序判断 2.1 什么是大小端? 2.2 为什么有大小端? 2.3 练习 2.3.1 练习1 2.3.2 练习2 2.3.3 练习3 2.3.4 …

uniapp发行web页面在老版本浏览器打开一片空白

uniapp发行的web页面(菜单->发行->网站-PC Web或手机H5),对于一些老的浏览器(或内核),打开一片空白; 而在新版本的浏览器中打开却正常。这是因为那些版本较低的浏览器不支持ES6的语法和新…

【Windows Docker:安装nginx】

拉镜像 docker pull nginx运行初始镜像 docker run -d -p 80:80 --name nginx nginx拷贝文件 docker cp nginx:/etc/nginx/nginx.conf D:/dockerFile/nginx/nginx.conf docker cp nginx:/etc/nginx/conf.d D:/dockerFile/nginx/conf.d docker cp nginx:/usr/share/nginx/htm…

JAVA基础5:分支语句

1.流程控制 1)流程控制语句分类 顺序结构分支结构(if,switch)循环结构(for,while,do...while) 2.顺序结构 顺序结构是程序中最简单最基本的流程控制,没有特定的语法结构,按照代码的先后顺序,依次执行&a…

WebGL-Vue3-TS-Threejs:基础练习 / Javascript 3D library / demo

一、理解Three.js Three.js是一个用于WebGL渲染的JavaScript库。它提供了一组工具和类,用于创建和渲染3D图形和动画。简单理解(并不十分准确),Three.js之于WebGL,好比,jQuery.js之于JavaScript。 OpenGL …

Gated Context Aggregation Network for Image Dehazing and Deraining(GCANet)

1 总体概述 GCANet是端到端去雾的一篇代表性的文章,它摒弃以往使用手工设计的先验以及大气散射模型的使用,直接通过原始有雾图像估计出无雾图像J与有雾图像I之间的残差,图像恢复阶段直接使用网络输出的残差与输入有雾图像I之间的加和完成去雾…

跨境电商商城源码,支持多语言,开启全球贸易新篇章!

随着全球化的不断深入,跨境电商已经成为越来越多企业的选择。我们为您提供的跨境电商源码产品,具有强大的多语言支持功能,可轻松扩展至多个语言,助您迅速占领全球市场,实现业务的国际化发展。 一、多语言支持&#xff…

uniapp蓝牙搜索设备并列表展示

1.需求:3.0的桩可以值扫码通过蓝牙名字直接绑定,2.0的桩二维码无蓝牙名称则需通过蓝牙列表来绑定 2.碰到问题 1.0 蓝牙列表需要去重(蓝牙列表通过deviceId去重再放进展示列表) 2.0页面会卡顿(调用my.stopBluetoothDevi…