Getx: Responsive dimensions support

[smokelaboratory]

This package covers almost every major aspect of Flutter development!
There are a few other features that will make this package a one-stop-shop in real sense.
One of them is support for responsive dimensions. It'll be great to have something similar to what flutter_screenutil package does.

[roipeker]

@smokelaboratory, this feature has been available for a while already! (kinda hidden in the docs). Yet, the simplicity of it, makes it awesome (you just need a context though for the sake of MediaQuery invalidation in the current build() where u use it ):

/// Returns a value<T> according to the screen size
/// can give value for:
/// watch: if the shortestSide is smaller than 300
/// mobile: if the shortestSide is smaller than 600
/// tablet: if the shortestSide is smaller than 1200
/// desktop: if width is largest than 1200
context.responsiveValue<T>()

We may add some some customisable breakpoint system in the future... although this is just a cool little piece of code, you can pass any value (<T>) to the params.

 @override
  Widget build(BuildContext context) {
    final backgroundColor = context.responsiveValue<Color>(
      desktop: Colors.red,
      mobile: Colors.blue,
    );

    final appBarBuilder = context.responsiveValue<Widget Function()>(
      desktop: () => BigAppbar(),
      tablet: () => TabletAppbar(),
      mobile: () => MobileAppbar(),
    );
    appBarBuilder() ;
 .....

Regarding _flutter_screenutil_, seems like a package to compute values. Whenever GetX falls short for your needs, you might use it ...

PS: I used to have a similar code concept for responsive design years ago in ActionScript, to calculate your screen coordinates according to some design guidelines. Will see in the future (if I find it), if can be adapted into GetX.

[smokelaboratory]

Ok, Thanks for pointing out this feature of GetX.

Just to be on the same page, what I mean by responsive "dimensions" is height, width and text size of a widget and not responsive "layouts".

By default, flutter works on logical pixels to set the dimensions of a widget. But by this approach, if the screen size increases, the widgets and texts will appear smaller because of more pixel density. As shown in below image :

What intuit (for android) and flutter screen_util (for flutter) do is that they scale the dimensions based on screen size to make the app look same across various devices and form factors.

(I think you'll be well-aware of this concept. I'm just trying to make myself clear of what I meant by responsive dimensions)

[Nipodemos]

hello!
If I understand what you really want is to declare your layout, and it automatically have a responsive layout instead of a fixed one.
As of today this is kinda out of scope of getX. It may be better for you to have a specialized package for that, like the one you've mentioned.

But just for you to know, getX has context extensions that change dynamicly with screen size changes (like in a browser or desktop app)

context.width
context.heigth
But in order for you to use that appropriately the way you want, you'll need to set percentage width and height in widgets.

But I might misunderstood you

[smokelaboratory]

Ok. That makes sense. Thank you.
Closing this for now.

[roipeker]

I believe is a simple scale feature @smokelaboratory, just need to convert all numbers to percentages.

The most "complicated" thing would be using PPI if u wanna have the exact same physical dimension size of a UI element in multiple screens (rare case).

| screen size | any feature value |
|----------------------|---------------|
| designed W (355) | font size (24) |
| current device W (800) | X |

[roipeker]

You might try context.ratio() and context.widthTransformer() / context.heightTransformer(), if it fits your needs (check the comment docs for reference).

[smokelaboratory]

Ok. Got it. Will check this out.
Thanks

[NiranjanShah]

Summet,

Kindly let us know, in case, you try it and guide us how was it achieved

On 13-Sep-2020, at 8:33 PM, Sumeet Rukeja [e-mail] wrote:

Ok. Got it. Will check this out.
Thanks

—
You are receiving this because you are subscribed to this thread.
Reply to this email directly, view it on GitHub https://github.com/jonataslaw/getx/issues/606#issuecomment-691682596, or unsubscribe https://github.com/notifications/unsubscribe-auth/ACHCLQRLWB54CISULOPQR7LSFTNLTANCNFSM4RKBO6RQ.

[smokelaboratory]

@NiranjanShah

I've been using separate package for this purpose in my projects. flutter_screenutil

Not yet tried any way to achieve it using GetX.

[NiranjanShah]

@sumeet
is your app available on Github where u have used flutter_screenutil ?

On 14-Sep-2020, at 12:43 PM, Sumeet Rukeja [e-mail] wrote:

@NiranjanShah https://github.com/NiranjanShah
I've been using separate package for this purpose in my projects. flutter_screenutil https://pub.dev/packages/flutter_screenutil
Not yet tried any way to achieve it using GetX.

—
You are receiving this because you were mentioned.
Reply to this email directly, view it on GitHub https://github.com/jonataslaw/getx/issues/606#issuecomment-691865959, or unsubscribe https://github.com/notifications/unsubscribe-auth/ACHCLQSWJGMPM4AUHNJECELSFW7BPANCNFSM4RKBO6RQ.

[ghenry]

@sumeet
is your app available on Github where u have used flutter_screenutil ?

Our app is using screenutil too.