Flutter
文章平均质量分 95
fundroid
Android GDE(谷歌开发者专家)| 互联网大厂移动端架构师
展开
-
为什么说 Compose 的声明式代码最简洁 ?Compose/React/Flutter/SwiftUI 语法对比
前面基于代码片段进行了一些对比,最后以CounterDemo为例,看一个完整功能下Flutter、Compose和Swift的代码对比,React与其他三者代码风格差异较大,就不参加比较了。FlutterComposeSwiftUI可以感觉到Compose代码最简洁也最直观,SwiftUI通过ViewBuilder机制也可以实现与Compose类似的DSL,表现也非常不错,Flutter由于模板代码较多,在简洁程度上表现最差。httpshttpshttps。...原创 2022-08-01 09:00:00 · 2203 阅读 · 6 评论 -
FlutterGen:通过Codegen实现资源的高效访问
Android通过aapt生成R.java,我们可以更加programmatically的访问字符串、图片等res/下的各种资源,而无需使用类似"res/drawable/logo.png"这样的hardcode,安全高效。Flutter没有上述功能,所以只能通过pubspec.yaml定义的assets的字符串访问资源。今天推荐一个开源项目FlutterGen,可以像Android一样通过代码生成,安全高效的访问资源。基本功能现状,需要在pubspec.yaml 中定义flutter: .原创 2020-09-18 22:14:56 · 1876 阅读 · 0 评论 -
Flutter的BuildContext介绍
简单来说,BuildContext就是Element。Flutter不鼓励直接操作Element,所以以BuildContext接口的姿态对外暴露原创 2020-04-12 22:53:35 · 1067 阅读 · 0 评论 -
【Flutter】InheritedWidget、InheritedModel的使用介绍
Flutter中有四种widgetStatelessWidgetStatefullWidgetInheritedWidgetRenderObjectWidgetStatelessWidget和StatefulWidget是最常见到的,实在状态管理角度的分类。RenderObjectWidget是所有需要渲染的Widget的基类。至于最后一个InheritedWidget,可能会多初学...原创 2020-04-12 18:47:57 · 4351 阅读 · 7 评论 -
【Flutter】创建Widget显示PlatformView
Flutter通过PlatformView可以创建显示Native Views的Widget,例如显示Native提供的WebView、MapView等。需注意使用PlatformView的Widget默认无边界的,使用时parent必须提供边界约束,否则会出现如下情况接下来通过例子演示如何实现PlatformView的使用。我们通过PlatfromView实现一个Widget,用来显示An...原创 2020-04-06 12:59:11 · 1098 阅读 · 1 评论 -
【Flutter】复用Widget提高build性能
StatefulWidget根据state的变化会进行rebuild,所有子widget也会随之rebuild。通过diff可以避免element的更新,因为element的更新成本很高。相比较来说widget的创建和rebuild则要轻量的多,理论上反复进行也无伤大雅。但是如果有些子widget无需创建和rebuild时,是否可以优化掉这些多余执行呢?使用const在widget前面加con...原创 2020-04-05 14:38:48 · 2228 阅读 · 0 评论 -
【Flutter】使用PageStorage在页面切换时保存状态
Tab切换时的问题在一个SPA的Flutter项目中可以用StatefulWidget保存页面状态,但是当出现页面切换的情况时,例如通过底部导航栏(BottomNavigationBar)或者标签栏(TabBar)组件来切换页面内容,每次导航栏或标签栏切换页面时,之前的页面就被清理了。出现上面问题的原因是,之前页面的状态(State)没有被保留下来,状态的reset导致页面发生了初始化。...原创 2020-04-04 17:54:46 · 3832 阅读 · 0 评论 -
【Flutter】TabBarView实现多Tab页切换
我们在Flutte中通过TabBar和TabBarView的组合实现多标签页的APP结构首先定义page1如下:import 'package:flutter/material.dart';class Page1 extends StatelessWidget { @override Widget build(BuildContext context) { return C...原创 2020-04-04 17:53:10 · 6140 阅读 · 0 评论 -
Flutter启动浏览器打开URL
url_lancher通过url_lancher插件,Flutter可以通过URL跳转浏览器、电话、邮件等三方native应用,url_lancher同时支持Android和iOS上的使用https://pub.dev/packages/url_launcher可以处理的URL种类如下:类型URL例子打开浏览器http:<URL>http://flu...原创 2020-04-04 16:27:41 · 6064 阅读 · 0 评论 -
【Flutter】2020热门Package推荐
Flutter的生态越发强大, 通过丰富多彩的三方package你可以更好地学习并作出效果惊艳的APP。这里精选几个pub.dev上的热门项目推荐给大家。按照项目类型分为以下几类:向导页 :用于APP首次启动的向导画面实用控件:常用的控件类型,效果炫酷导航:工具:向导页1.tutorial_coach_markhttps://pub.dev/packages/tutoria...原创 2020-04-04 13:44:32 · 1042 阅读 · 0 评论 -
Flutter与Native生命周期对比
AppLifecycleState枚举类定义了Flutter生命周期的类型,通过WidgetsBindingObserver来监听AppLifecycleState。AppLifecycleState有四种状态:inactive、paused、reasumed、detached(以前还有个suspending,已过期)它们与Android和IOS的生命周期对应关系如下表:状态 说...原创 2020-04-02 13:04:56 · 613 阅读 · 0 评论 -
【Flutter】使用PlatformView显示WebView
通过PlatformView实现Flutter插件,能够调用和显示Android的WebView等Native控件原创 2020-03-28 15:15:09 · 3754 阅读 · 0 评论 -
Flutter常用命令整理
平日使用Android Studio等IDE进行flutter开发,不会直接使用flutter命令。 未来难免会出现写一些脚本的需求,所以整理了一下flutter的常用命令环境搭建$ flutter doctor进行flutter环境诊断,比如有没有缺少安装的东西等。当flutter不能启动时,试试这个$ flutter upgrade更新Flutter SDK 以及依赖包,在应用程序...原创 2020-03-26 21:11:37 · 3167 阅读 · 0 评论 -
【Flutter】pubspec.yaml中的版本管理
flutter项目使用pubspec.yaml进行依赖管理,其中对于依赖库的版本设置的方法比较灵活,设置不当可能会出现错误,这里集中整理一下:不指定版本 or any对版本无要求,此时默认会优先依赖最新版本# pubspec.yamldependencies: rxdart: # 任意版本OK provider: any # 任意版本OK需注意,从性能上考量并...原创 2020-03-26 13:45:27 · 2661 阅读 · 0 评论 -
面向Kotlin与Java开发者的Dart快速入门(十四)Typedef、Metadata
Typedef可以理解成Kotlin中typealias的函数限定版,只能用来对函数定义别名。typedef GestureTapDownCallback = void Function(TapDownDetails details);定义还可以携带泛型typedef Compare<T> = int Function(T a, T b);int sort(int a,...原创 2020-03-05 02:35:44 · 295 阅读 · 0 评论 -
面向Kotlin与Java开发者的Dart快速入门(十三)注释
Dart的注释用法与Java大体相同。单行注释final hoge = 0; // 到行末都是注释内容多行注释与Java一样/**/void main() { /* * This is a lot of work. Consider raising chickens. Llama larry = Llama(); larry.feed(); larr...原创 2020-03-05 02:35:35 · 223 阅读 · 1 评论 -
面向Kotlin与Java开发者的Dart快速入门(十二)异步与并发
异步编程Dart可以像C#或Javascript那样可以通过 async/await 实现异步逻辑Future与async/await与Js的async/awiat是Promise的语法糖一样,Dart的async/awiat只不过是Future的语法糖,可以帮助我们的用同步的代码处理Future提高可读性。脱离async/await,Future本身的API仍然可以完成异步逻辑。Fu...原创 2020-03-05 02:35:27 · 286 阅读 · 0 评论 -
面向Kotlin与Java开发者的Dart快速入门(十一)库与导入(import)
Library的导入import关键字导入Libraryimport 'dart:html';Library的URI通过URI导入一个Library根据library的种类不同,URI前缀scheme不同:Dart标准库… dart:xxx三方库(通过包管理器提供的库,如pub工具)… package:xxxFlutter的Library中也有三方库import '...原创 2020-03-05 02:35:18 · 289 阅读 · 0 评论 -
面向Kotlin与Java开发者的Dart快速入门(十)泛型
整体上与Java的泛型相似,有少许区别运行时持有类型信息Java的泛型的类型信息在运行时会丢弃,Dart则一直保持到运行时,可以动态check泛型信息final strList = <String>[ "hoge", "fuga", "moge"];assert(strList is List<String>);泛型上下界跟Java一样, <...原创 2020-03-05 02:35:06 · 248 阅读 · 0 评论 -
面向Kotlin与Java开发者的Dart快速入门(九)静态变量、枚举
静态变量、方法静态变量、方法的定义与使用与Java中完全相同,同样使用static关键字,同样不用通过实例调用。如果是一个广泛使用的静态方法,建议使用top-level方法替代静态方法,我们在Kotlin的编码规范中往往也是这样要求的。一个疑问Dart2官方有以下一段文字You can use static methods as compile-time constants. Fo...原创 2020-03-05 02:34:55 · 336 阅读 · 1 评论 -
面向Kotlin与Java开发者的Dart快速入门(八)继承与Mixins
隐式接口Java中我们总是把接口和抽象类放到一起理解:接口是极致抽象的抽象类。Dart中接口和类是统一的,每个类同时也是一个接口:没有interface关键字,声明class的同时隐式地创建同名接口类中的非私有的成员可以通过接口对外暴露,但需要被实现与Java一样,使用implements 关键字实现接口抽象类同样具有隐式接口// Person声明的同时,创建同名接口,内有方法...原创 2020-03-05 02:34:37 · 549 阅读 · 0 评论 -
面向Kotlin与Java开发者的Dart快速入门(七)类的成员方法
成员方法与Java的成员方法无论在定义或是调用上没有区别。惟一的区别是Dart的成员方法无法重载,但是有可选参数的加持,也没有大问题getter/setterDart的getter/setter与Kotlin的类似,但是没有backing filed的概念,所有没有filed变量用来存储数据,需要自己声明一个私有变量来充当所谓的backing fieldclass Rect { ...原创 2020-03-05 02:34:20 · 197 阅读 · 0 评论 -
面向Kotlin与Java开发者的Dart快速入门(六)类与实例化
类(Class)与Java相同,Dart中所有的类都是Object的子类。与Java和Kotlin一样,this关键字指向当前实例,Dart的代码风格建议省略this,仅在名称冲突等必要的时候使用。Dart1的对象实例化与Java一样使用new关键字,Dart2开始可以向Kotlin一样不使用new创建实例实例通过instance.runtimeType可以获取一个类型对象,相当于Jav...原创 2020-03-05 02:33:56 · 315 阅读 · 0 评论 -
面向Kotlin与Java开发者的Dart快速入门(五)流程控制、异常处理
Dart的流程控制(Control flow)、异常控制(Exception)等处理原创 2020-03-05 02:33:45 · 210 阅读 · 0 评论 -
面向Kotlin与Java开发者的Dart快速入门(四)操作符、运算符
Dart的操作符 运算符等介绍原创 2020-03-05 02:33:35 · 296 阅读 · 0 评论 -
面向Kotlin与Java开发者的Dart快速入门(三)函数
函数签名Dart采用与Java一样的函数签名写法String greet(String name) { return "Hello, $name";}Dart可以通过类型推导确定返回值类型,随意允许在签名中省略返回值类型:greet(String name) { return "Hello, $name";}但是根据Effective Dart为避免可读性下...原创 2020-03-05 02:33:25 · 253 阅读 · 0 评论 -
面向Kotlin与Java开发者的Dart快速入门(二) 内置类型
数值数值类型包括整形int, BigInt,以及浮点型double,int是64bit的,超出这个范围使用Bigint。数值类型的字面值在编译期可以确定,所以使用const声明数值常量const A = 3;const B = 9;const C = A * B;字符串String var str = "可以使用双引号字符串";String var str = '也可以向JS...原创 2020-03-05 02:33:12 · 289 阅读 · 0 评论 -
面向Kotlin与Java开发者的Dart快速入门(一)变量
前言本系列文章通过与Kotlin或Java的对比来介绍Dart的基本语法,主要基于以下两点考虑:Dart有很多与Kotlin或Java相近的语法,与Java尤其相似很多学习Flutter的同学都是Android开发者,都有Kotlin或Java的使用经验除Kotlin和Java以外,Dart的语法中也能看到Javascript、python、C#等语言的影子,写到之处会简单提及但是不...原创 2020-03-05 02:32:58 · 511 阅读 · 0 评论 -
面向Kotlin与Java开发者的Dart入门教程
前言本系列文章以Dart 2.7 为基础,通过与Kotlin或Java的对比来介绍Dart的语法特点和使用方法,主要基于以下两点考虑:Dart有很多与Kotlin或Java相近的语法,与Java尤其相似很多正在学习Flutter的同学都是Android开发者,都有Kotlin或Java的使用经验除Kotlin和Java以外,Dart的语法中也能看到Javascript、python、...原创 2020-03-05 02:32:28 · 439 阅读 · 0 评论 -
Flutter与Native通信(三)BasicMessageChannel
flutter可以native之间可以通过Platform Channels APIs进行通信,API主要有以下三种:MethodChanel:用于传递方法调用(method invocation) EventChannel:用于事件流的发送(event streams) BasicMessageChannel:用于传递字符串和半结构化的消息BasicMessageChannel用于在f...原创 2020-02-11 13:01:25 · 4008 阅读 · 0 评论 -
Flutter与Native通信(二)EventChannel
flutter可以native之间可以通过Platform Channels APIs进行通信,API主要有以下三种:MethodChanel:用于传递方法调用(method invocation) EventChannel:用于事件流的发送(event streams) MessageChannel:用于传递字符串和半结构化的消息其中EventChannel用于从native向flut...原创 2020-02-10 21:20:24 · 14153 阅读 · 3 评论 -
Flutter与Native通信(一)MethodChannel
flutter可以与native之间进行通信,帮助我们使用native提供的能力。通信是双向的,我们可以从Native层调用flutter层的dart代码,同时也可以从flutter层调用Native的代码。我们需要使用Platform Channels APIs进行通信,主要包括下面三种:MethodChanel:用于传递方法调用(method invocation) EventChann...原创 2020-02-10 19:47:57 · 3299 阅读 · 0 评论