Codelessly
Regarding Migration from 0.2.0 to 1.x
I am currently using 0.2.0 version with sample code of return ResponsiveWrapper.builder(child, defaultScale: true, breakpoints: const [ ResponsiveBreakpoint.resize(480, name: MOBILE), ResponsiveBreakpoint.autoScale(800, name: TABLET), ResponsiveBreakpoint.autoScale(1000, name: DESKTOP), ResponsiveBreakpoint.autoScale(2460, name: '4K'), ], background: Container(color: const Color(0xFFF5F5F5)));
As per migration guide
ResponsiveBreakpoints.builder(
child: child!,
breakpoints: [
const Breakpoint(start: 0, end: 450, name: MOBILE),
const Breakpoint(start: 451, end: 800, name: TABLET),
const Breakpoint(start: 801, end: 1920, name: DESKTOP),
const Breakpoint(start: 1921, end: double.infinity, name: '4K'),
],
),
onGenerateRoute: (RouteSettings settings) {
return MaterialPageRoute(builder: (context) {
// The following code implements the legacy ResponsiveWrapper AutoScale functionality
// using the new ResponsiveScaledBox. The ResponsiveScaledBox widget preserves
// the legacy ResponsiveWrapper behavior, scaling the UI instead of resizing.
//
// MaxWidthBox - A widget that limits the maximum width.
// This is used to create a gutter area on either side of the content.
//
// ResponsiveScaledBox - A widget that renders its child
// with a FittedBox set to the width value. Set the fixed width value
// based on the active breakpoint.
return MaxWidthBox(
maxWidth: 1200,
background: Container(color: const Color(0xFFF5F5F5)),
child: ResponsiveScaledBox(
width: ResponsiveValuemaxWidth is set to 1200 via the MaxWidthBox.
]).value,
child: BouncingScrollWrapper.builder(
context, buildPage(settings.name ?? ''),
dragWithMouse: true),
),
);
});
},
);
But how can i make this possible for ResponsiveBreakpoint.resize, since doc only explained about using one responsive box while having multiple breakpoints defined should allow to use multiple responsive box with global configuration
