Flutter即时通讯插件at_chat_flutter的使用

概述

at_chat_flutter 是一个用于Flutter开发者的即时通讯插件，支持在基于atPlatform构建的应用中添加点对点聊天功能。该开源包由Dart编写，遵循去中心化的边缘计算模型，并具有以下特性：

• 通过个人数据存储进行数据访问的加密控制
• 不需要应用后端
• 端到端加密，只有数据所有者拥有密钥
• 私有且无监控的连接
• 点对点聊天

更多关于其工作原理的信息可以参考此概述。

开始使用

1. 快速开始 - 使用 at_app 生成骨架应用

你可以使用 at_app create 命令生成一个示例应用模板，然后个性化修改：

$ flutter pub global activate at_app 
$ at_app create --sample=<package ID> <app name> 
$ cd <app name>
$ flutter run

注意：

• 你只需运行一次 flutter pub global activate
• 在Windows上使用 at_app.bat

2. 从GitHub克隆

可以从 GitHub仓库 克隆源代码。其中包含的示例代码与上面提到的模板相同。

$ git clone https://github.com/atsign-foundation/at_widgets.git

3. 手动添加包到项目

可以在 pub.dev 上找到手动添加包的详细说明。

工作原理

设置

聊天服务需要初始化。通常情况下，应用程序首先创建一个 AtClientService 实例，然后用它来初始化聊天服务。

initializeChatService(atClientManager, activeAtSign!,
        rootDomain: AtEnv.rootDomain);

使用

作为底部弹出层

FlatButton(
    onPressed: () {
        scaffoldKey.currentState
        .showBottomSheet((context) => ChatScreen());
    },
    child: Container(
        height: 40,
        child: Text('Open chat in bottom sheet'),
    ),
),

作为屏幕

class ThirdScreen extends StatefulWidget {
  @override
  _ThirdScreenState createState() => _ThirdScreenState();
}

class _ThirdScreenState extends State<ThirdScreen> {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: Text('Chat Screen')),
      body: ChatScreen(
        height: MediaQuery.of(context).size.height,
        incomingMessageColor: Colors.blue[100],
        outgoingMessageColor: Colors.green[100],
        isScreen: true,
      ),
    );
  }
}

示例Demo

以下是一个完整的示例应用，展示如何集成和使用 at_chat_flutter 插件。

import 'package:flutter/material.dart';
import 'package:at_chat_flutter/at_chat_flutter.dart';
import 'package:at_onboarding_flutter/at_onboarding_flutter.dart';

void main() async {
  WidgetsFlutterBinding.ensureInitialized();
  
  // 初始化onboarding流程
  await AtOnboarding.onboard(
    context: context,
    config: AtOnboardingConfig(
      domain: 'root.atsign.wtf',
      namespace: 'example',
      apiKey: '<your-api-key>',
    ),
  );

  runApp(MyApp());
}

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: HomeScreen(),
    );
  }
}

class HomeScreen extends StatefulWidget {
  @override
  _HomeScreenState createState() => _HomeScreenState();
}

class _HomeScreenState extends State<HomeScreen> {
  final GlobalKey<ScaffoldState> _scaffoldKey = GlobalKey<ScaffoldState>();

  @override
  void initState() {
    super.initState();
    initializeChatService(atClientManager, activeAtSign!, rootDomain: 'root.atsign.wtf');
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      key: _scaffoldKey,
      appBar: AppBar(title: Text('Home Screen')),
      body: Center(
        child: FlatButton(
          onPressed: () {
            _scaffoldKey.currentState?.showBottomSheet((context) => ChatScreen());
          },
          child: Text('Open Chat Bottom Sheet'),
        ),
      ),
    );
  }
}

这个示例展示了如何使用 at_chat_flutter 插件在Flutter应用中实现点对点聊天功能。希望这些信息对你有所帮助！如果有任何问题或建议，请随时反馈。