使用Flutter 构建Web应用逻辑解析

目录
  • 一、起源
  • 二、渲染逻辑
  • 三、打包处理
  • 四、配置开发环境
  • 测试应用
  • 结束语

一、起源

Flutter 的起源就很有意思，大家都知道早期 Flutter 最先支持的平台是 Android 和 iOS，至今最核心的维护平台依然是 Android 和 iOS，但是事实上Flutter 来源于前端 Chrome 团队。另外前端的同学应该知道，Dart 起初也是为了 Web 而生，事实上 Dart 诞生至今也有 10 年了，所以可以说 Flutter 其实充满了 Web 的基因。

二、渲染逻辑

首先 Flutter Web 和其他 Flutter 平台一样共用一套 Framework，理论上绝大多数的控件实现都是通用的，而由于 Web 的特殊场景，Flutter Web 在 "几经周折" 之后落地了两种不同的渲染逻辑: html 和 canvaskit，它们的不同之处在于:

  • html 的实现更轻量级，渲染实现基本依赖于 Web 平台的各种 HTMLElement，它更贴近现在的 Web 环境，所以有时候我们也称呼它为 DomCanvas。
  • canvaskit 的实现可以说是更贴近 Flutter 理念，因为它其实就是 Skia + WebAssembly 的实现逻辑，能和其他平台的实现更一致，性能更好，比如滚动列表的渲染流畅度更高等。

Flutter For Web和Flutter For Mobile的上层实现基本类似，但是在下层的实现有很大的差别。Flutter For Mobile中的绘制是使用了Engine中的Dart、Skia和Text，然后再调用iOS和Android提供的底层绘制能力来实现的。

三、打包处理

默认情况下 Flutter Web 在打包渲染时会把 html 和 canvaskit 都打包进去，然后再 PC 端使用 canvaskit 模式，在 mobile 端使用 html 模式，当然您也可以在打包时通过 flutter build web --web-renderer html --release 之类的配置强行指定渲染模式。

四、配置开发环境

  • 首先需要master或者dev渠道的Flutter SDK来获取Web支持
flutter channel stableflutter upgradeflutter config --enable-web
  • 创建一个名为myapp的应用
flutter create myappcd myapp
  • 编译当前应用
flutter build web

你可以通过运行 release 模式 (flutter run --release) 或运行 flutter build web 来构建 release 模式的应用。同时，你可以使用（--web-renderer html）或者（--web-renderer canvaskit）分别切换 HTML 或 CanvasKit 渲染器。

  • 为现有项目添加 Web 支持
flutter create .

测试应用

你可以在命令行使用 flutter run -d chrome 命令测试应用程序。这会构建出 debug 版本的应用。

对于增加了对Flutter For Web支持的Flutter应用，在代码目录中增加了一个Web文件夹，其中index.html 文件是整个Web应用的入口。其中引用了一个JS文件是main.dart.js，但在工程目录中找不到该文件。其实这个文件是Flutter工程编译后生成的js文件，如果曾编译成功过这个工程，会在编译后的build文件夹中看到该js文件。

和普通的Flutter应用一样，主要的功能实现还是在工程中的lib文件夹中。但是如果需要有资源文件、js 文件等 web 所需资源，可以放到Web这个文件夹中。

结束语

关于flutter web的起源跟构建学习到这里就结束了，更多关于Flutter 构建Web应用的资料请关注我们其它相关文章！

赞 (0)

