Flutter即时通讯插件flutter_tawk_widget的使用

Flutter即时通讯插件flutter_tawk_widget的使用

pub package

Tawk 小部件用于 Flutter。

展示

安装

要使用此软件包，在您的 pubspec.yaml 文件中添加 flutter_tawk 作为依赖项。

dependencies:
  flutter_tawk: ^x.y.z

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

导入

在 Dart 文件中导入 flutter_tawk 包：

import 'package:flutter_tawk/flutter_tawk.dart';

如何使用

使用 Tawk 小部件来集成 Tawk 的聊天功能。以下是一个简单的示例：

Tawk(
  directChatLink: 'YOUR_DIRECT_CHAT_LINK', // 替换为您的 Tawk 直接聊天链接
  visitor: TawkVisitor(
    name: 'Ayoub AMINE', // 访客姓名
    email: 'ayoubamine2a@gmail.com', // 访客邮箱
  ),
)

完整的示例代码可以在 example 目录下找到。

自定义

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 安全模式 否

示例代码

以下是 main.dart 文件中的完整示例代码：

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](/user/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...'), // 加载时显示的文本
          ),
        ),
      ),
    );
  }
}

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

1 回复

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


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

步骤 1: 添加依赖

首先，在你的pubspec.yaml文件中添加flutter_tawk_widget的依赖：

dependencies:
  flutter:
    sdk: flutter
  flutter_tawk_widget: ^latest_version  # 替换为最新版本号

然后运行flutter pub get来安装依赖。

步骤 2: 配置Tawk.to

在Tawk.to官网创建一个账户并创建一个新的聊天小部件，获取你的propertyId。

步骤 3: 使用flutter_tawk_widget

在你的Flutter项目中，你可以按照以下方式使用flutter_tawk_widget：

main.dart

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

void main() {
  // 初始化Tawk.to配置
  TawkWidget.initialize(
    propertyId: 'your_property_id_here',  // 替换为你的propertyId
    isVisitorChatEnabled: true,
    isAgentChatEnabled: true,
    widgetPosition: TawkWidgetPosition.bottomRight,  // 可以选择其他位置，如 bottomLeft, topRight, topLeft
    widgetVisibility: TawkWidgetVisibility.alwaysVisible,  // 可以选择 onNewMessage, alwaysVisible, hidden
  );

  runApp(MyApp());
}

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    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: Text('Check the bottom right corner for Tawk.to chat widget!'),
      ),
    );
  }
}

步骤 4: 运行应用

确保你已经正确配置了Tawk.to的属性ID，然后运行你的Flutter应用。你应该会在屏幕右下角看到一个Tawk.to的聊天小部件。

注意事项

  • 确保你的Tawk.to账户和聊天小部件配置正确。
  • 如果需要更多的自定义设置，可以参考flutter_tawk_widget的官方文档。
  • flutter_tawk_widget可能会随着版本更新而有所变化，请参考最新的官方文档和示例代码。

这个示例展示了如何基本集成Tawk.to的聊天小部件到你的Flutter应用中。你可以根据需要进一步自定义和扩展功能。

回到顶部