【Flutter点滴知识 】
文章平均质量分 78
barnett_y
成功道路并不拥挤,因为坚持的人不多。。。
展开
-
Flutter — 根据不同的屏幕尺寸有效缩放 UI
Flutter — 根据不同的屏幕尺寸有效缩放 UI转载 2022-10-15 09:46:34 · 674 阅读 · 0 评论 -
Flutter 产物分析与减包方案
flutter在混合开发场景下,Flutter 的包增量略大一直是被大家诟病的一点,并且 Google 官方明确表示了 Flutter 不会支持动态化,并且目前 Flutter SDK 官方还没有提供一套定制方案。因此想要瘦身,那么只能自己动手丰衣足食了。所谓减包,前提条件是必须知道产物内容有什么?产物里有哪些部分可以减?被减掉的部分我们要怎么加回来?因此本文将围绕“产物分析”与“减包方案”两个主题来分别论述 iOS 与 Android 两端的 Flutter 减包原理与方案。那么,先从 iOS转载 2021-05-07 09:34:22 · 1162 阅读 · 1 评论 -
Flutter 的性能分析、工程架构与细节处理
出品/ 有道智云 编辑/ Ryan 来源:有道技术团队(ID:youdaotech)一、为何 Flutter跨端技术众多,为何选择 Flutter?它能带来哪些优势,有哪些缺点?先看看具体的工程效果:https://link.zhihu.com/?target=https%3A//v.qq.com/txp/iframe/player.html%3Fvid%3Dz316221rmveweb 端效果体验:https://link.zhihu.com/?target=https%3A//.转载 2021-05-07 09:33:18 · 694 阅读 · 0 评论 -
快手-开眼快创 Flutter 实践
快手-开眼快创 Flutter 实践本文主要介绍快手开眼快创 App 在 Flutter 上的一些实践。开眼快创是围绕商业化广告创意构建的一款产品,目标人群涵盖供应商、代理商、广告主、商家号、视频行业从业者等,产品目标是提供智能化生产素材相关产品能力,达到降低商业属性用户的生产(创意制作)门槛,提升广告创意质量,提高素材消耗。主要功能包含:创作:模板视频、视频编辑、一键大片 创意灵感:精选案例、快手热门、优质广告 创意学院:创意课程、课程直播等 数据分析:广告素材投放数据报表等.转载 2021-04-19 20:28:56 · 5773 阅读 · 0 评论 -
Flutter Key
前言在开发 Flutter 的过程中你可能会发现,一些小部件的构造函数中都有一个可选的参数——Key。刚接触的同学或许会对这个概念感到很迷茫,感到不知所措。在这篇文章中我们会深入浅出的介绍什么是 Key,以及应该使用 key 的具体场景。什么是Key在 Flutter 中我们经常与状态打交道。我们知道 Widget 可以有 Stateful 和 Stateless 两种。Key 能够帮助开发者在 Widget tree 中保存状态,在一般的情况下,我们并不需要使用 Key。那么,究竟什么时候原创 2021-04-07 11:47:07 · 277 阅读 · 0 评论 -
Flutter Engage China 视频合集
在上周的 Flutter Engage China 活动中,Google Flutter 团队和来自国内的开发者们共同探讨和交流 Flutter 的最新更新、实践和未来的发展。虽然只能通过线上交流,但是在活动中嘉宾们的精彩分享和讨论也吸引了众多 Flutter 开发者互动交流,畅谈创新和合作。为了帮助更多开发者们更顺利地进行开发工作,我们将公开活动中嘉宾们分享的内容,并带您回顾精彩亮点,希望能对您有所帮助。重点内容回顾Flutter 2 更新介绍 腾讯视频链接 https://v.qq..转载 2021-04-02 16:55:42 · 276 阅读 · 0 评论 -
Flutter Boost 混合开发框架初探
一、Flutter Boost简介众所周知,Flutter是一个由C++实现的Flutter Engine和由Dart实现的Framework组成的跨平台技术框架。其中,Flutter Engine负责线程管理、Dart VM状态管理以及Dart代码加载等工作,而Dart代码所实现的Framework则负责上层业务开发,如Flutter提供的组件等概念就是Framework的范畴。随着Flutter的发展,国内越来越多的App开始接入Flutter。为了降低风险,大部分App采用渐进式方式引入Flu转载 2021-04-02 08:47:02 · 864 阅读 · 0 评论 -
从零开始建立一个Dart服务器
无框架的服务器端Dart系列中的第1部分。我真的很喜欢能够使用和我写Flutter应用时一样的语言来编写服务器代码。做到这一点的两个主要框架是Aqueduct和Angel。不幸的是,Angel正在被废弃,Aqueduct已经有一段时间没有发布稳定的版本了(截至2020年12月)。既然A的都出来了,那就到了B计划的时候了。框架虽好,但总有一点魔力。作为Dart核心库之一的dart:io库,已经包含了制作HTTP服务器所需的低级类和函数。所以本文将教你如何自己创建这样一个服务器。...转载 2021-04-02 08:35:55 · 1622 阅读 · 0 评论 -
Flutter 清除应用缓存
清除应用缓存是 APP 常用的功能之一。清除缓一般只有 2 个操作:获取缓存大小 清除缓存数据本文通过实现一个缓存管理类,来操作应用缓存。定义缓存管理类缓存管理类,是一个简单的缓存管理封装,他通过几个接口共 APP 组件使用。该类需要使用到以下依赖:path_provider:获取目录;首先建立缓存管理类,并规划好一个大纲:/// 缓存管理类/// ./lib/utils/cache_util.dartclass CacheUtil { /// 获取缓存大小 .原创 2021-03-30 09:50:03 · 6081 阅读 · 2 评论 -
Flutter Key使用
前言在开发 Flutter 的过程中你可能会发现,一些小部件的构造函数中都有一个可选的参数——Key。刚接触的同学或许会对这个概念感到很迷茫,感到不知所措。在这篇文章中我们会深入浅出的介绍什么是 Key,以及应该使用 key 的具体场景。什么是Key在 Flutter 中我们经常与状态打交道。我们知道 Widget 可以有 Stateful 和 Stateless 两种。Key 能够帮助开发者在 Widget tree 中保存状态,在一般的情况下,我们并不需要使用 Key。那么,究竟什么时候原创 2021-03-26 16:15:17 · 1129 阅读 · 0 评论 -
Flutter2.0构建Web应用两种渲染器比较
前言接触Flutter开发的时间并不长,最早关注到Flutter,就是听说它可以跨端开发iOS,Android,Web端。直到上周看了Flutter2.0的发布,才知道,原来跨web端才刚刚stable呀...那我们来真实的体验一下,Flutter发布web应用究竟靠不靠谱?开启web端构建使用下面这个命令才可以开启Web端构建的支持flutter config --enable-web复制代码开启后我们再次输入flutter config可以看到创建新项目这样每次新原创 2021-03-17 10:32:10 · 1650 阅读 · 0 评论 -
FVM - Mac上管理 Flutter 多版本的神奇
随着flutter2.0的发布,相信很多同学都是激动的心,颤动的手,想快速尝试一波,做一个吃螃蟹的人,本人也是怀揣着这样的心情,头脑一热的将本地的flutter版本更新到2.0了,螃蟹吃完了,但是回到项目代码时,一打开,一片红,各种报错,我滴个乖乖~,又赶紧将版本回退到之前的稳定版本!本着又想吃螃蟹,又想兼顾公司项目代码的想法,在这里介绍一款flutter的版本管理神器 FVM,这里安装的话,我推荐使用Homebrew进行fvm的安装。如果你的电脑没有Homebrew 的话,可以去它的官网查看安装方转载 2021-03-16 09:53:15 · 3699 阅读 · 2 评论 -
Android App性能评测分析
Android App性能评测分析-启动时间篇Android App性能评测分析-网络流量篇Android App性能评测分析-内存篇Android App性能评测分析-cpu占用篇Android App性能评测分析-流畅度篇转载 2021-03-12 12:00:50 · 351 阅读 · 0 评论 -
Flutter APP 启动过程源码分析
提示:本文设计到的 Flutter framework 层源码是基于 Flutter 1.20.0void main() => runApp(MyApp());void runApp(Widget app) { WidgetsFlutterBinding.ensureInitialized() ..scheduleAttachRootWidget(app) ..scheduleWarmUpFrame();}三行代码代表了Flutter APP 启动..转载 2021-03-10 09:19:54 · 1245 阅读 · 0 评论 -
Flutter 上的内存泄漏监控
一、前言Flutter 所使用的 Dart 语言具有垃圾回收机制,有垃圾回收就避免不了会内存泄漏。在 Android 平台上有个内存泄漏检测工具 LeakCanary[1], 它可以方便地在 debug 环境下检测当前页面是否泄漏。本文将会带你实现一个 Flutter 可用的 LeakCanary,并讲述怎么用该工具检测出了 1.9.1 Framework 上的两个泄漏。二、Dart 中的弱引用在具有垃圾回收的语言中,弱引用是检测对象是否泄漏的一个好方式。我们只需弱引用观测对象,等待下次 Full转载 2021-03-10 09:18:29 · 946 阅读 · 0 评论 -
如何代码获取 Flutter APP 的 FPS
众所周知,官方提供了好几个办法来让我们在开发 Flutter app 的过程中可以使用查看 fps等性能数据,如devtools,具体见文档Debugging Flutter apps、Flutter performance profiling等。但是这些工具统计到的数据充其量只能算开发过程中的“试验室”数据,假如需要统计app 在线上在用户手机上的运行情况,该如何在 flutter 端代码里自己计算性能数据,比如fps这个值呢?经过阅读源码,发现其实很简单,给window对象注册onR...转载 2021-03-10 09:16:31 · 694 阅读 · 0 评论 -
Flutter 中性能优化工具的使用
本文主要介绍 Flutter UI 代码优化工具 PerformanceOverlay 和 内存优化工具 Observatory的介绍和使用。代码优化工具 : PerformanceOverlayA. 在 Flutter 项目中打开 PerformanceOverlay1. 首先打开 PerformanceOverlay 工具,在 AndroidStudio -> Preference -> Language&Frameworks -> Flutter 中打开相应开关,如.转载 2021-03-10 09:14:26 · 527 阅读 · 0 评论 -
关于 Flutter v2 我整理了16个重要特性
谷歌开发者官文https://mp.weixin.qq.com/s/EzS3dtpZB_i9p358qqlBpg7 大平台 -> windows、macos、linux、web、embedded、ios、androidhttps://flutter.gskinner.com/ https://github.com/gskinnerTeam/flutter-folioweb 平台优化、进入稳定版 3 个方向 pwa: 缓存、push 推送服务、桌面快捷、消息提示转载 2021-03-10 09:03:37 · 727 阅读 · 0 评论 -
Flutter的setState更新原理和流程
调用 setState()必须是没有调用过 dispose()方法,不然出错,可通过mounted属性来判断调用此方法是否合法。if (mounted) { setState(() {});}清晰的看到在framework.dart内setstate方法除了一些条件判断就是:_element.markNeedsBuild();那我们看看markNeedsBuild。Element 类 markNeedsBuild方法 void markNeedsB...转载 2021-03-02 16:41:46 · 784 阅读 · 0 评论 -
异步编程-Future
Future可以说是在Dart异步编程中随处可见,比如一个网络请求返回的是Future对象,或者访问一个SharedPreferences返回一个Future对象等等。异步操作可以让你的程序在等待一个操作完成时继续处理其它的工作。而Dart 使用Future对象来表示异步操作的结果。我们通过前面文章都知道Dart是一个单线程模型的语言,所以遇到延迟的计算一般都需要采用异步方式来实现,那么Future就是代表这个异步返回的结果。1. 复习几个概念1.1 事件循环EventLoopDart的...转载 2021-03-02 14:11:34 · 1655 阅读 · 0 评论 -
Flutter异常捕获和Crash崩溃日志收集
前言和Android中的Java语言类似,Dart中也可以通过try/catch/finally来捕获代码块异常。不同的是在Dart中发生异常的时候flutter APP并不会崩溃。在我的实践中,debug版中的Dart异常会表现为红屏加异常信息,而release版则是空白的白屏。下面我们就从源码追溯Flutter的异常和捕获Flutter捕获的异常Flutter为我们提供了部分异常捕获。在flutter开发中大家肯定遇到过屏幕编程红色并带有错误信息的情况,甚至在Widget宽度越界时也会出现这转载 2021-01-15 10:40:52 · 3103 阅读 · 0 评论 -
捕获 flutter app的崩溃日志并上报
flutter 的崩溃日志收集主要有两个方面:flutter dart 代码的异常(包含app和framework代码两种情况,一般不会引起闪退,你猜为什么) flutter engine 的崩溃日志(一般会闪退)Flutter App 代码异常捕获人写的代码是无数异常交织起来的偶然产物,代码发生异常才是正常情况。除了在关键的地方加上try-catch让它们变成已知异常之外,抓到未知异常才是真本事。比如下面的一段代码中的try-catch是无效的: 12345..转载 2021-01-15 10:39:11 · 5017 阅读 · 1 评论 -
Flutter 最常出现的错误
哔哩哔哩漫画APP实践Flutter也有大半年时间了,我针对线上收集到的错误进行分析,挑选出了一些有一般代表性的错误,列在本文,可供实践 Flutter 的初学者们作为一点参考。典型错误一:无法掌握的Future典型错误信息:NoSuchMethodError: The method 'markNeedsBuild' was called on null.这个错误常出现在异步任务(Future)处理,比如某个页面请求一个网络API数据,根据数据刷新 Widget State。异步任务结束在页转载 2021-01-08 13:57:12 · 2425 阅读 · 0 评论 -
Flutter状态管理
一、什么是状态管理?为什么要状态管理?一般开发一款应用程序,页面间极有可能需要互相进行数据传递,而这里的数据传递也就是指页面间的状态同步(管理)。页面内部的状态是可以用StatefulWidget维护其状态,当我们需要使用跨组件的状态时,StatefulWidget 将不再是一个好的选择。在多个 Widget 之间进行交流的时候,虽然你可以使用事件处理的方式解决(setState、callback、EventBus、Notification),但是当嵌套足够深的话,很容易就增大代码耦合度。状态管理就是原创 2021-01-04 11:06:29 · 511 阅读 · 0 评论 -
深入理解Flutter的图形图像绘制原理——图形库skia剖析
Flutter是目前流行的高性能跨平台UI框架,图形库skia是其跨平台的基石。本文将深入分析skia的图形、字体、图片的渲染原理,如何挖掘硬件特性,为UI性能优化提供思路。1. 引言Flutter是目前非常流行的跨平台UI开发框架,不仅支持Android、iOS,还支持Windows、Linux等操作系统。Flutter的性能非常高,拥有120fps的刷新率。那么flutter是如何实现在不同平台上高性能绘制图形图像的呢?首先我们分析下Flutter App和原生Android App、原生iOS转载 2020-12-28 09:38:06 · 4800 阅读 · 0 评论 -
前端技术:一文带你掌握Flutter插件开发新姿势
导语 |随着Flutter生态的快速发展,越来越多的Flutter插件涌现出来,那么如何开发一个Flutter插件呢?本文以具体的native_image_view插件为例,带你快速掌握Flutter插件的开发。文章作者:赵哲,腾讯游戏运营研发工程师一、概述随着开发技术的发展,几乎所有主流的开发语言都有自己的包管理工具。Node开发有npm、Android开发有Gradle,Flutter也有自己的Dart Packages仓库。插件的开发和复用能够提高开发效率,降低工程的耦合度,像网络请求...转载 2020-12-17 15:18:29 · 698 阅读 · 0 评论 -
Flutter混合开发时使用热重载Hot Reload
纯 Flutter 工程,我们用 Android Studio 打开,然后运行起来,Control + S,或者点击热重载按钮,就会直接刷新页面了。但是 Flutter 混合开发时,Control + S,显然是不行的,并且热重载按钮是不可点击的,因为工程项目是以Android项目打开的,而不是Flutter工程。实际具体操作也很简单,1,首先以Android项目,运行起整个工程;2,到命令行,打开 flutter_lib 目录(Flutter module工程);3,输入命令:flutter转载 2020-12-16 20:03:13 · 1026 阅读 · 0 评论 -
揭开Flutter工程编译的面纱(Android篇)
一、引言本文主要对Flutter工程编译时如何把Flutter生成的产物打包进入Android工程中进行分析。在Flutter工中打包过程中涉及到了local.properties、settings.gradle、build.gradle、flutter.gradle这几个脚本文件的参与,与传统的Android工程相比这几个脚本文件中的内容也不相同,接下来我们通过一层层解析,解开Flutter工程编译的面纱。 同时也建议大家看的时候搭配Flutter工程一起食用效果更佳。二、工程结构分析首先我们转载 2020-12-16 19:56:55 · 1507 阅读 · 0 评论 -
Flutter 学习文档
flutter中文官网:https://flutter.cn/将 Flutter module 集成到 Android 项目:https://flutter.cn/docs/development/add-to-app/android/project-setupFlutter 混合工程持续集成实践:https://blog.csdn.net/u010960265/article/details/81533732Flutter完整开发实战详解(十四、混合开发打包 Android 篇):https:.原创 2020-12-16 18:06:07 · 348 阅读 · 0 评论 -
flutter给滚动内容添加粘性header组件
前言Flutter是谷歌的移动UI框架,可以快速在iOS和Android上构建高质量的原生用户界面。IT界著名的尼古拉斯·高尔包曾说:轮子是IT进步的阶梯!热门的框架千篇一律,好用轮子万里挑一!Flutter作为这两年开始崛起的跨平台开发框架,其第三方生态相比其他成熟框架还略有不足,但轮子的数量也已经很多了。本系列文章挑选日常app开发常用的轮子分享出来,给大家提高搬砖效率,同时也希望flutter的生态越来越完善,轮子越来越多。本系列文章准备了超过50个轮子推荐,工作原因,尽量每1-2天出一篇转载 2020-12-15 16:35:26 · 1810 阅读 · 0 评论 -
lutter可定制的上下滑出抽屉
前言Flutter是谷歌的移动UI框架,可以快速在iOS和Android上构建高质量的原生用户界面。IT界著名的尼古拉斯·高尔包曾说:轮子是IT进步的阶梯!热门的框架千篇一律,好用轮子万里挑一!Flutter作为这两年开始崛起的跨平台开发框架,其第三方生态相比其他成熟框架还略有不足,但轮子的数量也已经很多了。本系列文章挑选日常app开发常用的轮子分享出来,给大家提高搬砖效率,同时也希望flutter的生态越来越完善,轮子越来越多。本系列文章准备了超过50个轮子推荐,工作原因,尽量每1-2天出一篇转载 2020-12-15 16:32:25 · 647 阅读 · 0 评论 -
flutter圆形或线型进度条
前言Flutter是谷歌的移动UI框架,可以快速在iOS和Android上构建高质量的原生用户界面。IT界著名的尼古拉斯·高尔包曾说:轮子是IT进步的阶梯!热门的框架千篇一律,好用轮子万里挑一!Flutter作为这两年开始崛起的跨平台开发框架,其第三方生态相比其他成熟框架还略有不足,但轮子的数量也已经很多了。本系列文章挑选日常app开发常用的轮子分享出来,给大家提高搬砖效率,同时也希望flutter的生态越来越完善,轮子越来越多。本系列文章准备了超过50个轮子推荐,工作原因,尽量每1-2天出一篇转载 2020-12-15 16:31:01 · 1726 阅读 · 1 评论 -
Flutter: Update Widgets On Resume?
import 'package:flutter/foundation.dart';import 'package:flutter/widgets.dart';class LifecycleEventHandler extends WidgetsBindingObserver { LifecycleEventHandler({this.resumeCallBack, this.suspendingCallBack}); final AsyncCallback resumeCallBack;.转载 2020-12-09 16:44:49 · 326 阅读 · 0 评论 -
Flutter State生命周期 Flutter Widget生命周期 Flutter 应用程序生命周期
在 Flutter应用程序中,生命周期涉及两个,一个是 Widget 的生命周期,一个是应用程序的生命周期,本文章说明通过 flutter_life_state 依赖库实现在 Flutter 中类似 Android 中Activity的生命周期监听,类似 iOS UIViewController 的生命周期。import 'package:flutter/material.dart';import 'package:flutter_life_state/flutter_life_state.d.转载 2020-12-09 14:30:14 · 233 阅读 · 0 评论 -
Flutter 监听应用程序路由堆栈变化
很多时候我们需要监听路由堆栈的变化,这样可以自定义路由堆栈、方便分析异常日志等。监听路由堆栈的变化使用RouteObserver,首先在MaterialApp组件中添加navigatorObservers:void main() { runApp(MyApp());}RouteObserver<PageRoute> routeObserver = RouteObserver<PageRoute>();class MyApp extends State...转载 2020-12-09 10:25:48 · 877 阅读 · 0 评论 -
Flutter安卓 Log plugin开发
基于Flutter Version:1.22.3, Dart Version:2.10.3FlutterPlugin提供了Android和ios的底层封装,在Flutter层提供组件功能,使得Flutter可以比较方便得调用Native得模块,对于Flutter实现比较复杂或者基于平台不能完成得部分,都可以封装成Plugin。本文都是android得样例。Flutter调用android原生实现,封装成Plugin基本流程Flutter端声明MethodChannel,并通过invokeM原创 2020-12-09 09:52:42 · 350 阅读 · 0 评论 -
使用Flutter重构斗鱼APP
flutter重构的斗鱼直播APP首页、娱乐为Material组件;直播间、鱼吧为纯自定义编写。另外整合各类优质的第三方开源库,打造出原生APP丝滑的用户体验尽可能接入更多功能,方法附带注释,帮助你在使用flutter进行开发新的应用提供实用的借鉴案例包含功能:启动页广告位 开播列表上拉加载、下拉刷新、返回顶部 列表图片缓存加载优化 渐进式头部动画 底部导航切换保存页面状态 HTTP缓存、IO缓存 直播间webSocket消息弹幕、礼物 页面路由传值 RxDart全局消息通信封转载 2020-12-08 09:30:17 · 564 阅读 · 0 评论 -
Bolt 的 Flutter 路由管理实践(页面解耦,流程控制、功能拓展等)
在各大移动开发框架(Android、iOS、Flutter、React Native…)中,路由管理始终是 UI 架构最具热议的话题之一。一大原因就是应用程序的页面会不可避免的多,我们可以使用 BLOC,MVP,MVI 等等模式将 UI 和业务逻辑合理分离实现良好的架构,但是如何将一个新页面合理地集成到现有的结构中还是一个比较大的难题。Android 中,除了传统的 Intent / Fragment 事务方式,Google 也在 Jetpack 中专门提供了用于管理复杂页面逻辑的 Navigat.转载 2020-12-08 09:09:30 · 402 阅读 · 0 评论 -
Flutter 常用快捷键
AndroidStudio 插件安装位置/Applications/Android Studio.app/Contents/plugins清除Flutter 缓存文件清除该目录下文件flutter/bin/cache/lockfile断点调试在源码中设置断点,选中需要设置代码的那一行,在它的左侧点击一下会出现一个小红点; 点击"调试"图标或者调用Run -> Debug即可1.创建flutter工程Flutter Application(全新的APP)..原创 2020-12-03 19:53:30 · 531 阅读 · 0 评论 -
Flutter 插件的创建及使用
在 Flutter 项目的开发中,我们需要根据自己的业务需求来创建各种各样的插件,这里记录下关于 Flutter 插件的创建及使用的过程。官方文档这里主要记录如下几点:插件的创建 获取 Android 中的上下文 Context Dart 调用插件方法及传参 插件调用 Dart 的方法及传参 插件中监听 Activity 的生命周期及常用的回调方法 使用 Delegate 的方式来写插件 插件的几种依赖方式(pub、本地、git) 插件的上传及注意事项插件的创建我们可以通过两转载 2020-12-03 19:39:36 · 1186 阅读 · 0 评论