Flutter 基于 WebSocket 实现即时通讯

前言

我们在前面花了很大篇幅介绍 Provider 状态管理,这是因为在 Flutter 中,Provider 是众多状态管理插件的首选。本篇以即时聊天为例,来讲述 Provider 的综合应用,也算是 Provider 状态管理系列的终结篇。本篇涉及的内容如下:

  • 联系人界面的构建;
  • 聊天界面的简单实现;
  • StreamProvider 接收 Socket流数据并自动通知界面刷新;
  • MultiProvider为聊天主界面提供多个Provider状态;
  • 多个 Provider存在交叉数据时处理方式。

联系人界面构建

我们在聊天前,需要选择对应的联系人进行单聊,因此需要构建一个联系人列表。这里我们使用简单的 ListView.builder+Mock 数据构建联系人列表。界面如下所示,其中关键的就是点击联系人时将联系人的 id通过路由传递过去,以便发送消息时通过用户 id指定接收用户。

return ListTile(
  leading: _getRoundImage(contactors[index].avatar, 50),
  title: Text(contactors[index].nickname),
  subtitle: Text(
    contactors[index].description,
    style: TextStyle(fontSize: 14.0, color: Colors.grey),
  ),
  onTap: () {
    debugPrint(contactors[index].id);
    RouterManager.router.navigateTo(c

你可能感兴趣的:(Flutter,入门与实战,flutter,websocket,android,移动开发,App,开发)