Flutter即时通讯插件laraigo_chat的使用

Flutter即时通讯插件laraigo_chat的使用

laraigo_chat 是一个用于实现即时通讯功能的 Flutter 插件。它支持实时通信、在线聊天定制、多媒体文件选择、位置共享以及多种类型的交互（如文本、按钮和轮播）。

特性

• 实时通信
• 在线聊天定制
• 多媒体文件选择
• 位置共享
• 多种类型的交互（文本、按钮和轮播）

开始使用

首先，你需要在你的 Flutter 项目中添加 laraigo_chat 作为依赖项。

在 pubspec.yaml 文件中添加以下依赖项：

dependencies:
  laraigo_chat: ^1.0.9+48

由于项目使用了 geolocator 来共享位置，因此需要添加相应的权限。请参考 Geolocator 指南 进行配置。

还需要在 Android 文件夹中启用 MultiDex：

multiDexEnabled true

设置最小 SDK 版本为 20：

minSdk 20

如果你想要使用 Google Maps 功能来显示共享的位置，则需要在应用清单文件 android/app/src/main/AndroidManifest.xml 中指定你的 API 密钥：

<manifest ...
  <application ...
    <meta-data android:name="com.google.android.geo.API_KEY"
               android:value="YOUR KEY HERE"/>

如果你遇到与 Google Maps 相关的集成问题，请查阅 Google Maps Flutter 文档 获取更多帮助。

最后，运行以下命令更新包：

flutter packages upgrade

或者在 IntelliJ 中更新包。

示例项目

在 example 文件夹中有一个示例项目。你可以查看该示例项目。如果没有查看示例项目，继续阅读以快速上手。

使用方法

需要在 Dart 文件中导入插件包。使用以下命令：

import 'package:laraigo_chat/socket_action_button.dart';

自定义容器

SocketContainer(
  child: widget,
  integrationId: "Your Integration Id",
  customMessage: "Hola",
)

浮动操作按钮

floatingActionButton: SocketActionButton(
  integrationId: 'Your Integration Id',
)

提升按钮

SocketElevatedButton(
  width: 80,
  height: 80,
  integrationId: "Your Integration Id",
  child: Container(
    width: 80,
    height: 80,
    padding: const EdgeInsets.all(10),
    child: Column(
      mainAxisAlignment: MainAxisAlignment.center,
      crossAxisAlignment: CrossAxisAlignment.center,
      children: const [
        Icon(Icons.chat),
        Text("Soporte")
      ],
    ),
  ),
)

文本按钮

SocketTextButton(
  customMessage: "Hola",
  integrationId: "Your Integration Id",
  child: const Text("Iniciar conversación"),
)

完整示例

import 'package:laraigo_chat/core/widget/socket_action_button.dart';
import 'package:flutter/material.dart';

void main() {
  runApp(const MyApp());
}

class MyApp extends StatelessWidget {
  const MyApp({super.key});

  [@override](/user/override)
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Demo',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: const MyHomePage(title: 'Flutter Demo Home Page'),
    );
  }
}

class MyHomePage extends StatefulWidget {
  const MyHomePage({super.key, required this.title});
  final String title;

  [@override](/user/override)
  State<MyHomePage> createState() => _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> {
  int _counter = 0;

  void _incrementCounter() {
    setState(() {
      _counter++;
    });
  }

  [@override](/user/override)
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text(widget.title),
      ),
      body: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: <Widget>[
            const Text(
              'You have pushed the button this many times:',
            ),
            Text(
              '$_counter',
              style: Theme.of(context).textTheme.headline4,
            ),
          ],
        ),
      ),
      floatingActionButton: SocketActionButton(
        integrationId: 'Your Integration Id',
      ),
    );
  }
}

示例代码

// ignore_for_file: prefer_final_fields

import 'package:flutter/material.dart';
import 'package:laraigo_chat/core/widget/socket_container.dart';

void main() {
  runApp(const MyApp());
}

class MyApp extends StatelessWidget {
  const MyApp({super.key});

  [@override](/user/override)
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Demo',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: const MyHomePage(title: 'Flutter Demo Home Page'),
    );
  }
}

class MyHomePage extends StatefulWidget {
  const MyHomePage({super.key, required this.title});
  final String title;

  [@override](/user/override)
  State<MyHomePage> createState() => _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> {
  int _counter = 0;

  [@override](/user/override)
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text(widget.title),
      ),
      body: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: <Widget>[
            const Text(
              'You have pushed the button this many times:',
            ),
            Text(
              '$_counter',
              style: Theme.of(context).textTheme.headlineMedium,
            ),
          ],
        ),
      ),
      floatingActionButton: SocketContainer(
        width: 100,
        height: 80,
        customMessage: "Hola",
        circularProgressIndicatorColor: Colors.amber,
        integrationId: '63d8224c5c8a9dde22652275',
        child: Container(
          decoration: BoxDecoration(
            color: Colors.red,
            borderRadius: BorderRadius.circular(10),
          ),
          child: Material(
            borderRadius: BorderRadius.circular(10),
            elevation: 10,
            child: Container(
              decoration: BoxDecoration(
                color: Colors.red,
                borderRadius: BorderRadius.circular(10),
              ),
              child: const Column(
                children: [
                  Text("PRUEBA"),
                  Icon(Icons.read_more),
                ],
              ),
            ),
          ),
        ),
      ),
    );
  }
}