Flutter

Flutter Page curl effect like epub reader

If you want to implement a page-turning effect for a reader in Flutter, you typically overlay a view that performs the page-turn animation on a container. When a left or right swipe gesture is detected, the view with the page-turn animation is displayed. After the page-turn animation ends, the content of the underlying container is changed to achieve the page-turn effect.

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

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的重建通知。

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