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.28k stars 150 forks source link

Can we use the new version with GetX package? #162

Closed BenCherif closed 3 months ago

BenCherif commented 1 year ago

Hi, i want to migrate to the new version but i don't know how to migrate to be compatible with GetX package. can you provide an example to use it with GetX package.

BenCherif commented 5 months ago

any updates?

BenCherif commented 3 months ago

any updates?

Trefa1998 commented 3 months ago

I've been using it with GetX @BenCherif . What exactly are you concerned about/need clarification with?

If you're using it at the root-level, assuming you're using GetMaterialApp then the example is exactly the same, you just get the builder property to match the example, same as if it were MaterialApp. That appears to work exactly the same for me.

Example:

    GetMaterialApp(
        // ...
        builder: (context, child) => ResponsiveBreakpoints(
          breakpoints: const [
            Breakpoint(start: 0, end: 450, name: MOBILE),
            Breakpoint(start: 451, end: 800, name: TABLET),
            Breakpoint(start: 801, end: 1920, name: DESKTOP),
            Breakpoint(start: 1921, end: double.infinity, name: '4K'),
          ],
          child: Builder(builder: (BuildContext context) {
            child ??= const SizedBox();
            return MaxWidthBox(
              maxWidth: 1200,
              child: ResponsiveScaledBox(
                width: ResponsiveValue<double?>(
                  context,
                  conditionalValues: const [
                    Condition.equals(name: MOBILE, value: 450),
                    Condition.between(start: 800, end: 1100, value: 800),
                    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: BouncingScrollWrapper.builder(
                  context,
                  child!,
                  dragWithMouse: true, // NOTE: This will disable trackpad scrolling on desktop as of v 1.4.0 on pub.dev
                ),
              ),
            );
          }),
        ),
        // ...
      );

And you can use the other GetX stuff like state management and routing like normal