WebView is not clickable when ResponsiveScaledBox is in place

[gidrokolbaska]

Hello, as the title states, when we are utilizing the ResponsiveScaledBox widget, the WebView is kind of misplaced which causes the inability to click anywhere properly on that webview on specific device sizes. What could be the cause?

Here is a video demonstration:

2024-04-08.12.13.21.mov

Here is my ResponsiveScaledBox setup:

[mscaster]

I am also experiencing the same issue; the touch area is misaligned. I initially thought it was a problem with version 0.2.0, but it also occurs in the latest version.

Gravacao.de.Tela.2024-04-13.as.11.46.50.mov

[williamrech]

I have the exact same issue. Any solutions available?

[willianferreiradev]

Any solution for this?

[MostafaSolimanMO]

If we can disable the ResponsiveScaledBox for the widget that contains the WebView it will fix it (At least for now)
Any idea how we can do it?

[williamrech]

If we can disable the ResponsiveScaledBox for the widget that contains the WebView it will fix it (At least for now) Any idea how we can do it?

I attempted two approaches without success:

1 - Wrapping a custom "Responsive" widget route by route

'/home': (context) => Responsive(child: const HomePage()),

This approach does not work because Dialogs cannot be accommodated, and if attempted, they expand to fill the entire screen. Additionally, it involves a lot of work with no guarantee that I won't forget something.

2 - Reversing the scale factor:

Transform.scale( scale: 450 / ResponsiveBreakpoints.of(context).screenWidth, child: WebViewWidget(controller: webController), ),

With this method, the taps are positioned correctly, but the website content extends beyond the screen boundaries. This approach is worth trying if the website itself is not heavily dependent on its width. Furthermore, in my scenario, I have only one breakpoint at 450, and I am unsure how to dynamically reverse the scale based on different screen widths.

[gabrielhn]

Same problem here!

[MostafaSolimanMO]

If we can disable the ResponsiveScaledBox for the widget that contains the WebView it will fix it (At least for now) Any idea how we can do it?

I attempted two approaches without success:

1 - Wrapping a custom "Responsive" widget route by route

'/home': (context) => Responsive(child: const HomePage()),

This approach does not work because Dialogs cannot be accommodated, and if attempted, they expand to fill the entire screen. Additionally, it involves a lot of work with no guarantee that I won't forget something.

2 - Reversing the scale factor:

Transform.scale( scale: 450 / ResponsiveBreakpoints.of(context).screenWidth, child: WebViewWidget(controller: webController), ),

With this method, the taps are positioned correctly, but the website content extends beyond the screen boundaries. This approach is worth trying if the website itself is not heavily dependent on its width. Furthermore, in my scenario, I have only one breakpoint at 450, and I am unsure how to dynamically reverse the scale based on different screen widths.

I tried wrapping the WebView widget with ResponsiveScaledBox -> SizedBox and the WebView started to work fine and It works with dialogs too, I am still testing it with different screen sizes and understanding why this works

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        backgroundColor: Colors.blue,
        title: const Text("Title"),
      ),
      body: SizedBox(
        height: ResponsiveBreakpoints.of(context).screenHeight,
        child: ResponsiveScaledBox(
          width: ResponsiveBreakpoints.of(context).screenWidth,
          child: WebViewWidget(
            controller: _controller,
          ),
        ),
      ),
    );
  }

[rayliverified]

Hi everyone, I'm catching up on the conversation.

I recommend using a ConditionalRouteWidget and selectively applying ResponsiveScaledBox for advanced usecases.

https://github.com/Codelessly/FlutterMinimalWebsite/blob/3561ed389fe3d283aa359ffb88b76ca68315c506/lib/main_advanced.dart

There are some screens where you don't want to scale. ResponsiveFramework v1 was rewritten to separate scaling and breakpoints. Now you can use them separate and control behavior per screen for greater flexibility.

[gidrokolbaska]

Hi everyone, I'm catching up on the conversation.

I recommend using a ConditionalRouteWidget and selectively applying ResponsiveScaledBox for advanced usecases.

https://github.com/Codelessly/FlutterMinimalWebsite/blob/3561ed389fe3d283aa359ffb88b76ca68315c506/lib/main_advanced.dart

There are some screens where you don't want to scale. ResponsiveFramework v1 was rewritten to separate scaling and breakpoints. Now you can use them separate and control behavior per screen for greater flexibility.

it won't work in a scenario where you have a bottom navigation bar with x amount of tabs and one of the tab is a webview. You either wrap the whole screen which contains tabs and bottom navigation bar with ResponsiveScaledBox or don't wrap it at all. If you try to wrap only the tabs, they layout will break obviously.

[williamrech]

If we can disable the ResponsiveScaledBox for the widget that contains the WebView it will fix it (At least for now) Any idea how we can do it?

I attempted two approaches without success:
1 - Wrapping a custom "Responsive" widget route by route
'/home': (context) => Responsive(child: const HomePage()),
This approach does not work because Dialogs cannot be accommodated, and if attempted, they expand to fill the entire screen. Additionally, it involves a lot of work with no guarantee that I won't forget something.
2 - Reversing the scale factor:
Transform.scale( scale: 450 / ResponsiveBreakpoints.of(context).screenWidth, child: WebViewWidget(controller: webController), ),
With this method, the taps are positioned correctly, but the website content extends beyond the screen boundaries. This approach is worth trying if the website itself is not heavily dependent on its width. Furthermore, in my scenario, I have only one breakpoint at 450, and I am unsure how to dynamically reverse the scale based on different screen widths.

I tried wrapping the WebView widget with ResponsiveScaledBox -> SizedBox and the WebView started to work fine and It works with dialogs too, I am still testing it with different screen sizes and understanding why this works

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        backgroundColor: Colors.blue,
        title: const Text("Title"),
      ),
      body: SizedBox(
        height: ResponsiveBreakpoints.of(context).screenHeight,
        child: ResponsiveScaledBox(
          width: ResponsiveBreakpoints.of(context).screenWidth,
          child: WebViewWidget(
            controller: _controller,
          ),
        ),
      ),
    );
  }

This approach seems to work perfectly. It would be nice to hear if you tested further as you said you would @MostafaSolimanMO. In any case, thank you.