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 即拥有了一套可运行小程序业务代码的宿主环境。

我们在开发第一个flutter小程序时需要注意什么的更多相关文章

  1. 如何快速地开发一个微信小程序

    如何快速地开发一个微信小程序呢?我觉得作为初学者,最好能有一个模板,然后改这个模板. 同样作为初学者,刚开始的时候我有下面的几个问题,后来通过问同学,我弄清楚了. 微信小程序可以连接MySQL或者Sq ...

  2. 第一个mpvue小程序开发总结

    前言 说起小程序,其实在去年我都还只试着照着官方文档写过demo的,不过现在这家公司小程序做得比较多,我来之后也参与了几个小程序的开发了,最开始那几个是用的wepy,最近一个开始转用mpvue开发,最 ...

  3. 搭建Spring开发环境并编写第一个Spring小程序

    搭建Spring开发环境并编写第一个Spring小程序 2015-05-27      0个评论    来源:茕夜   收藏    我要投稿 一.前面,我写了一篇Spring框架的基础知识文章,里面没 ...

  4. TODO:即将开发的第一个小程序

    TODO:即将开发的第一个小程序 微信小程序是一种全新的连接用户与服务的方式,它可以在微信内被便捷地获取和传播,同时具有出色的使用体验.个人理解小程序是寄宿在微信平台上的一个前端框架,具有跨平台功能, ...

  5. 手把手教你写一个RN小程序!

    时间过得真快,眨眼已经快3年了! 1.我的第一个App 还记得我14年初写的第一个iOS小程序,当时是给别人写的一个单机的相册,也是我开发的第一个完整的app,虽然功能挺少,但是耐不住心中的激动啊,现 ...

  6. 移动开发之【微信小程序】的原理与权限问题以及相关的简易教程

    这几天圈子里到处都在传播着这样一个东西,微信公众平台提供了一种新的开放能力,开发者可以快速开发一个小程序,取名曰:微信公众平台-小程序 据说取代移动开发安卓和苹果,那这个东东究竟是干吗用的?但很多人觉 ...

  7. 微信小程序的开发:通过微信小程序看前端

    前言 2016年9月22日凌晨,微信官方通过"微信公开课"公众号发布了关于微信小程序(微信应用号)的内测通知.整个朋友圈瞬间便像炸开了锅似的,各种揣测.介绍性文章在一夜里诞生.而真 ...

  8. 零基础开发一款微信小程序商城

    零基础开发一款微信小程序商城 一个朋友问我能不能帮忙做个商城?我一个完整网页都写不出的 菜鸟程序员,我该怎么拒绝呢?好吧,看在小程序这么火的形势下,我还是答应了!找了个开源项目,差不多花了三天时间搞定 ...

  9. 微信小程序开发教程 #043 - 在小程序开发中使用 npm

    本文介绍了如何在微信小程序开发中使用 npm 中包的功能,大大提高微信小程序的开发效率,同时也是微信小程序系列教程的视频版更新. 微信小程序在发布之初没有对 npm 的支持功能,这也是目前很多前端开发 ...

  10. Day1:第一个python小程序

    Day1:第一个python小程序与开发工具Pycharm 一.Hello World C:\Users\wenxh>python Python 3.6.2 (v3.6.2:5fd33b5, J ...

随机推荐

  1. FAQ: ansible playbook 中 tasks 与 handlers 的区别

    ansible自动化运维有两种执行方式,一种是对远程主机批量执行命令,使用ansible命令,直接调用模块加参数执行:另一种是对远程主机批量执行脚本,也是调用模块,但是要把参数按照yanl语法写到一个 ...

  2. 2021-11-18 wpf模板

    自定义模板 <ControlTemplate x:Key="ButtonStyle1" TargetType="Button"> <Borde ...

  3. Typescript:基础语法学习(尚硅谷 李立超)

    官方文档:https://www.tslang.cn/docs/handbook/typescript-in-5-minutes.html 搭建开发环境 npm i -g typescript安装完成 ...

  4. 合宙ESP32C3使用PlatformIO开发点亮ST7735S

    开发背景 模块使用的合宙的ESP32-C3(经典款) 购买连接 CORE ESP32核心板是基于乐鑫ESP32-C3进行设计的一款核心板,尺寸仅有21mm*51mm,板边采用邮票孔设计,方便开发者在不 ...

  5. SpringBoot3集成ElasticSearch

    目录 一.简介 二.环境搭建 1.下载安装包 2.服务启动 三.工程搭建 1.工程结构 2.依赖管理 3.配置文件 四.基础用法 1.实体类 2.初始化索引 3.仓储接口 4.查询语法 五.参考源码 ...

  6. API接口的应用场景

    API数据接口的应用非常广泛,不同的行业和领域都可以使用API数据接口来获取所需的数据,从而实现数据分析.数据挖掘.数据统计等操作.以下是一些常见的API数据接口应用场景: 电商平台:例如淘宝.京东等 ...

  7. Got permission denied while trying to connect to the Docker daemon socket at unix:///var/run/docker.so

    在安装Docker以后,执行命令出现错误. Got permission denied while trying to connect to the Docker daemon socket at u ...

  8. 图解Spark Graphx基于connectedComponents函数实现连通图底层原理

    原创/朱季谦 第一次写这么长的graphx源码解读,还是比较晦涩,有较多不足之处,争取改进. 一.连通图说明 连通图是指图中的任意两个顶点之间都存在路径相连而组成的一个子图. 用一个图来说明,例如,下 ...

  9. 基于 LLM 的知识图谱另类实践

    本文整理自社区用户陈卓见在「夜谈 LLM」主题分享上的演讲,主要包括以下内容: 利用大模型构建知识图谱 利用大模型操作结构化数据 利用大模型使用工具 利用大模型构建知识图谱 上图是之前,我基于大语言模 ...

  10. Iphone通过ssh进行访问

    Iphone通过usb进行ssh访问文件系统 在公司里wifi很不给力,而我又想通过ssh访问我的iphone,进行一些权限访问,这时我们该 itunnel_mux_rev71这个工具可以帮我们的忙 ...