How to implement ResponsiveWrapper in 1.0.0 version ?

[ArthurREGNARD]

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]

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]

@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]

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]

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]

Might be solved with the new migration guide?