-
Notifications
You must be signed in to change notification settings - Fork 152
New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
How to implement ResponsiveWrapper in 1.0.0 version ? #134
Comments
Ah, I see the migration ReadMe doesn't include the 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 Now I have a class with /// 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:
As you can see, I have |
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 |
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,
The text was updated successfully, but these errors were encountered: