Kotlin开发者尝试Flutter——错怪了Dart这门语言

前言

我曾经是Java安卓开发者，进入大学后了解并且转向了Kotlin开发安卓，时至今日已经有了一年时间，Kotlin带给我的体验实在是太惊艳了，我深信这就是我最喜欢的语言了。

抱着这种看法，我发现了Flutter+Dart这种抽象的组合，大量的嵌套好像让我在写ifelse，这导致了我迟迟没有接触Flutter跨平台框架，当然还有一些其他原因。

其实在之前Flutter的跨平台能力已经惊艳到我了，这次寒假正好有机会让我学习它。

当我试着用它完成业务时，我发现好像也不是那么不可接受，我甚至还有那么点快感，如果你写过安卓Compose那么你会更加觉得如此，因为在UI和业务的关系上它真的太容易绑定了，我不再考虑像XML监听数据变化，只可惜Dart语法仍然在一些地方让我感觉到不太好用，还是得Kotlin来，等等，那我不就是想要Compose吗？

哈哈，不要着急，为什么这个项目是Flutter而不是KMP随后我们再说。

其实我本身没有很严重的技术癖，面对新的事物和技术，一旦有合适的机会我都是愿意试一试，比起框架的选择，我更加享受开发过程，思想转换为代码的那一刻至少我是享受的。

这次选择Flutter开发不意味着我会一直选择和追捧它，更不会放弃安卓原生和KMP的学习，因此也希望阅读这篇文章读者意识到这点，我作为原生开发者学习Flutter是希望扩展技能而不是代替原生，Flutter本身也不是这么想的，它更像是给大家了一个更低的开发门槛，让更多其他领域的创作者完成他们作品的一种媒介。

如果你希望快速了解Kotlin开发者使用Dart的开发体验，那么直接跳过下面两部分，直接阅读#错怪的Dart。

动机

我觉得主要动机由两部分组成吧，一部分是跨平台开发本身是我感兴趣的方向之一，另一边是未来工作可能需要吧，现在来看国内跨平台趋势还是比较明显的。

不过我更希望这次项目是体验移动跨平台开发，而不是真正的深入学习移动跨平台开发。为此，我希望可以找到学习成本和项目质量相平衡的开发方式，很遗憾我没有那么多的精力做到既要还要，这是我必须面临的选择。

面对众多跨平台框架下我还是选择了Flutter，这主要与它的跨桌面端和生态完善有关，毫无疑问，Flutter有许多的成品组件，这让我可以快速轻松的上手跨平台开发。

为什么是Flutter

这个项目的主要功能就是播放器，只不过这个播放器比较特殊，后续文章我们会揭晓它。

单就网络音频播放器开发任务而言，假设使用KMP可能没有现成封装好的库来给我用，可能许多开发者考虑没有就造一个，很遗憾，我不太具备这样的能力，我们需要同时对接多个平台的媒体播放，无论开发周期，单就这样的任务对我已经是很难了。

好吧，我想必须承认我很菜，但是事实如此，因此我选择了更加成熟的Flutter，避免我写不出来，哈哈哈哈。

不过我们今天先不谈Flutter，我们看看Dart。

错怪的Dart

对Dart的刻板印象是从我第一次见到Flutter的语法时形成的，第一次见到Dart时我还没有接触Kotlin。

看着有点像Java，还有好多_的名字是什么鬼东西、怎么要写这么多return、为什么有个？、总之就是反人类啊！！！

当我真正尝试去编写Flutter程序时，我发现，嗯，错怪Dart了，特别是因为我了解Kotlin后，Kotlin和Dart也有几分相似之处，这体现在一些语法特性上。

空安全

可空类型在Kotlin上可以说相当不错，在Dart上也可以体验到它，虽然它是类型前置，但是写法倒是一样的在类型后加上"?"即可。

class AudioMediaItem {
  String title;
  String description;
  AudioMediaType type;
  String? mediaUrl;
  String? bvId;
  //省略其他代码.....
}

当我们试图使用AudioMediaItem的对象时，我们就可以像Kotlin那样做，注意mediaUrl现在是可空的。

audioMediaItem?.mediaUrl，如果我们认为这个属性一定有值，那么就可以使用audioMediaItem!.mediaUrl，需要注意的是，dart中是"!“而不是”!!"。

如果你希望使用Kotlin的Elvis操作符 ?: ，那么你可以这么做

audioMediaItem?.mediaUrl ?? "default";

对应Kotlin的

audioMediaItem?.mediaUrl ?: "default"

在这方面，dart和Kotlin是非常相似的，因此，你可以非常平滑的迁移这部分的开发体验和理解。

延迟初始化

在Kotlin中，我们可以使用lateinit var定义一个非空延迟初始化的变量，通俗的讲就是定义一个非空类型，但是不给初始值。dart也有对应从关键字，那就是late了。

late String name;

相当于Kotlin的

lateinit var String name

我们知道延迟初始化意味着这个值必定有值，只是我们希望这个值在代码运行过程中产生并且初始化，初始化后再使用该值，否则就会空指针了。

如果你已经熟悉了Kotlin的lateinit，那这里也可以平滑迁移了。

但是在Android Studio 2023.1.1我发现个有意思的事情。

late String? name;

ide没有提示这是错误的，我没试着运行，但是我觉得这应该是不合理的。

扩展函数

扩展函数在Kotlin当中可以说相当重要，许多内置函数都是这个特性所带来的。

在Kotlin中，我们通过 被扩展的类名.扩展函数名(){} 这样的写法就实现了一个扩展函数。

fun String.toColorInt(): Int = Color.parseColor(this)

Dart中也存在扩展函数的语法糖！

extension StringExtension on String {
  /// 将字符串的首字母大写
  String capitalize() {
    if (isEmpty) {
      return this;
    }
    return '${this[0].toUpperCase()}${substring(1)}';
  }
}

其中，StringExtension只是这个扩展的名字，相当于一个标志，可以随便起，on String则代表扩展String类，那么capitalize 自然就是扩展的方法名了。

将Kotlin的内置函数带入

Kotlin的内置函数实在是太棒了，下面以also和let为例子，模仿了Kotlin的扩展函数，只可惜Dart的lambda不太能像Kotlin那样，还是有一些割裂。

extension AlsoExtension<T> on T {
  T also(void Function(T) block) {
    block(this);
    return this;
  }
}

extension LetExtension<T> on T {
  R let<R>(R Function(T) block) {
    return block(this);
  }
}

//用法
String demo = "xada".let((it) => "${it}xadadawdwad");

emm不过因为没办法直接传this，在变量很长或者类型可空时还有点用。

顶层函数

Kotlin中，我们有时候需要在全局使用一些函数，但是不希望写在类里，而是随时随地直接可以调用或者拿到。

注意这些代码不在类里

val json = Json {
    prettyPrint = true
    isLenient = true
    ignoreUnknownKeys = true
}

var retrofit = Retrofit.Builder()
    .baseUrl("https://api.juejin.cn/")
    .addConverterFactory(json.asConverterFactory(MediaType.parse("application/json;charset=utf-8")!!))
    .build()
    

在某个类需要我们就直接写retrofit.xxxx() 就可以了，我们不需要再单独从类中找。

Dart也有这样的功能

final _cookieJar = CookieJar();

final Dio dioClient = Dio(BaseOptions(
  baseUrl: baseUrl,
  connectTimeout: const Duration(seconds: 5),
  receiveTimeout: const Duration(seconds: 5),
  contentType: Headers.jsonContentType,
  persistentConnection: true,
))
  ..transformer = BackgroundTransformer()
  ..let((it) {
    if (!kIsWeb) {
      it.interceptors.add(CookieManager(_cookieJar));
      return it;
    } else {
      return it;
    }
  });

上面的例子只是写了变量，写函数也是一样的，都可以直接在全局任何的位置调用。

高阶函数

在Kotlin中，高阶函数是特殊的一种函数，这种函数接受了另一个函数作为参数。

我们以Kotlin的forEach函数为例子：

