Flutter开发

Flutter的Image组件由四种加载形式：network、file、asset、memory，四种方式分别为网络、文件格式、asset资源、Uint8List格式数据。下面以通过Image.network()形式深入了解Flutter如何实现对图片加载和渲染。 它的主要职责…

平常开发中我们经常会用到异步操作比如网络请求、IO等耗时操作，其目的是避免阻塞主线程导致卡顿以及后续事件消费。 通常情况下像Java和C++中处理这些耗时操作是通过开辟新线程，在子线程中处理耗时操作最后将结果返回给主线程。而像Dart实现异步操作则是通过单线程+事件循环形式，每…

这就存在一个问题，在UI布局如果为Text设置Padding的时候会出现中英文文本显示高度不一致的情况。难怪设计师老是找我茬，总算知道问题所在了。 解决办法其实很简单在TextStyle中将height设为1就能可以了。 实际中会发现中文显示会超出实际高度，但这里我们是为了保持…

产品需求总是天马行空，一天一个想法一天一个变更。本期需求中遇到一个特殊交互，产品大大希望在应用中有一个全局浮动按钮入口，希望用户可以在应用每个地方都能点击进入到某一个页面，从而增加该功能使用率。其实有点类似于在手机上增加一个快捷入口的悬浮球，将一些层级较深的功能提到一级菜单，可…

在Flutter自身UI组件中好像也没有直接可用圆弧并带缺口的组件。所以圆弧样式就需要自己自定义绘制实现。 在Flutter中同样也有画布组件供开发者绘制自定义样式。 画布组件CustomPaint,绘制内容通过painter和foregroundPainter。painter…

举例常用页面跳转功能。 用法和popAndPushNamed类似，同样是退出当前页面并跳转新页面。但popAndPushNamed页面出栈和入栈都有动画，pushReplacementNamed则只有入栈动画 将路由栈出栈到对应命名路由然后跳转到新页面，如下所示代码“Modal…

Flutter万物皆Widget，所有Widget都有自己的生命周期。常用Widget分StatefulWidget和StatelessWidget，StatelessWidget是无状态组件没有生命周期的概念，StatefulWidget则创建State，有State管理页面…

这是第二篇番外了，第一篇是关于动画翻转效果实现而这次要说的是运用手势操作实现类似于Drawer抽屉拖拽功能。Drawer是默认全部隐藏在屏幕外，在屏幕边缘做手势操作使其滑出或者通过点击实现滑出。而我希望实现默认带偏移量和多方向侧拉效果功能，在默认情况下能够展示侧边组件部分内容通…

前段时间学习Flutter动画时接触了Transform类，查找官方文档时无意间看到了时钟翻页动画觉得也挺好玩的，所以就自己动手使用动画和Transform来实现翻页特效。 开始前自己也思考过如果实现翻页动画，但实际操作时却发现思路不太正确最后只好作罢。最后还是参考了已有翻页实…

Flutter动画主分为两大类：补间动画、物理动画。 这里主要介绍几种方式实现动画效果。虽然使用的动画组件有所不同，但真正阅读源码分析会发现动画实现离不开几个关键对象：AnimationController、Animations、Tween、Ticker。 AnimationC…

在开发Flutter应用过程中会涉及到平台相关接口调用，例如数据库操作、相机调用、外部浏览器跳转等业务场景。其实Flutter自身并不支持直接在平台上实现这些，但在实际开发中我们会发现Pub.dev上会提供需要支持这些功能的package。事实上这些packages是为Flut…

GestureDetector是Flutter开发中通用的手势操作组件，支持点击、双击、长按、拖拽、缩放等常用手势操作。 通过源码可以发现GestureDetector是StatelessWidget无状态组件，根据手势识别类型分为八种类型手势:TapGestureRecogn…

结合之前介绍的Redux全局状态管理框架一起使用效果最佳。 Flutter官方提供Material和Cupertino视觉组件分别高保真Android和iOS系统UI。这里使用Material Components来介绍主题的使用和切换功能。 MaterialApp支持对the…

将Column、Row、Flex放在一小节是因为不同之处只是对子Widget布局方式不同。Column垂直布局子组件，Row是水平布局子组件，Flex根据direction设置Axis.horizontal或是Axis.vertical。 另外组件都不支持滑动，一旦子组件较多超…

对于前端同学Redux并不陌生，它可以对应用全局状态做管理。当项目庞大每个组件都可能会引用全局某一个状态值的时候，Redux就能很好的体现它的价值。通过store管理应用全局状态，当执行Action对状态做更新时对Store的state进行修改，最终再通知到Widget达到唯一…