Flutter自定义提示工具插件super_tooltip的使用

super_tooltip 是一个非常灵活的Flutter插件，允许你在屏幕的覆盖层中显示工具提示（Tooltips）。它比Flutter标准的 Tooltip 提供了更多的灵活性。你可以选择让整个屏幕被背景色覆盖，点击背景即可关闭工具提示。

安装

要安装 super_tooltip 插件，请运行以下命令：

flutter pub add super_tooltip

这将在你的 pubspec.yaml 文件中添加一行依赖项，并自动执行 flutter pub get：

dependencies:
  super_tooltip: latest

然后在你的Dart代码中导入：

import 'package:super_tooltip/super_tooltip.dart';

使用方法

创建控制器

首先，你需要创建一个 SuperTooltipController 来管理工具提示的状态：

final _controller = SuperTooltipController();

构建工具提示

接下来，将 SuperTooltip 包装在一个可以响应用户交互的 widget 中，例如 GestureDetector、MouseRegion 或 InkWell。这些 widget 负责显示和隐藏工具提示的内容。以下是完整的示例代码：

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

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

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

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Super Tooltip Demo',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: const ExamplePage(),
    );
  }
}

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

  @override
  State createState() => _ExamplePageState();
}

class _ExamplePageState extends State<ExamplePage> {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      backgroundColor: Colors.white,
      body: Center(
        child: TargetWidget(),
      ),
    );
  }
}

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

  @override
  State createState() => _TargetWidgetState();
}

class _TargetWidgetState extends State<TargetWidget> {
  final _controller = SuperTooltipController();

  Future<bool> _willPopCallback() async {
    if (_controller.isVisible) {
      await _controller.hideTooltip();
      return false;
    }
    return true;
  }

  @override
  Widget build(BuildContext context) {
    return WillPopScope(
      onWillPop: _willPopCallback,
      child: GestureDetector(
        onTap: () async {
          await _controller.showTooltip();
        },
        child: SuperTooltip(
          controller: _controller,
          popupDirection: TooltipDirection.down,
          backgroundColor: Color(0xff2f2d2f),
          showCloseButton: true,
          left: 30,
          right: 30,
          bottom: 200,
          arrowTipDistance: 20.0,
          minimumOutsideMargin: 120,
          arrowBaseWidth: 20.0,
          arrowLength: 20.0,
          borderWidth: 2.0,
          constraints: const BoxConstraints(
            minHeight: 0.0,
            maxHeight: 100,
            minWidth: 0.0,
            maxWidth: 100,
          ),
          touchThroughAreaShape: ClipAreaShape.rectangle,
          touchThroughAreaCornerRadius: 30,
          barrierColor: Color.fromARGB(26, 47, 45, 47),
          content: const Text(
            "Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum.",
            softWrap: true,
            textAlign: TextAlign.center,
            style: TextStyle(
              color: Colors.white,
            ),
          ),
          child: Container(
            width: 40.0,
            height: 40.0,
            decoration: const BoxDecoration(
              shape: BoxShape.circle,
              color: Colors.blue,
            ),
            child: Icon(
              Icons.add,
              color: Colors.white,
            ),
          ),
        ),
      ),
    );
  }
}

自定义属性

• showBarrier: 设置为 true 可以防止用户通过点击遮罩区域来关闭工具提示。
• barrierColor: 设置遮罩的颜色。
• backgroundColor: 设置工具提示的背景颜色。
• popupDirection: 设置工具提示弹出的方向（如：上、下、左、右）。
• decorationBuilder: 自定义工具提示的形状或装饰。
• sigmaX 和 sigmaY: 启用模糊效果时设置模糊程度。
• onShow 和 onHide: 工具提示显示和隐藏时触发的回调函数。

通过这些属性，你可以完全定制工具提示的外观和行为，使其更好地适应你的应用需求。