public inline fun <T> Iterable<T>.forEach(action: (T) -> Unit): Unit {
    for (element in this) action(element)
}

// 用法
fun main() {
    val demoList = listOf("da", "da", "da")
    demoList.forEach {
        println(it)
    }
}

forEach本身扩展了Iterable，但是它的参数非常特殊，我们看看action参数的类型：

(T) -> Unit，这是Kotlin匿名函数的写法，意味着这个函数有一个参数，类型为T泛型，这个参数也没有起名字，所以就只有类型T在。

这种情况，在Java中这种实现一般是接口类，我们需要实例化这个匿名类，假设这个接口只有一个方法，那么就可以转换为lambda的写法。

在Kotlin里我们可以直接写为lambda的形式，要方便很多，由于只有一个参数，那么kotlin默认就叫it了。

OK回顾完Kotlin，我们看看Dart：

void forEach(void action(E element)) {
  for (E element in this) action(element);
}

//用法
List<String> demoList = ["da","da","da"];

demoList.forEach((element) { 
   print(element);
});

其实差别不大，只是我们需要写void当作这个参数的类型，内部写法没有太大差异。

不过，Dart的lambda更加贴近JS，写法基本上是一模一样。

相信如果你已经掌握了Kotlin的高阶函数，那么在Dart尝试也是不错的。

运算符重载

Kotlin当中有个不太常用的东西，叫运算符重载，它在Dart中也有。

public operator fun <T> Collection<T>.plus(elements: Iterable<T>): List<T> {
    if (elements is Collection) {
        val result = ArrayList<T>(this.size + elements.size)
        result.addAll(this)
        result.addAll(elements)
        return result
    } else {
        val result = ArrayList<T>(this)
        result.addAll(elements)
        return result
    }
}

//用法
val demoList = listOf("da", "da", "da") + listOf<String>("add")

可以看到kotlin通过operator关键字配合扩展函数实现了这个功能，dart也可以模仿这种手段：

// 模仿
extension ListPlusOperatorExtension<T> on List<T>  {
  List<T> operator +(List<T> elements) {
    List<T> result = this;
    addAll(elements);
    return result;
  }
}

// 用法
    
List<String> demo1 = ["da","da"];

List<String> demo2 = ["da","d1a"] + demo1;

不过这里的加减乘除就是operator + 了。

总结

可以看得出，Dart也有部分我们在Kotlin中喜欢的特性，如果你已经掌握了Kotlin的基本语法，那么相信Dart对你来说也不是太大问题，你可以平滑的迁移一些在Kotlin中的知识到Dart上去。

起初我是很坑距使用Flutter的，现在看见Dart的特性，我似乎又接受了一些，好吧，对于Flutter开发、布局约束和其他感受我在下一篇文章再分享给大家吧。

最后

为了能够方便大家快速学习Flutter, 这里整理了Flutter学习路线图以及《Flutter Dart 语言编程入门到精通》&《Flutter实战：第二版》帮助大家配置相关环境，学习Flutter 的基本语法以及最后的项目实际利用。扫描下方二维码即可免费领取！！！

学习路线：

Dart语言是Flutter的开发语言，所以我们需要掌握Dart语言的基础知识

《Flutter Dart 语言编程入门到精通》

第一章 Dart语言基础

• 环境准备
• 基础语法

第二章 Dart 异步编程

• Dart的事件循环
• 调度任务
• 延时任务
• Future详解
• async和await
• lsolate

第三章 异步之 Stream 详解

• 什么是Stream
• 单订阅流
• 广播流
• Stream Transformer
• 总结

第四章 Dart标准输入输出流

• 文件操作

第五章 Dart 网络编程

• TCP服务端
• TCP客户端
• UDP服务端
• UDP客户端
• HTTP服务器与请求
• WebSocket

第六章 Flutter 爬虫与服务端

• Dart爬虫开发
• Dart服务端
• 创建Flutter项目演示
• 总结

第七章 Dart 的服务端开发

• 注册登录实现

第八章 Dart 调用C语言混合编程

• 环境准备
• 测试Dart ffi接口
• 总结

第九章 LuaDardo中Dart与Lua的相互调用

