-
Notifications
You must be signed in to change notification settings - Fork 157
Description
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: ResponsiveValue(context, conditionalValues: [
Condition.equals(name: MOBILE, value: 450),
Condition.between(start: 800, end: 1100, value: 800),
Condition.between(start: 1000, end: 1200, value: 1000),
// There are no conditions for width over 1200
// because the maxWidth
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