Codelessly / ResponsiveFramework

Easily make Flutter apps responsive. Automatically adapt UI to different screen sizes. Responsiveness made simple. Demo: https://gallery.codelessly.com/flutterwebsites/minimal/
https://codelessly.com
MIT License
1.25k stars 150 forks source link

Missing scaledWidth and scaledHeight from ResponsiveBreakpointData on new version 1.0.0 #145

Open oneshoot41 opened 1 year ago

oneshoot41 commented 1 year ago

In older version 0.2.0 i used to call this value with ResponsiveWrapper.of(context).scaledWidth needed by the onboarding_overlay package to be responsive (since version 3.1.0 of the package.

But in the 1.0.0 update i don't see this value anymore, only screenWidth and screenHeight are available now so my app tutorial is broken...

Is there a newer solution to get these values ? Am i missing something ?

I'd like to get them as before like this now : ResponsiveBreakpoints.of(context).scaledWidth

Thanks.

ch-muhammad-adil commented 1 year ago

+1 I am also facing same challenge, I am doing few computations based on these variables/values and now I can not handle it with latest version.

ch-muhammad-adil commented 1 year ago

I can clearly see in the code here it is documented but there is no work done at calculating scaled values

https://github.com/Codelessly/ResponsiveFramework/blob/c8f6a74af7a002869e7a706fbad7dc6cb6acce43/lib/responsive_breakpoints.dart#L400

and here

https://github.com/Codelessly/ResponsiveFramework/blob/c8f6a74af7a002869e7a706fbad7dc6cb6acce43/lib/responsive_breakpoints.dart#L286

ch-muhammad-adil commented 1 year ago

@rayliverified any help?

mdmm13 commented 1 year ago

Same problem here.

youssef-fk commented 1 year ago

What did is that, in the MaterialApp builder function. I added something like this

if (ResponsiveBreakpoints.of(context).screenWidth <= 450) {
    return ResponsiveScaledBox(width: 400, child: child);
}
mdmm13 commented 1 year ago

Thank you for the feedback. How though did you calculate scaledWidth?

mdmm13 commented 1 year ago

@rayliverified, was sorry to hear you're suffering from Long Covid. Can't imagine how that's affecting your daily life.

May I ask you to weigh in briefly on how we can bypass this issue? Maybe we can fix this ourselves with a tiny bit of guidance on how to calculate the values ourselves in 1.1.0? Found some calculations in the previous versions, but not sure how to get them to work in the 1.1.0 release?

          double aspectRatio = constraints.maxWidth / constraints.maxHeight;
          double scaledWidth = width!;
          double scaledHeight = width! / aspectRatio;

          bool overrideMediaQueryData = autoCalculateMediaQueryData &&
              (mediaQueryData.size ==
                  Size(constraints.maxWidth, constraints.maxHeight));

          EdgeInsets scaledViewInsets = getScaledViewInsets(
              mediaQueryData: mediaQueryData,
              screenSize: mediaQueryData.size,
              scaledSize: Size(scaledWidth, scaledHeight));
          EdgeInsets scaledViewPadding = getScaledViewPadding(
              mediaQueryData: mediaQueryData,
              screenSize: mediaQueryData.size,
              scaledSize: Size(scaledWidth, scaledHeight));
          EdgeInsets scaledPadding = getScaledPadding(
              padding: scaledViewPadding, insets: scaledViewInsets);
rayliverified commented 12 months ago

Thank you for your patience. Migration guide is up!

https://github.com/Codelessly/ResponsiveFramework/blob/master/migration_0.2.0_to_1.0.0.md

rayliverified commented 12 months ago

The AutoScale functionality has been moved to ResponsiveScaledBox.

ResponsiveScaledBox will override the MediaQueryData to return the computed scaled width. You can get the scaled width with MediaQuery.of(context).size.width.

shrijanRegmi commented 10 months ago

Hey @rayliverified,

What's the equivalent of ResponsiveWrapper.of(context).screenHeight in the new update?

rayliverified commented 10 months ago

The MediaQueryData is updated directly whenever a ResponsiveScaledBox is used. So you can get the scaled width and height via MediaQuery.of(context).size.

This replaces the previous ScaledWidth and ScaledHeight variables.

shrijanRegmi commented 10 months ago

I was actually asking about screenHeight and not scaleHeight. I found it though:

ResponsiveBreakpoints.of(context).screenHeight