WebView is not clickable when ResponsiveScaledBox is in place

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:

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

I have the exact same issue. Any solutions available?

Any solution for this?

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?

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.

Same problem here!

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,
          ),
        ),
      ),
    );
  }

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.

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.

@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,
          ),
        ),
      ),
    );
  }

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.

Navigation Menu

Repository navigation

WebView is not clickable when ResponsiveScaledBox is in place #175

Metadata

Assignees

Labels

Type

Projects

Milestone

Relationships

Development

WebView is not clickable when ResponsiveScaledBox is in place #175

Description

Activity

mscaster commented on Apr 13, 2024

williamrech commented on May 12, 2024

willianferreiradev commented on May 13, 2024

MostafaSolimanMO commented on May 13, 2024

williamrech commented on May 13, 2024

gabrielhn commented on May 13, 2024

MostafaSolimanMO commented on May 13, 2024

rayliverified commented on May 14, 2024

gidrokolbaska commented on May 15, 2024

williamrech commented on May 26, 2024

Metadata

Metadata

Assignees

Labels

Type

Projects

Milestone

Relationships

Development

Issue actions