Flutter即时通讯插件flutter_tawk的使用

pub package

Tawk Logo

Tawk 是一个强大的客户支持平台，允许您在网站或移动应用中嵌入聊天功能。flutter_tawk 是一个 Flutter 插件，可以帮助您轻松地将 Tawk 聊天功能集成到您的 Flutter 应用中。

🚀 展示

Screenshot 1	Screenshot 2	Screenshot 3

安装

要在您的项目中使用 flutter_tawk，请在 pubspec.yaml 文件中添加以下依赖：

dependencies:
  flutter_tawk: ^latest_version

导入

在您的 Dart 文件中导入 flutter_tawk 包：

import 'package:flutter_tawk/flutter_tawk.dart';

使用方法

以下是一个简单的示例，展示如何在 Flutter 应用中使用 flutter_tawk：

import 'package:flutter/material.dart';
import 'package:flutter_tawk/flutter_tawk.dart';

void main() => runApp(const MyApp());

class MyApp extends StatelessWidget {
  const MyApp({Key? key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(
          title: const Text('Flutter Tawk'),
          backgroundColor: const Color(0XFFF7931E),
          elevation: 0,
        ),
        body: Tawk(
          directChatLink: 'YOUR_DIRECT_CHAT_LINK', // 替换为您的 Tawk 直接聊天链接
          visitor: TawkVisitor(
            name: 'Ayoub AMINE',
            email: 'ayoubamine2a@gmail.com',
          ),
          onLoad: () {
            print('Hello Tawk!');
          },
          onLinkTap: (String url) {
            print(url);
          },
          placeholder: const Center(
            child: Text('Loading...'),
          ),
        ),
      ),
    );
  }
}

自定义

Tawk

参数	类型	默认值	描述	是否必需
directChatLink	`String`	`null`	Tawk 直接聊天链接。	是
visitor	`TawkVisitor`	`null`	用于设置访客姓名和电子邮件的对象。	否
onLoad	`Function`	`null`	小部件渲染后调用的函数。	否
onLinkTap	`Function`	`null`	点击链接时调用的函数。	否
placeholder	`Widget`	`Center(child: CircularProgressIndicator())`	渲染自定义加载小部件。	否

TawkVisitor

参数	类型	默认值	描述	是否必需
name	`String`	`null`	访客的姓名。	否
email	`String`	`null`	访客的电子邮件。	否
hash	`String`	`null`	安全模式。	否

贡献

如果您发现错误或需要新功能，但不知道如何修复/实现它，请提交一个 issue。
如果您修复了错误或实现了新功能，请发送一个 pull request。

更新日志

CHANGELOG

许可证

MIT License

更多关于Flutter即时通讯插件flutter_tawkto的使用的实战系列教程也可以访问 https://www.itying.com/category-92-b0.html

zlyuanteng 1楼•1 天前

更多关于Flutter即时通讯插件flutter_tawkto的使用的实战系列教程也可以访问 https://www.itying.com/category-92-b0.html

当然，以下是一个关于如何在Flutter项目中使用flutter_tawkto插件来实现即时通讯功能的示例代码。flutter_tawkto是一个Flutter插件，用于集成Tawk.to的即时聊天小部件。

首先，确保你已经在pubspec.yaml文件中添加了flutter_tawkto依赖：

dependencies:
  flutter:
    sdk: flutter
  flutter_tawkto: ^最新版本号  # 请替换为最新版本号

然后运行flutter pub get来获取依赖。

接下来，按照以下步骤在你的Flutter应用中集成Tawk.to即时通讯功能：

初始化Tawk.to：

在你的main.dart文件中，首先导入flutter_tawkto包，然后在应用启动时初始化Tawk.to。

import 'package:flutter/material.dart';
import 'package:flutter_tawkto/flutter_tawkto.dart';

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    // 初始化Tawk.to
    Tawkto.init(
      yourPropertyId: 'YOUR_PROPERTY_ID', // 替换为你的Tawk.to Property ID
    );

    return MaterialApp(
      title: 'Flutter Tawk.to Demo',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: MyHomePage(),
    );
  }
}

class MyHomePage extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Flutter Tawk.to Demo'),
      ),
      body: Center(
        child: ElevatedButton(
          onPressed: () {
            // 显示Tawk.to聊天窗口
            Tawkto.showChatWidget();
          },
          child: Text('Open Chat'),
        ),
      ),
    );
  }
}

配置Tawk.to（可选）：

你可以根据需要在初始化之前或之后配置更多的Tawk.to设置。例如，设置访客信息：

Tawkto.setVisitor({
  'name': 'John Doe',
  'email': 'john.doe@example.com',
  // 添加更多自定义字段
});

处理Tawk.to事件（可选）：

你可以监听Tawk.to事件，如聊天窗口打开或关闭事件，以执行自定义操作。

Tawkto.onChatWidgetOpened.listen((_) {
  print('Chat widget opened');
  // 执行自定义操作
});

Tawkto.onChatWidgetClosed.listen((_) {
  print('Chat widget closed');
  // 执行自定义操作
});

在UI中显示Tawk.to小部件（可选）：

如果你希望在应用的特定部分显示Tawk.to小部件，可以使用TawktoWidget。

import 'package:flutter/material.dart';
import 'package:flutter_tawkto/flutter_tawkto.dart';

class ChatScreen extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Chat Screen'),
      ),
      body: Stack(
        children: [
          // 其他UI组件
          // ...
          // Tawk.to聊天小部件
          Positioned(
            bottom: 20,
            right: 20,
            child: TawktoWidget(),
          ),
        ],
      ),
    );
  }
}

请注意，TawktoWidget()通常不需要手动添加到UI中，因为调用Tawkto.showChatWidget()会自动显示聊天窗口。但是，如果你希望在应用的某个固定位置始终显示聊天图标，可以使用TawktoWidget()。

通过以上步骤，你应该能够在Flutter应用中成功集成并使用flutter_tawkto插件来实现即时通讯功能。确保替换YOUR_PROPERTY_ID为你的实际Tawk.to Property ID，并根据需要调整其他配置。