Doesn't work in conjunction with Responsive library

[MenaRaafat]

Using Responsive Framework alongside device_preview library produces a distorted UI.

void main() {
  // runApp(DevicePreview(
  //     enabled: true, //!kReleaseMode,
  //     plugins: [
  //       const ScreenshotPlugin(),
  //       const FileExplorerPlugin(),
  //       const SharedPreferencesExplorerPlugin(),
  //     ],
  //     builder: (context) => MyApp()));

  runApp(MyApp());
}

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Sizer(
      builder: (context, orientation, deviceType) {
        return MaterialApp(
          debugShowCheckedModeBanner: false,
          title: "MyAppTitle",
          color: Colors.yellow,
          home: Home(),
          builder: (context, widget) => ResponsiveWrapper.builder(
            BouncingScrollWrapper.builder(context, widget!),
            maxWidth: 2060,
            minWidth: 450,
            defaultScale: true,
            breakpoints: [
              ResponsiveBreakpoint.resize(450, name: MOBILE),
              ResponsiveBreakpoint.autoScale(800, name: TABLET),
              ResponsiveBreakpoint.autoScale(1000, name: TABLET),
            //  ResponsiveBreakpoint.resize(1200, name: DESKTOP),
            //  ResponsiveBreakpoint.autoScale(2460, name: "4K"),
            ],
          ),
        );
      },
    );
  }
}

https://user-images.githubusercontent.com/42410083/127766747-0d69b441-dba9-4d6e-a672-079e6a3cdaba.png https://user-images.githubusercontent.com/42410083/127766771-f642a318-9e04-4533-b2ff-e4e45fa4d769.png

[Vinzent03]

You are missing the DevicePreview.appBuilder() aren't you? Put it above the ResponsiveWrapper.builder. https://github.com/aloisdeniel/flutter_device_preview#add-devicepreview

[fredgrott]

You need to set it up so that you have nested builders per SO answer to this question

https://stackoverflow.com/questions/63287100/how-to-implement-both-device-preview-and-responsive-framework-packages-in-flutte

[fredgrott]

have confirm that trick wkrs as provide a child parameter in builder and set child to the responsive stuff as then it will build responsive as the parent wrapping the child just following the so answer. So we can close this as long as we add a note to the docs.

[shrijanRegmi]

@fredgrott Does not work when using iPhone SE model or iPad model