Skip to content
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

Open
ArthurREGNARD opened this issue Apr 25, 2023 · 5 comments
Open

How to implement ResponsiveWrapper in 1.0.0 version ? #134

ArthurREGNARD opened this issue Apr 25, 2023 · 5 comments

Comments

@ArthurREGNARD
Copy link

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,

@rayliverified
Copy link
Contributor

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.

@abigotado
Copy link

abigotado commented Apr 27, 2023

@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 scaleFactors here and they help me to change layouts - I use OverflowBars and Wraps, 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 scaleFactors into conditionalValues?

@leisu1
Copy link

leisu1 commented Jun 28, 2023

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?

@leisu1
Copy link

leisu1 commented Jun 29, 2023

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),
],
)

@mdmm13
Copy link

mdmm13 commented Sep 12, 2023

Might be solved with the new migration guide?

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

No branches or pull requests

5 participants