Open ArthurREGNARD opened 1 year ago
Ah, I see the migration ReadMe doesn't include the how
on moving from ResponsiveWrapper to ResponsiveScaledBox.
Here's the example code for using ResponsiveScaledBox from the example app.
ResponsiveScaledBox(
// ResponsiveScaledBox renders its child with a FittedBox set to the `width` value.
// Set the fixed width value based on the active breakpoint.
width: ResponsiveValue<double>(context,
conditionalValues: [
const Condition.equals(name: MOBILE, value: 450),
const Condition.between(
start: 800, end: 1100, value: 800),
const 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: child!),
I can help answer any questions you may have after testing out the example app to see how it works.
@rayliverified Hi Ray! Thank you for a cool library.
Could you please give more detailed explanation about moving from ResponsiveWrapper
?
Now I have a class with ResponsiveWrapper
:
/// Class for creating responsive view depending on screen size.
class MainResponsiveWrapper extends StatelessWidget {
/// Creates MainResponsiveWrapper.
const MainResponsiveWrapper({required this.child, super.key});
/// Widget, which will be wrapped in [ResponsiveWrapper].
final Widget child;
@override
Widget build(final BuildContext context) => ResponsiveWrapper(
minWidth: 320,
defaultScale: true,
mediaQueryData: MediaQuery.of(context).copyWith(textScaleFactor: 1),
alignment: Alignment.center,
defaultScaleLandscape: true,
breakpoints: _webBreakpoints,
child: child,
);
}
const List<ResponsiveBreakpoint> _webBreakpoints = <ResponsiveBreakpoint>[
ResponsiveBreakpoint.autoScaleDown(500, name: 'Small', scaleFactor: 0.5),
ResponsiveBreakpoint.resize(600, name: MOBILE, scaleFactor: 0.6),
ResponsiveBreakpoint.autoScale(900, name: TABLET, scaleFactor: 0.6),
ResponsiveBreakpoint.resize(1000, name: DESKTOP, scaleFactor: 0.75),
ResponsiveBreakpoint.autoScale(1430, name: '2K', scaleFactor: 0.75),
ResponsiveBreakpoint.resize(2050, name: 'Design target', scaleFactor: 1),
ResponsiveBreakpoint.autoScale(2460, name: '4K', scaleFactor: 1),
];
How can I achieve the same behavior with new API? Like in your example here:
Ah, I see the migration ReadMe doesn't include the
how
on moving from ResponsiveWrapper to ResponsiveScaledBox.Here's the example code for using ResponsiveScaledBox from the example app.
ResponsiveScaledBox( // ResponsiveScaledBox renders its child with a FittedBox set to the `width` value. // Set the fixed width value based on the active breakpoint. width: ResponsiveValue<double>(context, conditionalValues: [ const Condition.equals(name: MOBILE, value: 450), const Condition.between( start: 800, end: 1100, value: 800), const 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: child!),
I can help answer any questions you may have after testing out the example app to see how it works.
As you can see, I have scaleFactor
s here and they help me to change layouts - I use OverflowBar
s and Wrap
s, which are changing layout on screen size change. If I use ResponsiveScaledBox
without additional setting, they will always be horizontal (scaling to very small sizes). How to translate properly my scaleFactor
s into conditionalValues
?
Ah, I see the migration ReadMe doesn't include the
how
on moving from ResponsiveWrapper to ResponsiveScaledBox.Here's the example code for using ResponsiveScaledBox from the example app.
ResponsiveScaledBox( // ResponsiveScaledBox renders its child with a FittedBox set to the `width` value. // Set the fixed width value based on the active breakpoint. width: ResponsiveValue<double>(context, conditionalValues: [ const Condition.equals(name: MOBILE, value: 450), const Condition.between( start: 800, end: 1100, value: 800), const 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: child!),
I can help answer any questions you may have after testing out the example app to see how it works.
Ah, I see the migration ReadMe doesn't include the
how
on moving from ResponsiveWrapper to ResponsiveScaledBox.Here's the example code for using ResponsiveScaledBox from the example app.
ResponsiveScaledBox( // ResponsiveScaledBox renders its child with a FittedBox set to the `width` value. // Set the fixed width value based on the active breakpoint. width: ResponsiveValue<double>(context, conditionalValues: [ const Condition.equals(name: MOBILE, value: 450), const Condition.between( start: 800, end: 1100, value: 800), const 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: child!),
I can help answer any questions you may have after testing out the example app to see how it works.
I faced same problem, use ResponsiveScaledBox can solve scale problem, but I can't find api how to resize. Could you give detailed document?
I tried and the solution for migrate resize scale to 1.0.0。sample codes below
builder: (context, child) => ResponsiveBreakpoints.builder(
child: ResponsiveScaledBox(
// ResponsiveScaledBox renders its child with a FittedBox set to the width
value.
// Set the fixed width value based on the active breakpoint.
width: MediaQuery.of(context).size.width / scale,
child: child!),
breakpoints: [
const Breakpoint(start: 0, end: double.infinity, name: DESKTOP),
],
)
Might be solved with the new migration guide?
It the first time I would like to use your package for my Web responsive project app.
The documentation have not been updated ? How you migrate from ResponsiveWrapper to ... ?
Thank you for your package. Best Regards,