![](https://img-blog.csdnimg.cn/20201014180756922.png?x-oss-process=image/resize,m_fixed,h_64,w_64)
Flutter
文章平均质量分 93
JonnyLan
暂时忽略!
展开
-
Flutter异步编程详解
不知道大家有没有一个疑问:Dart是单线程执行,那它是如何实现异步操作的呢?本文将对Dart/Flutter提供的Isolate,Event Loop,Future,async/await等进行异步操作相关的知识点进行分析。Isolate什么是Isolate?An isolate is what all Dart code runs in. It’s like a little space on the machine with its own, private chunk of memory a原创 2021-05-28 11:12:30 · 1186 阅读 · 3 评论 -
Flutter混合开发—Android篇
上篇文章我们介绍了如何将Flutter模块混入iOS项目中,本篇文章我们来介绍下Android项目混入Flutter模块的方法。建议先阅读一下Flutter混合开发—iOS篇,本文中提到的一些与iOS篇中相同的内容就不会再介绍了。现在就进入Flutter和Android进行混合开发的实现过程。搭建Android项目首先我们搭建一个首页为Bottom Navigation Activity的安卓项目,然后修改代码将三个Fragment重命名为HomeFragment,ChannelFragment和M原创 2021-05-25 13:29:34 · 564 阅读 · 6 评论 -
Flutter混合开发—iOS篇
很多情况下用Flutter来编写整个项目是不太现实的。例如公司已经有了成熟的App产品了,去用Flutter去重写整个项目会有很大的工作量和功能上的风险;有时候公司出于谨慎的原因,不可能去冒失的取采用新的技术,可能更愿意去用一些次要的功能部分去试水,如果效果不错才会继续大面积使用。我们可以将Flutter打包成模块(module)整合进入原生的iOS和Android项目中实现上述需求。最开始Flutter只支持单个页面,最近已经开始支持多个Flutter页面,但是正如官方所说的其还是不太稳定,有各种莫名其原创 2021-05-14 23:58:23 · 1681 阅读 · 11 评论 -
Flutter插件开发---Android篇
上一篇文章我们一起来实现了iOS平台的插件开发,本节我们来看看Android平台的插件是如何实现的。本文只会涉及到Android端的代码了,因为Flutter端代码是通用的,不需要修改了。网络设置相关的修改Google从Android P开始要求使用加密连接,如果应用使用的是非加密的明文流量的http网络请求,则会导致该应用无法进行网络请求。本项目中的图片等有使用到http网络请求,需要适配下:在res新建一个xml目录;在xml目录中新建一个network_permission_config原创 2021-05-11 10:01:35 · 650 阅读 · 3 评论 -
Flutter插件开发---iOS篇
Flutter的愿景是一般的开发者只需要开发Flutter代码就能实现跨平台的应用,官方提供了一些插件,也有很多可以可以直接拿来使用的第三方插件。但是现实是现实,例如当遇到定制化的功能时,编写插件是不可避免的。譬如我们有一个自定义协议的蓝牙功能,这个功能在Flutter中就不可能直接拿来使用了,需要编写插件让Flutter进行调用。本文我们将来看看Flutter插件是如何实现的。前言本文我们用Flutter来仿写网易云音乐的播放页面的功能,其中音乐的播放,音乐的暂停,快进,音乐的时长获取,音乐播放的进原创 2021-05-10 15:17:40 · 1046 阅读 · 0 评论 -
Flutter国际化
如果App的用户使用的是不同语言,那进行国际化是必要的。国际化主要包括***文案的国际化***(不同的语言展示不同的文案)和***布局的国际化***(从左到右还是从右到左布局)。不同语言涉及的业务逻辑的差别(eg. 法语跳转到法语对应网站,韩语跳到韩语对应的网页)一般不被归为国际化的内容,属于业务逻辑的范畴。我们公司的产品用户涵盖了欧美、日韩和以色列等国家,每个版本发版前的一个块大的任务就是针对不同的语言进行布局和文案的适配,所以国际化还是很重要的一块内容。案例为了说明如何实现国际化,我们先建一个工程原创 2021-04-21 22:28:53 · 823 阅读 · 4 评论 -
Flutter Navigator 2.0原理详解
Navigator 2.0作为新一代的路由提供了申明式的API,更加符合Flutter的风格。Navigator 2.0向前兼容,新增了一些新的API**,使用的方式和Navigator 1.0相比有较大的差别。本文将详细解析Navigator 2.0的底层逻辑,让大家对它有一个深入的了解,这样在使用上会更加的得心应手。Navigator 2.0 诞生的背景Flutter官方团队改造路由主要有几点原因:Navigator 1.0 只提供了一些push(), pushNamed()和 pop()等简原创 2021-04-18 17:32:59 · 1342 阅读 · 0 评论 -
Flutter状态管理之Provider的使用和架构分析
状态管理在Flutter中非常重要,但是它包含的内容又非常的广泛。本文我们首先了解下什么是状态和状态管理呢?然后我们来了解官方的状态管理库Provider的使用,最后分析下Provider背后的秘密。状态管理状态Flutter是声明式编程,Widget定义的UI都是在build()函数中实现的,这个函数的功能就是将状态转换成UI。UI = f(state)官方对状态的定义如下:whatever data you need in order to rebuild your UI at a原创 2021-04-11 19:41:17 · 676 阅读 · 0 评论 -
Flutter系列九:Flutter动画源码解析
上篇文章我们详细介绍了动画的使用,本文我们将从源码的角度解析动画的底层逻辑。动画的实现机制动画的控制是由AnimationController来实现的,这样我们就先从AnimationController来入手研究。AnimationController构造函数<!-- AnimationController -->AnimationController({ double? value, this.duration, this.reverseDuration原创 2021-04-09 12:12:57 · 269 阅读 · 0 评论 -
Flutter系列八:Flutter动画的使用
动画能提高用户的使用体验,使APP更流畅。那么在Flutter中如何实现动画以及选择使用什么样的动画呢?开门见山,我们直接上图:绘制依赖的动画绘制依赖的动画是指我们用动画库没法直接实现的动画,这时候有两种实现方式:用Canvas不断绘制形成动画(CustomPainter或者自定义RenderObjectWidget);使用设计师提供的动画文件,然后结合三方库来使用(Lottie或者Flare等)。Lottielottie-flutter借鉴自Lottie,使用方法很也很简单。添原创 2021-04-08 14:15:04 · 769 阅读 · 0 评论 -
Flutter系列七:Flutter布局和绘制流程浅析
我们前面介绍了StatelessWidget和StatefulWidget,它们只是对其他Widget进行组合,不具备自定义绘制的能力。在需要绘制内容的场景下,我们要使用RenderObjectWidget,因为RenderObjectWidget创建的RenderObject**负责布局和绘制的功能。本文将以RenderObject为起点,梳理下Flutter的布局和绘制流程的逻辑。RenderObjectRenderObject是渲染树Render Tree的一个节点,主要负责布局和绘制。Flu原创 2021-04-01 15:15:51 · 429 阅读 · 0 评论 -
Flutter系列六:InheritedWidget的使用和源码分析
在用Flutter进行界面开发时,我们经常会遇到数据传递的问题。但是由于Flutter采用树形结构,造成数据传递的链条有时候会很长,代码写起来也很不方便。InheritedWidget可以让它的子节点能访问到它的公开属性,从而实现数据的跨Widget的传递。InheritedWidget使用我们先用一个Demo来看看InheritedWidget的使用方法。Demo如下,InheritedWidget子类InfoWidget的number数值变化后,底下的三个InfoChildWidget显示的num原创 2021-03-25 17:11:55 · 199 阅读 · 0 评论 -
Flutter系列五:State的生命周期
上一篇文章我们研究了StatelessWidget和StatefulWidget的区别,即StatefulWidget持有State能进行self Build***。本篇文章我们来研究下State*的生命周期。createState在Flutter的启动流程分析这篇文章我们分析过,Widget对应的Element插入Element Tree这一个过程是在inflateWidget方法中实现的:Element inflateWidget(Widget newWidget, dynamic newSlot原创 2021-03-23 16:41:31 · 671 阅读 · 0 评论 -
Flutter系列四:你真的了解StatelessWidget和StatefulWidget的区别吗?
开发者在进行Flutter开发时,大部分工作基本上少不了与StatelessWidget和StatefulWidget打交道。大家是否真的了解StatelessWidget和StatefulWidget?讨论我阅读了很多网上的文章,大部分会讲解两者的使用上的区别,一部分文章有解释这两者的区别。但是他们的解释有的是字面解释,有的是浅尝辄止,有的甚至是有一定的误导。列出网上一些文章中的解释:如果我们的Widget是StatelessWidget,那么当他的内容被创建出来之后,就不能再改变了。相反St原创 2021-03-21 10:46:48 · 645 阅读 · 1 评论 -
Flutter系列三:Flutter启动流程分析
本文我们来分析下Flutter的启动流程,首先我们从main.dart文件的main函数开始:void main() => runApp(MyApp());main函数则调用的是runApp函数:void runApp(Widget app) { WidgetsFlutterBinding.ensureInitialized() ..scheduleAttachRootWidget(app) ..scheduleWarmUpFrame();}函数中有用到Dart语法中原创 2021-03-17 12:45:33 · 1195 阅读 · 0 评论 -
Flutter系列二:探究Flutter App在Android宿主App中的整合
前面一篇文章我们探讨了一下Flutter App如何被整合到iOS App中的,本文我们接着来讨论下Flutter App如何被整合到Android App中的。Gradle我们简单看一下Android项目的代码结构:作为Android项目的自动化构建工具,我们先来看看Gradle在Flutter APP的构建过程中大概做了哪些工作。settings.gradle在settings.gradle中主要是用来配置Android Project中所有需要依赖的module,即进行工程树的配置。se原创 2021-03-08 19:19:16 · 928 阅读 · 0 评论 -
Flutter系列一:探究Flutter App在iOS宿主App中的整合
体验了Flutter的项目开发体验后,肯定会产生众多的困惑。我第一个想到的问题是,移动端宿主APP是如何将我们编写的Flutter代码整合进去的?按平台来,本篇文章先来看看iOS项目如何集成Flutter代码的。我的代发分析基于此项目。Pod我们用Xcode打开iOS项目,主项目里面代码很少很简介。我们第一个想到的肯定是用CocoaPod添加了一些依赖,接下来我们就来看看Podfile这个依赖的配置文件。Podfile// 1 检查环境变量文件Generated.xcconfigdef fl原创 2021-03-04 23:59:57 · 2580 阅读 · 5 评论