• Lua C API
• 创建运行时
• Dart调Lua
• Lua调Dart

掌握了Dart语言之后，咱们就可以通过实战来掌握Flutter的知识点

《Flutter实战：第二版》

第一章：起步

• 1.1 移动开发技术简介
• 1.2 初始Flutter
• 1.3 搭建Flutter开发环境
• 1.4 Dart语言简介

第二章：第一个Flutter应用

• 2.1 计数器应用实例
• 2.2 Widget简介
• 2.3 状态管理
• 2.4路由管理
• 2.5包管理
• 2.6 资源管理
• 2.7 调试Flutter应用
• 2.8 Flutter异常捕获

第三章：基础组件

• 3.1 文本及样式
• 3.2 按钮
• 3.3 图片及ICON
• 3.4 单选开关和复选框
• 3.5 输入框及表单
• 3.6 进度指示器

第四章：布局类组件

• 4.1 布局类组件简介
• 4.2 布局原理与约束（constraints）
• 4.3 线性布局（Row和Column）
• 4.4 弹性布局（Flex）
• …

第五章：容器类组件

• 5.1 填充（Padding）
• 5.2 装饰容器（DecoratedBox）
• 5.3 变换（Transform）
• 5.4 容器组件（Container）
• 5.5 剪裁（Clip）
• 5.6 空间适配（FittedBox）
• 5.7 页面骨架（Scaffold）

第六章：可滚动组件

• 6.1 可滚动组件简介
• 6.2 SingleChildScrollView
• 6.3 ListView
• 6.4 滚动监听及控制
• …

第七章：功能型组件

• 7.1 导航返回拦截（WillPopScope）
• 7.2 数据共享（InheritedWidget）
• 7.3 跨组件状态共享
• 7.4 颜色和主题
• 7.5 按需rebuild（ValueListenableBuilder）
• 7.6 异步UI更新（FutureBuilder、StreamBuilder）
• 7.7 对话框详解

第八章：事件处理与通知

• 8.1 原始指针事件处理
• 8.2 手势识别
• 8.3 Flutter事件机制
• 8.4 手势原理与手势冲突
• 8.5 事件总线
• 8.6 通知 Notification

第九章：动画

• 9.1 Flutter动画简介
• 9.2 动画基本结构及状态监听
• 9.3 自定义路由切换动画
• 9.4 Hero动画
• 9.5 交织动画
• 9.6 动画切换组件（AnimatedSwitcher）
• 9.7 动画过渡组件

第十章：自定义组件

• 10.1 自定义组件方法简介
• 10.2 组合现有组件
• 10.3 组合实例：TurnBox
• 10.4 CustomPaint 与 Canvas
• 10.5 自绘实例：圆形背景渐变进度条
• 10.6 自绘组件：CustomCheckbox
• 10.7 自绘组件: DoneWidget
• 10.8 水印实例: 文本绘制与离屏渲染

第十一章：文件操作与网络请求

• 11.1 文件操作
• 11.2 通过HttpClient发起HTTP请求
• 11.3 Http请求库-dio
• 11.4 实例：Http分块下载
• …

第十二章：Flutter扩展

• 12.1 包和插件
• 12.2 Flutter Web

第十三章：国际化

• 13.1 让App支持多语言
• 13.2 实现Localizations
• 13.3 使用Intl包
• 13.4 国际化常见问题

第十四章：Flutter核心原理

• 14.1 Flutter UI 框架（Framework）
• 14.2 Element、BuildContext和RenderObject
• 14.3 Flutter启动流程和渲染管线
• 14.4 布局（Layout）过程
• 14.5 绘制（一）绘制原理及Layer
• …

第十五章：一个完整的Flutter应用

• 15.1 Github客户端示例
• 15.2 Flutter APP代码结构
• 15.3 Model类定义
• 15.4 全局变量及共享状态
• 15.5 网络请求封装
• 15.6 APP入口及主页
• 15.7 登录页
• 15.8 多语言和多主题

由于内容过多，截图展示的目录及部分内容，完整文档领取方式扫描下方二维码即可免费获取！