Flutter增强提示工具插件extended_tooltip的使用

Flutter增强提示工具插件extended_tooltip的使用

该插件扩展了Flutter中的Tooltip功能，允许传递一个Widget作为提示信息。这个插件通过Overlay来构建提示框。

默认情况下，Dart的Tooltip只接受字符串或TextSpan，但通过此插件，您可以扩展其功能，传递任意的Widget作为提示信息。

提示框的位置会根据当前组件的大小和位置进行计算。

使用方法

您可以前往/example文件夹查看更多的例子。

ExtendedToolTip(
  horizontalPosition: ExtendedTooltipPosition.left, // 设置提示框在水平方向上的位置
  message: Container( // 提示框的内容
    width: 200,
    height: 200,
    decoration: BoxDecoration(
      borderRadius: BorderRadius.circular(10),
      color: Colors.red,
    ),
    child: const Center(child: Text('My custom Message')), // 提示框中的文本
  ),
  child: Text(
    'ExtendToolTip Example', // 需要显示提示框的组件
    style: Theme.of(context).textTheme.headlineMedium,
  ),
)

ExtendedToolTip(
  message: IconButton(
    onPressed: () {
      setState(() {
        value++; // 点击图标后增加计数器
      });
    },
    icon: const Icon(Icons.add), // 图标按钮
  ),
  child: Text('tooltip interaction $value'), // 显示计数器的文本
),

测试平台

• Windows
• Web

需要测试其他平台。

完整示例Demo

以下是一个完整的示例，展示了如何在应用中使用ExtendedToolTip插件。

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

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

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

  [@override](/user/override)
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Extended ToolTip Example',
      theme: ThemeData(
        colorScheme: ColorScheme.fromSeed(seedColor: Colors.deepPurple),
        useMaterial3: true,
      ),
      home: const MyHomePage(title: 'Extended ToolTip Example'),
    );
  }
}

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 value = 0;

  [@override](/user/override)
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        backgroundColor: Theme.of(context).colorScheme.inversePrimary,
        title: Text(widget.title),
      ),
      body: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: [
            ExtendedToolTip(
              horizontalPosition: ExtendedTooltipPosition.left,
              message: Container(
                width: 200,
                height: 200,
                decoration: BoxDecoration(
                  borderRadius: BorderRadius.circular(10),
                  color: Colors.red,
                ),
                child: const Center(child: Text('My custom Message')),
              ),
              child: Text(
                'ExtendToolTip Example',
                style: Theme.of(context).textTheme.headlineMedium,
              ),
            ),
            const SizedBox(height: 30),
            const ExtendedToolTip(
              horizontalPosition: ExtendedTooltipPosition.right,
              message: CircleAvatar(
                radius: 30,
                child: Icon(Icons.person),
              ),
              child: Icon(Icons.person),
            ),
            const SizedBox(height: 30),
            Row(
              mainAxisAlignment: MainAxisAlignment.center,
              children: [
                ExtendedToolTip(
                  message: IconButton(
                    onPressed: () {
                      setState(() {
                        value++;
                      });
                    },
                    icon: const Icon(Icons.add),
                  ),
                  child: Text('tooltip interaction $value'),
                ),
              ],
            )
          ],
        ),
      ),
    );
  }
}