Flutter体验 Day 1-前言

前言

Flutter入门

Flutter 是 Goole 推出的开源 UI 工具包,通过 Dart 程序语言让开发人员藉由一套代码高效率的完成跨平台App开发,已支持 Mobile、Web、Desktop等应用平台,稳定版本从2018/12/5 释出 v1.0.0 直到近期 2021/7/2 已发展至 v2.2.3。


参赛过程 2021/9/8 释出 v2.5.0

官方说明这是历史上的一次大改版,主要在於效能的表现。


Flutter官网首页提到的三项特色如下:

  • 快速开发

在开发过程透过热重载(hot reload)的方式提供毫秒级的更新体验。

以往原生App开发在异动程序码後需要经过重新编译、打包、安装後才能确认异动的内容,有些应用程序的状态还会被重置,虽然这个过程会视App大小、复杂度而有所不同,但总是需要花费一段以秒为单位的时间。

  • 富有表现力与弹性UI设计

丰富的widget设计让开发人员自定义想要的介面设计,透过不同类型功能的widget部件能够快速"组合"出不同的介面。

  • 原生效能

Flutter App运行在其渲染引擎上,有自己的布局以及绘图系统,在不同的平台上透过分层式的设计架构提供良好的效能体验。

相关 App 的开发技术

目前 App 的开发技术有许多种类型,这边做个简单的分类与介绍 。

Web PWA

渐进式网路应用程序(Progressive Web Apps),透过 html、css、javascript 技术与响应式网页设计,在行动装置透过浏览器提供类似App的操作体验。

Native App

原生(Native) App是指在iOS或是在Android作业系统透过其对应的开发工具与程序语言结合底层SDK开发而成,也是目前应用程序的主要开发方法,其优点是整合度与效能体验是最好的,但是若公司想要在两大平台上推行App,就需要有不同人力协助开发与维护两套代码,相对成本会比较高。

Hybrid

因为上述开发成本的关系,目前已经有许多框架被提出,希望能过藉由开发一次代码而达到部署不同平台的方案,这些框架技术透过某些方式与原生SDK配合建构出相对应的程序运行环境。

  • H5 + Native

主要结合 Web + Native 技术,在 Native App上透过 Webview 载入 Web App,这类型的混搭方式适合本身对於网路技术已成熟但是 Native App 尚在起步的状况,可以快速以网页技术完成功能需求,对於整体的开发难度与成本可以大幅的降低。

框架:Cocos、Cordova

  • Javascript + Native 渲染

使用 Javascript 的程序语言在搭配 React-Native SDK 开发应用程序,对已上手 React 的人员来说可以不改变原本的开发习惯便可以投入App的开发,与上述H5不一样的地方在於其渲染是利用底层通信技术操作原生控件,效能会比运行在 WebView 上好一些。

框架:React-Native

  • 渲染引擎 + 原生

其原理是将UI运行在自制的渲染引擎上,不像 React-Native 需要使用原生控件,可以提供更顺畅的开发体验。

框架:Flutter

学习资源

从官网上提供的技术文件其实蛮详尽的,不过其中的内容太多容易教人眼花撩乱,因此搭配着前人研究的轨迹在入门上很容易的多,强烈建议可以直接从"Flutter实战"这本书开始搭配着官网的教学文件实作练习,将会有事半功陪的效果喔。

官方网站,提供最新的技术文件并附有各种范例程序。

简中版本的官方网站,大部份章节大都已完成翻译以及润稿,对於英文阅读会花时间的可以先从这边入门。

dart 简中版本的官方网站

该书深入浅出的归纳 Flutter 开发必需具备的基本知识。

作者为杜文,掘金专栏作者、Flutter中文网站社区创始人。

小结

flutter 以及 dart 对於已有经验的前端工程师来说进入的门槛不高,很适合作为 Web 转战 App 的一个跳板,虽然目前 Flutter 还不是职场上 App 开发的主流技术,不过随着社群的活跃,相信前端工作的热潮会转移至应用程序的开发上。


<<:  Rust-安装环境

>>:  Day 04:专案01 - 超简单个人履历03 | CSS简介

[Day5]C# 鸡础观念- 让变数学会七十二变的高手~运算子

运算子 程序的世界中,变数是无时无刻一直在变化的, 变数的变化也成为程序的精随所在, 但为甚麽变数会...

[资料库] 学习笔记 - 商城交易之产生订单

这次练习的题目是做出商城中产生订单的功能 功能主要需求:产生订单 (目前一笔订单只能买一个品项)、库...

Shadow Element:条件控制元件的创建、消灭

<if> 条件控制 <if> 元素根据 test 属性中的评估值决定其下的元...

Day8-流程控制表达

第四章也蛮简单的,Böhm与Jacopini证明所有程序都可使用三种流程控制表达 执行一个子程序,然...

{Day30}参加心得

参加心得 因为一定要连续三十天都发文,所以铁人赛会让自己不懒惰的学完自己一开始订定的每个目标,之後的...