[Flutter Web] The widgets for which the hint is displayed are not highlighted

[norutplz]

Describe the bug
In the web version, the widget for which the hint is displayed is not highlighted. The release was made through the "flutter build web" command.
Works fine in Android and iOS, version on package: 2.0.3

To Reproduce
Steps to reproduce the behavior:

1. flutter build web
2. Open app in browser
3. See error

Expected behavior
The widget highlighted in red in the screenshot is highlighted

Desktop (please complete the following information):

• Browser [chrome]

[norutplz]

I noticed that in the "Inspect Element" mode, the widget is highlighted

[jaiminrana05]

Hi @HornyPony, can you please provide more information about the issue you're facing? Additionally, kindly share the code snippets as I'm unable to reproduce the problem.

[norutplz]

Hi @HornyPony, can you please provide more information about the issue you're facing? Additionally, kindly share the code snippets as I'm unable to reproduce the problem.

There is nothing special in the code - everything is according to the instructions from pub.dev. Hints are shown in the mobile version of the app, but do not work in the web version. But sometimes they are shown, but it happens that the wrong area is highlighted. Maybe I need to add something to the "flutter build web" command?

[norutplz]

Hi @HornyPony, can you please provide more information about the issue you're facing? Additionally, kindly share the code snippets as I'm unable to reproduce the problem.

I found a reason but i still need ur help. It turned out that the problem is as follows: the hint is highlighted, but it is incorrectly positioned, because in the web version the application does not occupy the entire screen, but a certain part of it. However, the hint is highlighted based on the size of the user's entire screen.
The arrow highlights the shifted hint, the red rectangle - where it should be, and the green one - the area of displacement relative to the entire screen

The screen size is defined here:

class _ApplicationState extends State<Application> {
  final AppRouter _appRouter = AppRouter();
  bool isExpandedApp = false;


  @override
  Widget build(BuildContext context) {
    final double windowHeight = MediaQuery.of(context).size.height;
    final double windowWidth = MediaQuery.of(context).size.width;

    return Directionality(
      textDirection: TextDirection.ltr,
      child: Stack(
        children: [
          Container(
            alignment: Alignment.center,
            decoration: const BoxDecoration(
              image: DecorationImage(
                image: AssetImage(AppImages.webBackground),
                fit: BoxFit.cover,
              ),
            ),
            child: MediaQuery(
              data: MediaQueryData(
                size: Size(isExpandedApp ? windowWidth / 1.2 : windowHeight / 2,
                    windowHeight),
              ),
              child: ScreenUtilInit(
                  minTextAdapt: true,
                  useInheritedMediaQuery: true,
                  designSize: const Size(
                    360,
                    640,
                  ),
                  builder: (context, _) {
                    return Center(
                      child: MaterialApp.router(
                        localizationsDelegates: const [
                          S.delegate,
                          GlobalMaterialLocalizations.delegate,
                          GlobalWidgetsLocalizations.delegate,
                          GlobalCupertinoLocalizations.delegate,
                        ],
                        debugShowCheckedModeBanner: false,
                        supportedLocales: S.delegate.supportedLocales,
                        title: 'RANKS.app',
                        theme: AppTheme.lightTheme(),
                        routerConfig: _appRouter.config(),
                      ),
                    );
                  }),
            ),
          ),
          Align(
            alignment: Alignment.centerRight,
            child: Container(
              decoration: BoxDecoration(
                  color: Colors.white,

                  borderRadius: BorderRadius.circular(12)
              ),
              child: Container(
                margin: const EdgeInsets.all(8),
                decoration: BoxDecoration(
                    color: AppTheme.changeDisplayingScreenersBtnBackground,
                    borderRadius: BorderRadius.circular(6)
                ),
                child: Column(
                  mainAxisSize: MainAxisSize.min,
                  children: [

                    _ChangeResolutionBtn(
                      icon: AppIcons.webCollapsed,
                      onPressed: () {
                        if (isExpandedApp) {
                          setState(() {
                            isExpandedApp = false;
                          });
                        }
                      },
                      isSelected: !isExpandedApp,
                    ),
                    _ChangeResolutionBtn(
                      icon: AppIcons.webExpanded,
                      onPressed: () {
                        if (!isExpandedApp) {
                          setState(() {
                            isExpandedApp = true;
                          });
                        }
                      },
                      isSelected: isExpandedApp,
                    ),
                  ],
                ),
              ),
            ),
          ),
        ],
      ),
    );
  }
}

ShowcaseWidget here: Home Widget is the creen that contains all tabs

@RoutePage()
class HomeScreen extends StatelessWidget {
  const HomeScreen({Key? key}) : super(key: key);


  @override
  Widget build(BuildContext context) {
   
    return MediaQuery(
      data: MediaQuery.of(context).copyWith(
          textScaleFactor:
              MediaQuery.of(context).textScaleFactor.clamp(1.0, 1.2)),
      child ShowCaseWidget(
        enableAutoScroll: true,
        builder: Builder(
          builder: (context) {
            return AutoTabsScaffold(
              routes: [
                const ScreenerRoute(),
                const FavouriteRoute(),
                ForumRoute(),
                const ProfileRoute(),
              ],
              resizeToAvoidBottomInset: noResizeToAvoidBottomInset,
              bottomNavigationBuilder: !hideBottomNavConfigInRouter
                  ? (_, tabsRouter) {
                      return Theme(
                        data: AppTheme.lightTheme().copyWith(
                          splashColor: Colors.transparent,
                          highlightColor: Colors.transparent,
                        ),
                        child: BottomNavigationBar(
                         
                      );
                    }
                  : null,
            );
          },
        ),
      ),
    );
  }

[norutplz]

The problem is most clearly seen here

[norutplz]

@jaiminrana05 Here I manually brought the screen with the application to the left edge of the monitor. For some reason, for highlighting, the size is calculated first of the monitor, and not from the beginning of the screen with the application

[norutplz]

@jaiminrana05 The same problem is here: #383

Can I get any information please?

[jaiminrana05]

Thank you @HornyPony, for sharing the code snippets. It's really helpful for us to have them as we work on resolving this issue.

[aditya-css]

Thank you @HornyPony for providing all the details and your cooperation. This issue looks like duplicate of #383 and a PR (#394 ) is currently open that would potentially fix this.