相关推荐

  • Flutter组件生命周期和App生命周期示例解析

    目录 引言 无状态组件(StatelessWidget) 有状态组件(StatefulWidget) StatefulWidget生命周期详细分析 1. createState 2. initState 3. didChangeDependencies 4. build 5. didUpdateWidget 6. deactivate 7. dispose 8. reassemble App生命周期 结束语 引言 在Flutter开发中,所有的组件和页面都继承自Widget,所以探索页面的生命周

  • 正确在Flutter中添加webview实现详解

    目录 前言 安装 运行项目遇到的问题 前言 为什么要在flutter中引入webview?这不是废话么,当然是为了加载一个网页,这不是移动端最基本的需求么,哈哈!说的真不错,接下来我要是告诉你我的用法,你可能要大吃一惊.我的用处很简单,那就是在webview中再加载一个flutter编译成web的项目.有没有吓到你.别怕,我这么做的原因很简单,就是为了热更新.可能在flutter中实现热更新的方法有很多,但我敢说我这么做就是最好的热更新方式.当我内容发生变更是时候,我不需要继续去审核,只需要在服

  • Flutter 包管理器和资源管理使用学习

    目录 什么叫包管理器 Flutter 包管理器 Pub仓库 资源管理 配置图片资源 配置全局字体资源 结束语 什么叫包管理器 包管理器就是用来管理程序运行依赖的一个配置应用.在程序运行中,我们会用到各种各样的第三方程序包,若我们手动管理这些程序,他将变得十分臃肿.这时候便诞生了包管理器,类似于手机中的AppStore.比如说我们手机中的某个程序更新了,我们就可以通过AppStore来更新.同样的我们可以通过包管理来更新我们程序中用到的依赖包. Flutter 包管理器 Flutter包管理器是Y

  • Flutter状态管理Provider示例解析

    Flutter状态管理Provider示例解析

    目录 什么是状态管理 常见的状态管理框架有哪些 Provider Redux GetX Provider 使用 添加依赖 导入应用 定义需要共享的数据 在应用程序入口初始化 使用共享数据 状态管理的好处 结束语 什么是状态管理 状态管理是一个十分广泛的概念,因为状态无处不在.从广义角度讲状态管理就是页面跟代码.跟服务器进行数据同步.例如:你在某购物应用内,添加了一件商品,你需要在购物车页面进行展示.这就是一种状态.相反的,你在商品页面点击了添加到购物车,却在购物车页面没有发现或者过段时间它才展示

  • flutter text组件使用示例详解

    目录 正文 Text组件 Text组件构造器上的主要属性 正文 flutter组件的实现参考了react的设计理念,界面上所有的内容都是由组件构成,同时也有状态组件和无状态组件之分,这里简单介绍最基本的组件. 在组件代码的书写方式上,web端开发的样式主要有由css进行控制,而客户端开发根据使用的技术栈不同,写法也稍微有些不同:ReactNative的写法和web比较类似,但是ReactNative是使用StyleSheet.create()方法创建样式对象,以内联的方式进行书写. import

  • Flutter Widget之FutureBuilder使用示例详解

    Flutter Widget之FutureBuilder使用示例详解

    目录 正文 正文 本质上Flutter和Dart是异步的,Dart是Futures使你能够管理IO而不用担心线程或死锁. 例如,从应用程序外部加载数据需要时间,而Futures允许Dart先处理其他任务直到请求的数据可用. 但是涉及Future时,你如何构建Flutter小部件呢? 输入FutureBuilder,这是处理Futures的构造器 FutureBuilder( future: _data, builder: _myBuilderFunction, ) FutureBuilder让你

  • Android开发之Flutter与webview通信桥梁实现

    前言 最近业务有需求需要在flutter内使用webview进行内嵌H5进行展示,此时需要涉及到H5与flutter之间额通信问题.比如发送消息或者H5调用Flutter的相机等等 webview选型 这里我们使用官方维护的插件webview_flutter 如何通信? webview在初始化的时候需要向容器内注册一个全局方法供H5进行调用 WebView( initialUrl: 'https://flutter.dev', javascriptMode: JavascriptMode.unr

  • 使用Flutter 构建Web应用逻辑解析

    目录 一.起源 二.渲染逻辑 三.打包处理 四.配置开发环境 测试应用 结束语 一.起源 Flutter 的起源就很有意思,大家都知道早期 Flutter 最先支持的平台是 Android 和 iOS,至今最核心的维护平台依然是 Android 和 iOS,但是事实上Flutter 来源于前端 Chrome 团队.另外前端的同学应该知道,Dart 起初也是为了 Web 而生,事实上 Dart 诞生至今也有 10 年了,所以可以说 Flutter 其实充满了 Web 的基因. 二.渲染逻辑 首先

  • .net core使用FastHttpApi构建web聊天室实例代码

    前言 一般在dotnet core下构建使用web服务应用都使用asp.net core,但通过FastHttpApi组建也可以方便地构建web服务应用,在FastHttpApi功能的支持下构建多人聊天室是件非常简单的事情,通过组件并不需要了解WebSocket知识即可简单构建,以下讲解一下通过FastHttpApi如何构建一个简单的多人聊室. 创建项目 使用FastHttpApi构建一个WEB服务只需要创建一个普通ConsoleApp( 控制台应用) 创建项目后需要在Nuget中添加引用Fas

  • 使用Python FastAPI构建Web服务的实现

    FastAPI是一个使用 Python 编写的 Web 框架,还应用了 Python asyncio 库中最新的优化.本文将会介绍如何搭建基于容器的开发环境,还会展示如何使用 FastAPI 实现一个小型 Web 服务. 起步 我们将使用 Fedora 作为基础镜像来搭建开发环境,并使用 Dockerfile 为镜像注入 FastAPI.Uvicorn和 aiofiles这几个包. FROM fedora:32 RUN dnf install -y python-pip \ && dnf

  • 带你使用webpack快速构建web项目的方法

    带你使用webpack快速构建web项目的方法

    使用webpack构建web项目以及热部署插件的使用,按以下步骤,能帮助你快速构建和理解~ 详细学习还得靠官方文档! 一,基础构建部分 大前提!你得先安装了Node.js此处不赘述. 1,创建一个文件夹 2,在当前文件夹子下打开命令行工具 3,项目初始化(创建package.json文件) npm init -y 4,安装依赖 版本搭配如下: "devDependencies": { "webpack": "^4.17.1", "web

  • Flutter 构建一个常用的页面框架

    Flutter 构建一个常用的页面框架

    最终实现的结果如上图所示,顶部共用一个导航栏,底部有四个图标导航,点击对应的图标跳转到对应的页面. 图标准备 本次例程需要4个图标,2种颜色,可以从 iconfont 中找到自己需要的图标下载不同的颜色使用.然后在 pubspec.yaml 中的 assets 指定素材所在目录.需要注意的是如果是 png 文件直接指定整个目录即可,但如果是 jpg 格式,则需要同时指定文件名及后缀. BottomNavigationBar 简介 BottomNavigationBar的构造函数如下: Botto

  • Java 内置Http Server构建web应用案例详解

    Java 内置Http Server构建web应用案例详解

    一.概述 使用Java技术构建Web应用时, 我们通常离不开tomcat和jetty之类的servlet容器,这些Web服务器功能强大,性能强劲,深受欢迎,是运行大型Web应用的必备神器. 虽然Java的设计初衷就是用来开发大型应用的,然而有时候我们开发的程序只是简单的小型应用,对于功能的需求和性能的要求并不高, 可能仅仅就几百行甚至几十行代码,这个时候使用tomcat之类的Web服务器去运行就显得有点大材小用了. 比如说只是将数据库中的数据读出来转换成JSON,以Web服务的形式吐给调用方这样

  • Web安全解析Boolean注入攻击原理

    Web安全解析Boolean注入攻击原理

    目录 1. Boolean注入攻击 2. Boolean注入代码分析 1. Boolean注入攻击 Boolean注入攻击的测试地址:http://127.0.0.1/sqli/boolean.php?id=1. 访问该网站时,页面返回yes,如图19所示. 图19 访问id=1时页面的结果 在URL后添加一个单引号,再次访问,发现返回结果由yes变成no,如图20所示. 图20 访问id=1'时页面的结果 访问id=1' and 1=1%23,id=1' and 1=2%23,发现返回的结果分

  • Web网络安全解析cookie注入攻击原理

    Web网络安全解析cookie注入攻击原理

    目录 cookie注入攻击 cookie注入代码分析 cookie注入攻击 cookie注入攻击的测试地址:http://127.0.0.1/sqli/cookie.php. 发现URL中没有GET参数,但是页面返回正常,使用Burp Suite抓取数据包,发现cookie中存在id=1的参数,如图56所示. 图56 cookie数据 修改cookie中的id=1为id=1',然后再次访问该URL,发现页面返回错误.接下来,分别修改cookie中id=1 and 1=1和id=1 and 1=2

  • Web网络安全解析宽字节注入攻击原理

    Web网络安全解析宽字节注入攻击原理

    目录 宽字节注入攻击 宽字节注入代码分析 宽字节注入攻击 宽字节注入攻击的测试地址:http://127.0.0.1/sqli/kuanzijie.php?id=1. 访问id=1',页面返回的结果如图46所示,程序并没有报错,反而多了一个转义符(反斜杠). 图46 单引号被转义 从返回的结果可以看出,参数id=1在数据库查询时是被单引号包围的.当传入id=1'时,传入的单引号又被转义符(反斜杠)转义,导致参数ID无法逃逸单引号的包围,所以在一般情况下,此处是不存在SQL注入漏洞的.不过有一个特

  • Web安全解析报错注入攻击原理

    Web安全解析报错注入攻击原理

    目录 1.报错注入攻击 2.报错注入代码分析 1.报错注入攻击 报错注入攻击的测试地址:http://127.0.0.1/sqli/error.php?username=1. 访问该网址时,页面返回ok,如图28所示. 图28 访问username=1时页面的的结果 访问http://127.0.0.1/sqli/error.php?username=1',因为参数username的值是1',在数据库中执行SQL时,会因为多了一个单引号而报错,输出到页面的结果如图29所示. 图29 访问user

随机推荐