Flutter实现拼图游戏 jigsaw puzzle game

说明 Flutter 实现的拼图游戏 Real Puzzle 使用Flutter flame游戏引擎实现 截图 ##实现原理 TOTO 地址 演示地址 https://jigsaw.xfans.me/ 源码地址: https://github.com/xfans/flutter_jigsaw_puzzle

Flutter2.5适配ThemeData

说明 Flutter 2.5 版本中的破坏性改动 默认的设备拖动和滚动 v2.2 版后删除了废弃的 API Package 介绍: flutter_lints ThemeData 的 accent 属性已被弃用 手势识别器清理 将 AnimationSheetBuilder.display 替换为 collate 使用 HTML 插槽在 Web 中渲染平台视图 将 LogicalKeySet 迁移至 SingleActivator 项目使用Flutter2.5编译后,部分页面的颜色发生了变化。 需要对ThemeData 的 accent 属性进行适配。 改动 主题信息 ThemeData 中的 accentColor、accentColorBrightness、accentIconTheme 和 accentTextTheme 属性现已被弃用。 Material 设计规范 不再为 Material 组件指定或使用「强调」色。组件的默认颜色来自整个主题的 颜色方案。现在通常使用 ColorScheme 的 secondary color 代替 accentColor,并且在需要对比色时使用 onSecondary 属性。 适配 适配前: 适配后: 使用时: 改为: 相关链接 https://flutter.cn/docs/release/breaking-changes/theme-data-accent-properties https://flutter.cn/posts/whats-new-in-flutter-2-5

launcher 使用windowIsTranslucent引发的bug

说明 把launcher的theme添加 <item name="android:windowIsTranslucent">true</item> 会引起生命周期的异常,引发home键无效等bug。 解决方法 使用 <item name="android:windowBackground">@android:color/transparent</item> <item name="android:windowShowWallpaper">true</item> 代替

Flutter cached_network_image使用Dio请求图片

背景 在Flutter中通常使用cached_network_image控件显示图片,该控件使用http库请求图片,http库无法像dio一样方便的添加拦截器等。 实现 CachedNetworkImage使用flutter_cache_manager进行图片缓存,可以使用自定义cache_manager来替换http为dio。 如下: 使用方法 然后就可以使用dio的拦截等功能了,比如使用拦截器添加并刷新token,添加log等功能。 地址 https://pub.dev/packages/flutter_cache_manager_dio https://github.com/xfans/flutter_cache_manager_dio

Flutter InheritedWidget源码解析

作用 InheritedWidget是一个在Widget树中,从上往下传递信息的小部件。 主要从两个方面理解源码: 1.子Widget可以获取到父控件中的InheritedWidget,从而获取到InheritedWidget的信息。 2.子Widget调用dependOnInheritedWidgetOfExactType后,当父InheritedWidget重建后,会调用子控件重建。 原理 1.子控件可以获取到父控件中的InheritedWidget 在Element中有个Map: 其中保存了该Widget的父节点中的InheritedWidget。会在mount`activate` 方法中赋值,赋值的代码如下: 在Element中 在InheritedElement中 经过上面两个方法,Widget本身就可以通过_inheritedWidgets获取到InheritedElement了 2.子Widget调用dependOnInheritedWidgetOfExactType后,当父InheritedWidget重建后,会调用子控件重建 在InheritedElement中有个Map: 当子Widget调用dependOnInheritedWidgetOfExactType方法时,会依次调用dependOnInheritedElement方法,InheritedElement的updateDependencies方法,setDependencies方法。将自己注册到父InheritedElement的_dependents中。 当InheritedElement重建时会调用updated方法,然后会调用到notifyClients方法,最终调用Widget didChangeDependencies方法并重建子Widget。 由上边的代码可以看出,只有当子Widget调用了dependOnInheritedWidgetOfExactType才会收到InheritedWidget的重建通知。

替换口袋阅上的Kindle/微信阅读应用

说明: 在未刷机的情况下,口袋阅1的默认桌面如下: 自己安装的程序无法在桌面上显示,而桌面上的kindle又不经常使用。可以改为,点击Kindle进入自己安装的程序,比如:点击Kindle进入koreader。 方法: 实质上就是,自己编写一个与Kindle包名相同的程序,启动该程序时,启动你设置的程序。核心代码如下,很简单: 可以使用已经编译好的程序: 安装后输入要替换的包名,点击确认即可。然后点击桌面的Kindle图标即可进入设置的app。注意:安装该程序后,无法安装Kindle app。包名冲突。 卸载方法:adb uninstall com.amazon.kindlefc 地址: 下载地址:https://xfans.me/apps 代码地址:https://github.com/xfans/KdyReplace

Flutter常见问题整理

问题 问题1 问题:Flutter中Column嵌套Listview报overflowed错误. 解决:使用Column+Expanded+Listview布局界面. 问题2 问题:数组json转换成List 解决: 问题3 问题:界面中请求网络的时机 解决:使用<a href="https://api.flutter-io.cn/flutter/widgets/FutureBuilder-class.html">FutureBuilder</a> 问题4 问题:material-design icon有哪些 解决:https://material.io/resources/icons/?icon=account_balance&style=baseline 问题5 问题:抽出appbar 时can’t be assigned to the parameter type ‘PreferredSizeWidget’ 解决: 问题6 问题:flutter加载中文乱码 解决: 问题7 问题:flutter 写文件报 OS Error: Read-only file system 解决:使用path_provider插件获取目录 问题8 问题:设置android中的match_parent 解决:width: double.infinity 问题9 问题:AppBar中的leading设置大小无效 解决:被ConstrainedBox限制了大小,使用UnconstrainedBox嵌套一层即可 问题10 问题:使用bottomNavigationBar切换page时重新调用initState 解决:使用PageView包裹body,子page with AutomaticKeepAliveClientMixin,重写bool get wantKeepAlive => true