How to use responsive_framework 1.0.0 with MaterialApp.router()

[Arnooodles]

I'm trying to use the responsive framework v1.0.0 in my Flutter app, but I'm not sure how to apply it to MaterialApp.router() (I'm using go_router). Could you please show me an example of how to do that? I've read the documentation, but I'm still confused about some details especially with ResponsiveScaledBox & MaxWidthBox

[aliaktas-tr]

+1

[rayliverified]

Good question!

If you're using MaterialApp.router(), you can pass in the ResponsiveBreakpoints.builder() into the builder parameter of router(). Much like with a regular MaterialApp.

Please let me know if you run into any issues with GoRouter with this method.

[Arnooodles]

Actually, I've already tried implementing your suggestion. But I think I need to use ResponsiveScaledBox or MaxWidthBox somewhere, but I'm not sure where to put them. Here's a screenshot of how the UI looks like in v0.2.0 and v1.0.0:

[AdamBridges]

Is it possible to wrap the child parameter with ResponsiveScaledBox like so:

ResponsiveBreakpoints.builder(
 child: ResponsiveScaledBox(
  child: child!
 )
)

While the documentation does explain a bit that ResponsiveScaledBox is now autoScale, it would be nice if the documentation also included how resize is being handled. MaxWidthBox I assume, or just knows based on what is included in the builder's list of breakpoints?

[Arnooodles]

I tried this but encountered an error('ResponsiveValue requires a parent ResponsiveWrapper to reference breakpoints. Add a ResponsiveWrapper or remove breakpoint references.). This happened when I tried to set the width for the ResponsiveScaledBox using ResponsiveValue.

Also are there any examples of how to implement the autoScale, autoScaleDown, and resize in v1.0.0

[A7MeDG0L0L]

I tried this but encountered an error('ResponsiveValue requires a parent ResponsiveWrapper to reference breakpoints. Add a ResponsiveWrapper or remove breakpoint references.). This happened when I tried to set the width for the ResponsiveScaledBox using ResponsiveValue.

Also are there any examples of how to implement the autoScale, autoScaleDown, and resize in v1.0.0

Same...
DId u find a solution ?

[Arnooodles]

I tried this but encountered an error('ResponsiveValue requires a parent ResponsiveWrapper to reference breakpoints. Add a ResponsiveWrapper or remove breakpoint references.). This happened when I tried to set the width for the ResponsiveScaledBox using ResponsiveValue.
Also are there any examples of how to implement the autoScale, autoScaleDown, and resize in v1.0.0

Same... DId u find a solution ?

Not yet...I'm still using v0.2.0

[MostafaSolimanMO]

Any update on this?

[rayliverified]

Migration guide is up!

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

[jlin5]

@rayliverified In the migration guide can you mention how to use ResponsiveScaledBox with MaterialApp.router without it throwing an error? A workaround I found is to wrap ResponsiveScaledBox in a Builder widget.

        return MaterialApp.router(
          routerConfig: routingController.router,
          builder: (context, child) => ResponsiveBreakpoints.builder(
            child: Builder(
              builder: (context) {
                return ResponsiveScaledBox(
                  width: ResponsiveValue<double>(
                    context,
                    conditionalValues: [
                      Condition.equals(name: MOBILE, value: 450),
                      Condition.between(start: 800, end: 1100, value: 800),
                      Condition.between(start: 1000, end: 1200, value: 700),
                    ],
                  ).value,
                  child: child!,
                );
              },
            ),
            breakpoints: [
              const Breakpoint(start: 0, end: 450, name: MOBILE),
              const Breakpoint(start: 451, end: 800, name: TABLET),
              const Breakpoint(start: 801, end: 1920, name: DESKTOP),
              const Breakpoint(start: 1921, end: double.infinity, name: '4K'),
            ],
          ),
        );

Thank you for the migration guide!

[rayliverified]

Oh right, because the ResponsiveValue needs the context passed from the ResponsiveBreakpoints.

Your solution is correct.

I'll think about adding a builder parameter to the ResponsiveBreakpoints.builder() that can be used instead of child.

[Arnooodles]

Thank you for your helpful responses on this issue. I was able to migrate my code successfully with the updated documentation. I also wanted to share my brick implementation here for your reference.