- 博客(50)
- 资源 (1)
- 问答 (3)
- 收藏
- 关注
RSS订阅
原创 Flutter 仿网易云音乐App
图首页歌曲播放和卡片切换如正版一样，歌曲播放进度在播放/暂停 按钮的边框显示（页面下方，由黑变红）没登录的话，一般只能听12秒目前只做了 模块（‘超带感的说唱精选’）的点播功能，其他地方可以直接套用（1、2行代码即可），控制台已经写好卡片（音乐日历）切换动画也是仿照正版来个人中心和抽屉（未登录）云村视频（未登录）视频模块需要登录才能看到波纹动画依然是仿照正版的登录视频（已登录）登录前后页面变化我们看一下，我的、抽屉页面的前后差异再退出一下‘切
2020-10-08 22:06:17
1004
原创 (翻译) 识别&处理Android构建时的内存问题
此文是对# Identify & Handle Android Builds’ Memory Issues的翻译，同时就文中个别名词增加了说明。本人能力有限，如有错误还望指正。😃前言随着软件项目的业务和功能模块的不断迭代，作为一个Android（或其它端的）开发人员，随着时间的推移，或早或晚都会遇到内存问题。Doni(作者) 将分享一些研究、优化及修复方面的经验，以备你不时之需。Doni Winata是Android Infra团队的一名Android软件工程师，负责维护和提高Android
2022-05-10 16:55:27
572
原创 坦克对战 : Flutter&Flame在游戏上的实践
前言在Flutter连续大版本的迭代下，发现2年前的项目bladeofgod/tank_combat (github.com)已经没法跑了，为此进行了适配和代码的重构。相较于老项目，重构后的项目在代码、设计以及注释上更为规范、合理及详尽，借此，希望初学者能有所收获。此外，由于是学习类demo，所以未经过审慎思考，如有设计不合理或不严谨的地方，还望指正。ps:玩家无敌 :DFlame本项目依赖于Flame，而Flame是一个基于flutter的游戏引擎库。Flame 引擎的目的是为使用 Fl
2022-04-11 18:24:59
6877
原创 关于MockView中“Mock“编程思想的个人理解及实践
MockViewMockView 很早之前就有接触过，虽然阅读了大佬的文章：Why Mocking Matters,但是并没有很好地理解。随着开发经验的不断积累，以及在flutter_hybird_webview 跨进程渲染的实践中，模块跨进程迁移的开发过程中对Mock有了更进一步的理解，在此分享一下本菜鸡的理解。介绍MovkView位于com.android.layoutlib.bridge包下，并继承自FrameLayout，同时禁止添加其它子view,内部代码如下：public class
2022-02-11 10:15:08
1606
原创 Android WebView拉起软键盘的流程浅析
前言此文是flutter_hybird_webview 跨进程渲染的实践技术分享开发过程中的研究笔记之一，如有错误还望指出。源码分析首先我们大致看一下webview的继承结构:public class WebView extends MockView { ...}public class MockView extends FrameLayout { ...}可以知道，webview的模型及基本行为规范，是遵从view的，那么我们可以推测其操作软键盘的方式与本地(app)
2022-02-09 18:07:16
2410
1
原创 Flutter 之简洁实用的图片编辑器
介绍一款简洁实用的图片编辑器，纯dart开发。支持：涂鸦、旋转&翻转、马赛克、添加文字，及自定义ui风格。功能演示涂鸦旋转&翻转马赛克添加文字及删除安装添加依赖dependencies: image_editor_dove: ^latestimportimport 'package:image_editor/flutter_image_editor.dart';使用方法获取到原图片后，将其传给ImageEditor 如下： Future<
2022-02-09 18:05:57
3976
4
原创 flutter_hybird_webview 跨进程渲染的实践技术分享
theme: channing-cyan前言大家好，继 Flutter跨进程混合栈渲染的实践——子进程WebView 之后，利用业余时间对整个插件进行了完善和基础测试，诚然距离投入生产还有一段距离，但总算能达到beta阶段了(仓库地址在文尾)。这个插件断断续续开发了有小半年，最初只是为了隔离webview，但随着不断地实践，发现在app容器化、小程序等方面也可能有不错的应用和表现。故，在此做一个记录和分享，希望能帮到有需要的朋友，同时对于不足的地方，也望大佬能给予指点。限于篇幅，此文仅对插件做一个.
2021-12-27 12:25:49
1641
原创 Flutter 子进程WebView——跨进程混合栈渲染的实践
前言首先祝大家中秋节快乐，而明天又要上班啦~ 哈哈哈。不过，立此之处，国庆可期矣~好了，书归正传，在此我想分享一下关于我在Flutter 安卓端的跨进程渲染所做的一些实践。起因随着项目不断的迭代，功能日益复杂，内存占用也与日俱增。在压测过程中，app的崩溃也多是因为各种原因的内存泄漏或异常抖动并最终引发OOM而被系统杀死。按技术栈划分主要集中以下两端：原生端本身的代码质量(不当设计、图片加载、对象未释放等)所造成，这点通过回溯及找到组内对应同学修复便可快速解决。前端的代码质量(亦如上)所
2021-09-22 12:13:32
401
原创 Flutter—— 仿自如APP裸眼3D效果
介绍前天看了《自如客APP裸眼3D效果的实现》的效果，觉得这个交互很棒也很好玩，遂用Flutter实现了一个。巧妇难为无米之炊，因没有设计稿，所以相较于自如的可以说很丑。 (●'◡'●)实现如《自如客APP裸眼3D效果的实现》 中介绍的，整体构成为3层:底层、中层、上层在转动手机时，中层保持不动，底层和上层做相反运动。 我们先集成插件sensors:sensors: ^2.0.3https://pub.flutter-io.cn/packages/sensors/install之后
2021-08-01 09:47:03
773
原创 Flutter之Hybird-composition View的事件分发流程
前言最近研究混合栈渲染时，遇到了一个混合栈下的事件分发问题，为此看了一下flutter接入原生view后，其中的事件分发流程。为了方便后期查阅，做此记录，也希望能帮到有需要的人。文中所讨论的原生view为： AndroidViewSurface ，即：hybird composition ，其次还将涉及到Flutter的启动流程 ,如果对这两者不熟悉的话，建议浏览这下面的文章：Flutter——在Android平台上的启动流程浅析Flutter在Android平台上启动时，Native层做了什么？
2021-07-29 09:32:39
354
原创 关于Flutter空安全的一些使用经验和理解
前言Flutter 2.0的使用已经有一段时间了，想在此分享一些关于空安全的使用经验和个人理解。Dart空安全空安全是什么？在空安全下，运行时的NullPointer Exception错误被提前到了开发阶段。即：void main() { // 在空安全下， 开发阶段就会报错，而非运行时 String name; debugPrint(name);}类型上也有了变化,这里贴两张官方的类型关系图深入理解空安全 :非空安全时代:空安全时代可以看到，Nul..
2021-07-19 10:05:01
740
原创 Flutter——实现交叉列表的联动效果
大家好，小半年的10-10-6，所以一直没更新，借着五一假期的时间更新一篇热热身，我们开门见山直入主题吧。效果实现说明：代码直接写在了框架项目的demo里，所以用到了一些里面的代码，不过不影响阅读。 另外，老规矩，说明我还是写在注释里方便阅读Bedrock MVVM+Provider 开发脚手架页面布局根布局 @override Widget build(BuildContext context) { return switchStatusBar2Dark(
2021-05-05 20:49:43
1845
6
原创 Flutter在Android平台上的启动 —— Native 层浅析
前言接上回 Flutter——在Android平台上的启动流程浅析,我们来看看穿插在其中的native层都做了什么。由于代码较多，我会将说明以注释的形式写在代码里，并删除非必要代码FlutterLoader在flutterLoader中的这个startInitialization（）方法中： public void startInitialization(@NonNull Context applicationContext, @NonNull FlutterLoader.Settin
2021-01-17 16:33:18
758
原创 Flutter——在Android平台上的启动流程浅析
介绍Flutter应用是由平台来创建、初始化并启动的，这里我们以android为例，对启动过程做一个走马观花式的了解,旨在对平台端的工作有个大致了解。Android端的启动流程启动流程实际上还涉及了很多native 层的工作，但是宥于篇幅，暂且只看Android端。FlutterApplicationflutter应用下，原生的启动流程并没有什么变化，我们来看Application的onCreate函数。 @Override @CallSuper public void onCre
2021-01-04 13:25:15
2633
4
原创 Flutter&Android 启动页（闪屏页）的加载流程和优化方案
前言现在应用的普遍启动方式为：静态页面 -> 动图 -> 应用首页之所以这样设计的原因，大致如下：1、产品需求，如广告2、品牌展示3、应用规模较大时启动时间较长，相较于白屏，一张图片的过渡效果更好等等…。而Flutter由于引擎的创建和初始化需要一定时间，所以也提供了一个过渡方案（默认是白屏），位置在：AndroidManifest.xml下的<meta-data android:name="io.flutter.embedding.android
2021-01-03 10:00:27
1723
1
原创 Flutter Notification——实现应用内部的自定义widget通知功能
介绍现在的通知权限不好搞了，所以一些应用增加了内部通知，即：类似通知的显示方式，但是只能在应用（前台状态下）内显示，其本质是一个view。接下来我们就实现一个可以将我们自定义的widget以通知的形式显示出来的功能。此功能已加入Bedrock 开发框架 支持单个/批量显示通知Flutter Bedrock 快速开发框架 Mvvm+Provider样式如下:实现INotification首先，我们先定义一下通知相关的控制行为INotificationabstract class INo
2020-12-20 19:16:53
1141
原创 Flutter 1.20之Hybrid Composition混合图层的原理分析
介绍在 Flutter 1.20， 官方推出了Hybrid Composition，此方法仿照ios端的platform view 在flutter中的显示方式，相较于原来的AndroidView性能要更好。此文将分析Hybrid Composition 在绘制方面的工作流程。在此之前建议先了解使用一下，具体使用方法，可点击下方链接：官方使用文档此文将会横跨 flutter、android和engine，我会尽量简要以缩短篇幅。你可能还需要对surface有一定的了解。我们就从Flutte
2020-11-30 09:37:00
1308
原创 Flutter&Bedrock框架之页面的局部刷新介绍
介绍Bedrock开发框架功能介绍Bedrock开发框架常见的Widget刷新一般在flutter中刷新widget，最常用的是通过方法setState()举个栗子，有页面如下伪-代码如下：build(){ debugPrint('page build'); return Column(children: [ //上方按钮 btnAbove(), // 两个色块 row(children:[红色、蓝色])
2020-11-27 15:36:15
185
原创 Flutter 仿知乎广告Banner的切换动画
前言继【闲来无事】仿知乎广告Banner的切换功能，后再用flutter撸一遍，这样对同一功能双方的实现也可以有个对比，顺便在开工前热身一哈。功能Banner 中两层图片重叠，上层图片根据滚动方向和距离，进行扇形裁剪并展示。最终使上层图片如水波状进行展开或收起。主要代码flutter 是没有xml布局的，全部由代码实现。SingleChildScrollView( controller: _scrollController, child: Column(
2020-11-25 09:51:21
395
原创 Flutter 解决系统BottomNavigationBar的水波纹问题
起因Flutter 系统自带的BottomNavigationBar，在点击时item会有一个水波纹效果，产品并不想要这个（实际上这个水波纹有的时候还会卡住无法消失）。网上暂时没有找到现成的，所以就自己撸一个。PS:通过继承InteractiveInkFeature，也可以去除一些widget自带的水波纹（使用方法可以参考demo里的NoInkWellFactory类文件），不过bottom nav这里没法使用。Step.1首先整体结构，我们参照系统的，子Item的状态我们通过Provider
2020-11-25 09:50:38
1113
原创 Flutter 分享工具，基于全屏/某child进行自定义位置的弹窗显示和更新。
开始** 开发过程中，需要基于全屏或者某child的位置进行弹窗显示，在网上找了一些，始终没有满意的，就自己改造了一番，觉得还不错，分享给有需要的人。菜鸟一枚，代码还有很多需要优化的地方，欢迎指正，如果需要加功能可以发出来一起研究。 ????在此感谢网上的开源文章和官方非常齐全的注释，给了我很多帮助。**简介1、基于全屏幕定位，进行弹窗显示：2、基于某child widget定位，进行弹窗显示：使用方法** 我们以上图中的第一个按钮为例（简称 按钮A）：在实际布局中，我
2020-11-25 09:49:16
1121
原创 Flutter——TankCombat游戏开发（四）
TankCombat系列文章如果你还不了解Flame可以看这里：见微知著，Flutter在游戏开发的表现及跨平台带来的优势Flutter&Flame——TankCombat游戏开发（一）Flutter&Flame——TankCombat游戏开发（二）Flutter&Flame——TankCombat游戏开发（三）Flutter&Flame——TankCombat游戏开发（四）效果图蛮好看的，我再加一下，让大家整体有个印象自己在做什么 ：)思考在开工之前
2020-11-25 09:47:38
561
原创 Flutter——TankCombat游戏开发（三）
TankCombat系列文章如果你还不了解Flame可以看这里：见微知著，Flutter在游戏开发的表现及跨平台带来的优势Flutter&Flame——TankCombat游戏开发（一）Flutter&Flame——TankCombat游戏开发（二）Flutter&Flame——TankCombat游戏开发（三）Flutter&Flame——TankCombat游戏开发（四）效果图蛮好看的，我再加一下，让大家整体有个印象自己在做什么 ：)开工本章节，我
2020-11-25 09:47:03
367
原创 Flutter——TankCombat游戏开发（二）
TankCombat系列文章如果你还不了解Flame可以看这里：见微知著，Flutter在游戏开发的表现及跨平台带来的优势Flutter&Flame——TankCombat游戏开发（一）Flutter&Flame——TankCombat游戏开发（二）Flutter&Flame——TankCombat游戏开发（三）Flutter&Flame——TankCombat游戏开发（四）效果图蛮好看的，我再加一下，让大家整体有个印象自己在做什么 ：)开工闲话你bo
2020-11-25 09:46:23
330
原创 Flutter&Flame——TankCombat游戏手柄开发（一）
TankCombat系列文章如果你还不了解Flame可以看这里：见微知著，Flutter在游戏开发的表现及跨平台带来的优势Flutter&Flame——TankCombat游戏开发（一）Flutter&Flame——TankCombat游戏开发（二）Flutter&Flame——TankCombat游戏开发（三）Flutter&Flame——TankCombat游戏开发（四）游戏介绍玩法我们要实现一个坦克大战：玩家控制蓝色坦克，出生于屏幕中间绿色和黄色为
2020-11-25 09:45:33
1484
原创 见微知著，Flutter在游戏开发的表现及跨平台带来的优势
TankCombat系列文章Flutter&Flame——TankCombat游戏开发（一）Flutter&Flame——TankCombat游戏开发（二）Flutter&Flame——TankCombat游戏开发（三）Flutter&Flame——TankCombat游戏开发（四）前言现在的App开发中，为了增加用户粘性，总是会插入一些小游戏，而目前主流的移动端游戏开发引擎有：cocos2dx （主要用于2d游戏开发）unity3d (用于3d游戏开发，
2020-11-25 09:44:17
2030
原创 修复flutter_webview_plugin在页面滑出时web图层残留的问题
前言目前pub上关于webview有两个点赞最多的插件，webview_flutter 和 flutter_webview_plugin经过一番比较选择了后者：flutter_webview_plugin，这里将记录写出来，希望对你有所帮助两者区别webview_flutter ：flutter官方开发维护，采用的platformView显示。受flutter端控制（在树内），对于页面过渡动画是可协调，受控制的。flutter_webview_plugin ：flutter 社区开发
2020-11-25 09:43:36
550
原创 Flutter之CustomPaint 绘制贝塞尔曲线图表(三)
简介继上两篇所说，在功能实现后，补全这个虽然残缺但是比较有学习价值的DEMO：Flutter - 仿Airbnb的价格区间筛选器。（一）Flutter - 仿Airbnb的价格区间筛选器。（二） Flutter-CustomPaint 绘制贝塞尔曲线图表(三)页面布局如之前一样，我习惯把介绍写到注释里，这样方便联系代码，不会导致阅读混乱。主要是两部分：1, CustomPaint()，通过个我们可以绘制图表，他有三个参数要注意，分别是：painter , child ,foregr
2020-11-24 18:15:12
592
原创 Flutter 仿Airbnb的价格区间筛选器。（二）
介绍Flutter - 仿Airbnb的价格区间筛选器。（一）Flutter - 仿Airbnb的价格区间筛选器。（二）Flutter-CustomPaint 绘制贝塞尔曲线图表(三)整体结构我尽量将介绍写入到注释里，这样方便与代码关联阅读理解起来更方便。 Stack( children: <Widget>[ Container( padding: EdgeInsets.symmetri
2020-11-24 18:14:18
172
原创 Flutter仿Airbnb的价格区间筛选器。（一）
介绍第一部分：Flutter - 仿Airbnb的价格区间筛选器。（一）第二部分：Flutter - 仿Airbnb的价格区间筛选器。（二）第三部分: Flutter-CustomPaint 绘制贝塞尔曲线图表(三)产品要求仿照airbnb的效果来一个，我看了一下，感觉这个交互挺棒。分析经过观察，我将它分为图表和底部滑块两部分。 图表则进一步分为底层表和上层表，底层基本不用管就是背景，上层则需要根据滑块进行变化。上层图表我想了三种实现方式：1、（借助MPchart）通过滑块的位置，来重置图
2020-11-24 18:13:30
325
原创 Flutter实现网易音乐登录页的波纹效果
介绍来自 仿网易云音乐App预览图分析经过观察，可以发现，这是一个相对简单的动画，由两部分组成：logo：自身没有任何动画效果波纹：向外扩散的淡出波纹，最多有两条这样，我们实现的话可以借助Stack来做。实现首先我们创建一个LogoWidget，它包含整个我们要做的功能代码是基于Bedrock框架所写，widget的书写和创建你可能不太熟悉，可以点击下方链接了解代码较多时，我会将说明写在注释里，方便联系阅读LogoWidget我们先创建3个变量 final List&l
2020-11-24 18:10:07
969
原创 Flutter动画入门： 内外逆向环Loading动画
系列文章Flutter - 仿Airbnb的价格区间筛选器。（一）仿网易云音乐APP仿同花顺自选股列表仿高德三级联动Drawer效果图标题有些拗口，一开始的标题好像触发敏感词了，所以只能这样了分析很明显这是由两种颜色组成滴~运动轨迹分别是里面一个圈、外面一个圈。具体表现为，外层两个四分之一弧，内层两个四分之一弧，且中心对称。内外相对运动，内圈速度要略慢一些，毕竟周长比较短（速度全凭个人喜好）~按内外分为两个widget，并对他们进行旋转，就可以实现了。弧度表来源网络,这
2020-11-24 18:08:17
668
原创 Flutter混合开发练习——Evenet&Method Channel协作加载大图
前言此功能只是针对GestureDetector、Event Channel 和 Method Channel 的综合协作进行的研究练习，个人认为是无法用于生产的。而就加载大图来说，Flutter image本身的的cacheWidth和cacheHeight就可以实现(以及其它一些方案)。练习记录，代码可能写的有些随意。介绍我们的目标是通过GestureDetector、Event Channel 和 Method Channel的协作，通过原生端（Android）的BitmapRegionDe
2020-11-24 18:05:56
326
原创 换个角度——Widget、Element和RenderObject的由来
前言这个也算是老生常谈了，网上有很多关于这三个类（树）的介绍。实际上，可能在我们初学flutter时，就看过类似的文章介绍。如下图必是见过多次了可能由于这些文章的切入点不同（或本人愚钝），我在初学（甚至入门一段时间后）flutter时，并不能透彻理解这三棵树的作用到底是什么，大概最大的用处就是应付面试官了…在一段时间的学习之后，我将自身对这三个类的理解(最基本的职责)在下文概括出来，希望对你在深入理解Widget、Element和RenderObject时有所帮助。Widget、Element
2020-11-24 18:04:10
221
原创 Flutter版 仿.知乎列表的视差效果
介绍浏览知乎时，发现它的首页列表在滚动时，某个item会根据滚动位置展示图片的不同部分，如果搭配一些特制的广告图，会造成一种视觉上的穿透效果。大致如下：此为实现的Demo效果下方是要展示的原图图片信息： 1080*1920 大小 2.15m 因为还研究别的，所以图片刻意用的大体积的。这个效果还是很有意思的，闲来无事，就实现一下试试。实现我们的用于显示图片的widget就叫：DrawImageItem此为Demo，所以代码写的有些随意，见谅。基础页面结构整个页面就是一个li
2020-11-24 18:02:40
762
4
原创 Flutter——ListView源码分析之child-view的构建
# 介绍 在对listview的构造原理的分析时所记录的一些笔记，希望对诸位有所帮助。 listview整体构造庞大，故将由多章构成。 阅读以下内容，你需要对 flutter widget的 构建、布局和绘制有所了解 这篇我们主要分析listview构造 child-view的流程。# Listviewlistview 有很多构造函数 如： ListView ListView.builder ListView.sepa...
2020-11-02 12:20:14
296
原创 仿网易云音乐的滑动冲突处理效果
系列文章此功能属于仿网易云音乐App的一部分 仿网易云音乐App(基础版)实现网易云音乐的渐进式卡片切换Flutter 自定义View——仿同花顺自选股列表Flutter自定义View——仿高德三级联动Drawer另类设计，提升页面开发效率，简化跳转以及传值介绍项目进度： 我的、发现、云村和视频页都已实现，眼瞅着一期就结束了，此时产品经理走来...图示说明这是一张网易云音乐的‘发现’页（首页），可以看到其中有一些红、蓝虚线标出的矩形区域，这些区域均可以水平滑动。而将视角进一步抬
2020-10-26 14:45:19
237
原创 Flutter——实现网易云音乐的渐进式卡片切换
介绍此功能为 仿网易云音乐App的一部分 ：仿网易云音乐App 预览图我们可以看到页面下方切换的卡片效果分析首先动画以 x轴分为两部分 ： 左侧文字 和 右侧图片右侧图片以 z轴 分为 ： 上、下仔细观察，可以看到它的动画流程大致如下：上层显示的是当前图片，下层显示的时下一张 1、左侧文字淡入淡出切换 2、右侧图片的上层，与左侧文字同时淡出 3、之后下层图片上移到 上层图片的位置
2020-10-15 11:30:11
859
原创 Flutter——实现网易云音乐的Tabbar切换效果
介绍预览图分析效果非常简单，在切换的时候，对应的文字要缩小/放大。我们来实现这个自定义tabbar实现首先我们定义一个类class CustomTabBar extends WidgetState with SingleTickerProviderStateMixin因为动画的原因，所以需要混入SingleTickerProviderStateMixinCustomTabBar首先需要定义两个回调//因为我用到的MVVM，所以需要将tabbar的vm传出，方便外层控制tabba
2020-10-12 10:40:22
494
原创 Flutter：剥离StatefulWidget——简化页面开发、跳转以及传值
伊始前几日一位大佬考我，说：flutter页面开发需要写StatefulWidget和State，Android只需要Activity，如何简化这种开发方式？我答曰：activity还需要写xml呢~在大佬的静默中,四周浮现起热烈的掌声……深夜，天桥下的我辗转反侧、难以入眠…‘ 难道，真的可以？ ’…经过反复推敲打磨后，这个‘轮子’还确实有点儿圆，‘滚’起来还挺顺溜。天桥之下难免简陋，如有不足还请海涵，万望指点~ 嘿嘿 构思我们一般开发页面A，结构如下:class A ex
2020-09-13 21:16:19
1085
启动Android Device Monitor时报错，谢谢解答
2017-12-06
在AS中，使用真机测试代码，修改代码后再次测试依然安装的是原始软件，求解。不胜感激
2017-12-05
TA创建的收藏夹 TA关注的收藏夹
TA关注的人