Wrong size/positions in Flutter Web when not "full-screen"

[aw31n]

Describe the bug
In Flutter Web, when the app is not exactly the same size as the browser window, ToolTips/Descriptions have wrong positions and size and might even move out of the visible area.

To Reproduce
Wrap the MaterialApp in some padding and/or center it with a fixed size.

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

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

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

  // This widget is the root of your application.
  @override
  Widget build(BuildContext context) {
    return Center(
      child: Container(
        width: 600,
        padding: const EdgeInsets.all(20),
        child: const MaterialApp(
          title: 'Showcase Web Problems',
          home: MyHomePage(title: 'Showcase Problems on Web'),
        ),
      ),
    );
  }
}

class MyHomePage extends StatefulWidget {
  const MyHomePage({super.key, required this.title});
  final String title;

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

class _MyHomePageState extends State<MyHomePage> {
  final key1 = GlobalKey();
  final key2 = GlobalKey();
  final key3 = GlobalKey();

  @override
  Widget build(BuildContext context) {
    return ShowCaseWidget(
      builder: Builder(
        builder: (ctx) => Scaffold(
          appBar: AppBar(
            title: Text(widget.title),
          ),
          body: Center(
            child: Column(
              mainAxisAlignment: MainAxisAlignment.center,
              children: <Widget>[
                Showcase(
                  key: key1,
                  description: "Showcase Item 1",
                  child: const Text("Item 1"),
                ),
                Showcase(
                  key: key2,
                  description: "Showcase Item 2",
                  child: const Text("Item 2"),
                ),
                Showcase(
                  key: key3,
                  description: "Showcase Item 3",
                  child: const Text("Item 3"),
                ),
              ],
            ),
          ),
          floatingActionButton: FloatingActionButton(
            onPressed: () {
              ShowCaseWidget.of(ctx).startShowCase([key1, key2, key3]);
            },
            tooltip: 'Let the showcase begin',
            child: const Icon(Icons.question_mark),
          ),
        ),
      ),
    );
  }
}

Expected behavior
Everything should work as you would expect, i.e. with right positions and sizes.

Screenshots

Additional context
For positioning, the offset of the MaterialApp has to be subtracted
For sizing, MediaQuery.of(context).size should be replaced with the size of the MaterialApp

I will create a PR for a possible fix, though I ask for your mercy since it will be my first.

[aw31n]

PR is out: #309

[rmahmadkhan]

@aw31n any update on the PR that by when it will be merged and go for release?

I'm having the position issue on web even on full screen. But this happens only for the first item. It even goes to the exact position of item while moving to the 2nd item.

Please check video:

Screen.Recording.2022-11-29.at.10.20.46.AM.mov

[aw31n]

Haven't heard anything yet, so I'm using my modified version locally as it does its job.

I'm not sure if it will fix your problem, since you are full-screen already and there's no offset to fix. But if you want to try it out, change your entry in pubspec.yaml temporarily:

showcaseview:
    git:
      url: https://github.com/aw31n/flutter_showcaseview.git
      ref: fix-for-position-and-size-on-web 

[rmahmadkhan]

@aw31n thank you for quick reply and you are right. It did not resolve my issue. I think I'll have to look deeper

[vatsaltanna]

Hi @aw31n @rmahmadkhan , We are starting to investigate this issue with the snippets provided and we will share the updates here.

[rmahmadkhan]

@vatsaltanna the position issue is mostly coming but sometimes it does not. idk what's the reason behind it

Check this video:

Screen.Recording.2022-11-29.at.5.38.56.PM.mov

[ujas-m-simformsolutions]

Hey @aw31n, we investigated your issue and we have found a solution that you can put container and center widget above the MyHomePage and the tool-tip will work as expected. The fixed size is required just one level above the ShowCaseWidget.

Here, when you set fixed width for your material app it will limit its width but tool-tip is shown based on screen width and height. That's why tool-tip isn't shown correctly. If your requirement is to have fixed width for all screen then create a custom widget with fixed width and have your other widgets decedent to it.

We have also reviewed your PR and you are directly getting size of the MaterialApp which will not work for anyone who is using CupertinoApp or WidgetApp.

[ujas-m-simformsolutions]

I'm going to close this issue for now. Feel free to create a new issue.