Flutter即时通讯插件flutter_tawk_to_chat的使用

flutter_tawk_to_chat

此插件是 flutter_tawk 插件的一个分支。

这是用于 Flutter 的 Tawk.to 小部件。

展示

安装

要在项目中使用此插件，请在 pubspec.yaml 文件中添加 flutter_tawk_to_chat 作为依赖项。

dependencies:
  flutter_tawk_to_chat: ^版本号

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

导入

在 Dart 文件中导入插件：

import 'package:flutter_tawk_to_chat/flutter_tawk_to_chat.dart';

如何使用

以下是一个基本示例，展示了如何将 Tawk 小部件添加到应用中：

Tawk(
  directChatLink: 'YOUR_DIRECT_CHAT_LINK',
  visitor: TawkVisitor(
    name: 'Username',
    email: 'example@gmail.com',
  ),
)

你可以查看 example 目录以获取完整的示例应用。

自定义

Tawk

TawkVisitor

TawkController

完整示例

以下是完整的示例代码，展示了如何在 Flutter 应用中使用 flutter_tawk_to_chat 插件。

import 'dart:developer';
import 'package:flutter/material.dart';
import 'package:flutter_tawk_to_chat/flutter_tawk_to_chat.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 const MaterialApp(
      home: MyHomePage(),
    );
  }
}

class MyHomePage extends StatefulWidget {
  const MyHomePage({Key? key}) : super(key: key);

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

class _MyHomePageState extends State<MyHomePage> {
  TawkController? _controller;
  final _messangerKey = GlobalKey<ScaffoldMessengerState>();

  [@override](/user/override)
  Widget build(BuildContext context) {
    return ScaffoldMessenger(
      key: _messangerKey,
      child: Scaffold(
        appBar: AppBar(
          title: const Text('Flutter Tawk.to'),
          elevation: 0,
          actions: [
            OutlinedButton(
              onPressed: _controller == null
                  ? null
                  : () async {
                      if (await _controller!.isChatOngoing()) {
                        bool? confirm = await showAlert();
                        if (confirm == true) {
                          _controller!.endChat();
                        }
                      } else {
                        _messangerKey.currentState!.showSnackBar(const SnackBar(
                          content: Text('No ongoing chat'),
                          behavior: SnackBarBehavior.floating,
                        ));
                      }
                    },
              child: const Text('End Chat'),
            )
          ],
        ),
        body: Tawk(
          directChatLink:
              'https://tawk.to/chat/615847b0d326717cb68462c7', // 替换为你的直接聊天链接
          visitor: TawkVisitor(
            name: 'Username',
            email: 'example@gmail.com',
          ),
          onLoad: () {
            log('Hello Tawk!', name: 'TawkTo');
          },
          onLinkTap: (String url) {
            log(url, name: 'Tap url');
          },
          placeholder: const Center(
            child: Text('Loading...'),
          ),
          onControllerChanged: (value) {
            setState(() {
              _controller = value;
            });
          },
        ),
      ),
    );
  }

  Future<bool?> showAlert() async {
    return await showDialog<bool>(
        context: context,
        builder: (BuildContext context) {
          return AlertDialog(
            title: const Text('End Chat'),
            content: const Text('Are you sure you want to end the chat?'),
            actions: <Widget>[
              TextButton(
                onPressed: () {
                  Navigator.of(context).pop(false);
                },
                child: const Text('Cancel'),
              ),
              TextButton(
                onPressed: () {
                  Navigator.of(context).pop(true);
                },
                child: const Text('End Chat'),
              ),
            ],
          );
        });
  }
}