Disable responsive wrapper for a page

[JTPenn-EG]

I have a web app, I have a page that I don't want it to apply the responsive wrapper frame (the red part in the pic). Why would I want that ? for decoration purposes in which I need to reach the edge of the screen. The red background is the background parameter in ResponsiveWrapper.builder

[bounty1342]

Remove constraints/size on width. Use a container with an unbounded width for exemple.

[tk2232]

I have the same question. Is it possible to remove the wrapper for a specifig widget? When I use flutter_map https://pub.dev/packages/flutter_map the touch event gives the wrong position

For now I rescale the map. But it would be nice if you could exclude individual widgets

  double _rescale(BuildContext context) {
    try {
      return ResponsiveWrapper.of(context).scaledWidth /
          ResponsiveWrapper.of(context).screenWidth;
    } catch (_) {
      ///ResponsiveWrapper not initialized in main.dart
      return 1;
    }
  }

...
Transform.scale(
   scale: _rescale(context),
   child: FlutterMap(...

[mohammedX6]

@tk2232 thanks for your approach, can you share your defined breakpoints?

[tk2232]

@mohammedX6 of course.

          return OnBuilder(
            listenTo: connectivityRM,
            builder: () => ResponsiveWrapper.builder(
              BouncingScrollWrapper.builder(context, widget!),
              maxWidth: 1200,
              minWidth: 480,
              defaultScale: true,
              breakpoints: [
                const ResponsiveBreakpoint.resize(480, name: MOBILE),
                const ResponsiveBreakpoint.autoScale(800, name: TABLET),
                const ResponsiveBreakpoint.resize(1000, name: DESKTOP),
                const ResponsiveBreakpoint.autoScale(2460, name: '4K'),
              ],
              background: Container(
                color: const Color(0xFFF5F5F5),
              ),
            ),
          );

[ch-muhammad-adil]

I have the same question. Is it possible to remove the wrapper for a specifig widget? When I use flutter_map https://pub.dev/packages/flutter_map the touch event gives the wrong position

For now I rescale the map. But it would be nice if you could exclude individual widgets

  double _rescale(BuildContext context) {
    try {
      return ResponsiveWrapper.of(context).scaledWidth /
          ResponsiveWrapper.of(context).screenWidth;
    } catch (_) {
      ///ResponsiveWrapper not initialized in main.dart
      return 1;
    }
  }

...
Transform.scale(
   scale: _rescale(context),
   child: FlutterMap(...

This solution has worked nicely for me at small screens but at large screens it was another problem. The FlutterMap was looking smaller and created extra white space at all sides.

[mohammedX6]

I have the same question. Is it possible to remove the wrapper for a specifig widget? When I use flutter_map https://pub.dev/packages/flutter_map the touch event gives the wrong position For now I rescale the map. But it would be nice if you could exclude individual widgets

  double _rescale(BuildContext context) {
    try {
      return ResponsiveWrapper.of(context).scaledWidth /
          ResponsiveWrapper.of(context).screenWidth;
    } catch (_) {
      ///ResponsiveWrapper not initialized in main.dart
      return 1;
    }
  }

...
Transform.scale(
   scale: _rescale(context),
   child: FlutterMap(...

This solution has worked nicely for me at small screens but at large screens it was another problem. The FlutterMap was looking smaller and created extra white space at all sides.

I ended up using the ScreenUtil package, Working perfectly for me.

[ch-muhammad-adil]

I then came up with another great solution to get accurate position.

FlutterMap Controller has a method pointToLatLng I used that method to convert point where user tapped to latlng.

Here is my solution

Inside onTap method of FlutterMap MapOptions we get LatLng and TapPosition

I used TapPosition object

             var rescalingFactor =
                            (ResponsiveWrapper.of(context).scaledHeight /
                                ResponsiveWrapper.of(context).screenHeight);
                                

Use this rescalingFactor to create accurate LatLng

             var ltlng = mapController.pointToLatLng(CustomPoint(
                            tapPosition.relative!.dx * rescalingFactor,
                            tapPosition.relative!.dy * rescalingFactor));                        
                            
                            
                            
                            

Now this will land your pin at right position.

[ch-muhammad-adil]

I have the same question. Is it possible to remove the wrapper for a specifig widget? When I use flutter_map https://pub.dev/packages/flutter_map the touch event gives the wrong position For now I rescale the map. But it would be nice if you could exclude individual widgets

  double _rescale(BuildContext context) {
    try {
      return ResponsiveWrapper.of(context).scaledWidth /
          ResponsiveWrapper.of(context).screenWidth;
    } catch (_) {
      ///ResponsiveWrapper not initialized in main.dart
      return 1;
    }
  }

...
Transform.scale(
   scale: _rescale(context),
   child: FlutterMap(...

This solution has worked nicely for me at small screens but at large screens it was another problem. The FlutterMap was looking smaller and created extra white space at all sides.

I ended up using the ScreenUtil package, Working perfectly for me.

ScreenUtils are not adaptive as such ResponsiveFramework is really amazing solution for multiple screens support. Please checkout my solution it will solve wrong positioning problems of markers.