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

When upgarde to 1.0.0 #142

Open Mohammad-Abureesh opened 1 year ago

Mohammad-Abureesh commented 1 year ago

@rayliverified

When updating to the latest version, all the used widgets increased significantly in size. I do not know the reason, but when I used the previous version, everything looked good.

I want to upgrade to 1.0.0 but what the solution for fix this?

code in version 0.2.0 builder:(context, widget) => ResponsiveWrapper.builder(widget, maxWidth: Get.size.width, minWidth: 480, defaultScale: true, breakpoints: const [ ResponsiveBreakpoint.resize(480, name: MOBILE), ResponsiveBreakpoint.autoScale(800, name: TABLET), ResponsiveBreakpoint.resize(1000, name: DESKTOP)]),

manh-nguyen-dev commented 1 year ago

same, need guide document to update this code in version 1.0.0

ErnestoCuesy commented 1 year ago

Yup, I had to rollback to 0.2.0

jlin5 commented 1 year ago

Same. It would be helpful to have clarity on what to do for ResponsiveBreakpoints that used resize and autoScale and the scaleFactor property.

I was able to somewhat get the responsiveness of what I had originally by using ResponsiveScaledBox to make the mobile widgets scale smaller, because they were too big. The tablet sizes were fine. I also found out that breakpointsLandscape had to be defined for any device that was in landscape, if not then the breakpoint value would be null.

  @override
  Widget build(BuildContext context) {
    return MaterialApp.router(
      routerConfig: routingController.router,
      builder: (context, child) => ResponsiveBreakpoints.builder(
        child: Builder(
          builder: (context) {
            return Container(
              color: Theme.of(context).colorScheme.surface,
              child: ResponsiveScaledBox(
                width: ResponsiveValue<double>(
                  context,
                  conditionalValues: [
                    const Condition.equals(name: MOBILE, value: 450),
                  ],
                ).value,
                child: child!,
              ),
            );
          },
        ),
        breakpoints: [
          const Breakpoint(start: 0, end: 450, name: MOBILE),
          const Breakpoint(start: 451, end: 850, name: TABLET),
          const Breakpoint(start: 851, end: double.infinity, name: DESKTOP),
        ],
        breakpointsLandscape: [
          const Breakpoint(start: 0, end: 450, name: MOBILE),
          const Breakpoint(start: 451, end: 800, name: TABLET),
          const Breakpoint(start: 801, end: double.infinity, name: DESKTOP),
        ],
      ),
    );
  }

I noticed that the breakpoint will be null on initial build and a subsequent build update would have the target breakpoint. This would cause an sudden change on a screen which is most notable for images and padding values.

flutter: MediaQuery width 1180.0
flutter: breakpoint Breakpoint(start: 0.0, end: 0.0, name: null)
flutter: isMobile false
flutter: isTablet false
flutter: isDesktop false
flutter: -=-=-=-=-=-=-=-=
flutter: MediaQuery width 1180.0
flutter: breakpoint Breakpoint(start: 801.0, end: Infinity, name: DESKTOP)
flutter: isMobile false
flutter: isTablet false
flutter: isDesktop true
flutter: -=-=-=-=-=-=-=-=
Mohammad-Abureesh commented 1 year ago

@rayliverified any answer about this issue or any one solved this?

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

I also found out that breakpointsLandscape had to be defined for any device that was in landscape, if not then the breakpoint value would be null.

This sounds like a bug. It shouldn't be the case here.

rayliverified commented 12 months ago

Thanks, this should be fixed in v1.1.1.