Showcase.withWidget: Incorrect Tooltip Positioning

[himanshu-newstok]

Describe the bug When using Showcase.withWidget, the positioning of the tooltip is incorrect.

To Reproduce Steps to reproduce the behavior:

1. Add the minimal code

class MyHomePage extends StatefulWidget {
  const MyHomePage({super.key});

  @override
  State<MyHomePage> createState() => _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> {
  GlobalKey<State<StatefulWidget>> keyBtn = GlobalKey();
  late BuildContext ctx;
  bool setContext = true;

  @override
  void initState() {
    super.initState();
    WidgetsBinding.instance.addPostFrameCallback(
      (_) => ShowCaseWidget.of(ctx).startShowCase([
        keyBtn,
      ]),
    );
  }

  Widget customToolTip(
      {required GlobalKey<State<StatefulWidget>> key,
      required String title,
      required Widget child}) {
    return Showcase.withWidget(
        key: key,
        height: 300,
        width: 200,
        container: Text(
          title,
          style: const TextStyle(color: Colors.white),
        ),
        child: child);
  }

  @override
  Widget build(BuildContext cx) {
    return ShowCaseWidget(
      builder: Builder(
        builder: (context) {
          if (setContext) {
            setContext = false;
            ctx = context;
          }
          return Scaffold(
            body: SizedBox(
              width: double.infinity,
              child: Column(
                mainAxisAlignment: MainAxisAlignment.center,
                children: [
                  customToolTip(
                    key: keyBtn,
                    title: 'click here',
                    child: Container(
                        color: Colors.orange, child: const Text('Language')),
                  ),
                ],
              ),
            ),
          );
        },
      ),
    );
  }
}

2. Run the code.

Expected behavior The tooltip needs to be centered, similar to how it appears when using Showcase, but it is not currently positioned correctly.

Screenshots When using ShowCase.withWidget:

When using ShowCase:

Desktop (please complete the following information):

• OS: Windows
• Browser chrome
• Version 11

Smartphone (please complete the following information):

• Device: Redmi Note 9
• OS: Android
• Browser chrome
• Version 11

Additional context The position of the tooltip varies depending on the width in Showcase.withWidget, and even when setting the width to 0, it remains improperly positioned. Given this behavior, I aim to avoid relying on static sizing for positioning to ensure responsiveness.

[Linkadi98]

line 509 in tooltip_widget.dart, the Positioned widget is missing the right property which causes the container (your custom tooltip widget) will be placed at top left. I don't know why the author did this but you need to add value for the right property, just like this:

Positioned( left: _getSpace(), top: contentY - (10 * contentOffsetMultiplier), right: _getSpace(), Your custom tooltip will be placed center.

[rashi-simform]

Hello @Linkadi98 , size provided by you to the Showcase.withWidget, inside your customToolTip Widget, is bigger than the actual size of the tooltip. To solve this issue you can follow either of the two ways:

1. You can use key to get proper values of height and width and use those values.
2. If you want to use any static size then give same size to the text widget as well and you can align the text widget, refer the below code to understand more:

 Widget customToolTip(
      {required GlobalKey<State<StatefulWidget>> key,
      required String title,
      required Widget child}) {
    return Showcase.withWidget(
      key: key,
      height: 300,
      width: 200,
      container: SizedBox(
        width: 200,
        child: Align(
          child: Text(
            title,
            style: const TextStyle(
              color: Colors.white,
            ),
          ),
        ),
      ),
      child: child,
    );
  } 

Please let me know if you need any further help with this.