https://github.com/xamantra/relative_scale
RelativeScale is a simple custom sizing system for flutter widgets to achieve the same physical sizes across different devices.
https://github.com/xamantra/relative_scale
flutter flutter-responsive flutter-widgets
Last synced: 9 months ago
JSON representation
RelativeScale is a simple custom sizing system for flutter widgets to achieve the same physical sizes across different devices.
- Host: GitHub
- URL: https://github.com/xamantra/relative_scale
- Owner: xamantra
- License: gpl-3.0
- Created: 2020-01-18T12:43:41.000Z (almost 6 years ago)
- Default Branch: master
- Last Pushed: 2021-03-05T13:05:19.000Z (almost 5 years ago)
- Last Synced: 2023-08-20T23:00:36.264Z (over 2 years ago)
- Topics: flutter, flutter-responsive, flutter-widgets
- Language: Dart
- Homepage: https://pub.dev/packages/relative_scale
- Size: 267 KB
- Stars: 18
- Watchers: 2
- Forks: 1
- Open Issues: 1
-
Metadata Files:
- Readme: README.md
- Changelog: CHANGELOG.md
- License: LICENSE
Awesome Lists containing this project
README
RelativeScale is a simple custom sizing system for flutter widgets to achieve the same physical sizes across different devices.
---
## Usage
It is VERY easy to use.
- `sy(value)` and `sx(value)`
- Example:
- `sy(10`) - size relative to screen height.
- `sx(10`) - size relative to screen width.
- `RelativeBuilder` - A builder widget that provides the scaling methods `sy` and `sx`.
- `RelativeScale` (`deprecated`) - A StatefulWidget mixin that provides the scaling methods `sy` and `sx`. It is highly recommended to use `RelativeBuilder`.
## Example
`RelativeBuilder` example.
```dart
class Example extends StatelessWidget {
@override
Widget build(BuildContext context) {
return RelativeBuilder(
builder: (context, height, width, sy, sx) {
return Scaffold(
appBar: AppBar(
title: Text(
'App Bar Title',
style: TextStyle(fontSize: sy(13)),
),
),
body: Container(
height: height,
width: width,
child: Text(
'Body Text',
style: TextStyle(fontSize: sy(11)),
),
),
);
},
);
}
}
```
## Preview
The base screen size for these widgets is `480 x 800`. The source code for this preview app is [here](https://github.com/xamantra/flutter_relative_scale_example).
### Scaled with `RelativeScale`:
Now, look at these scaled widgets with _RelativeScale_. There is a difference, yeah, but that's because of the system scaled sizes like the AppBar (look at the appbar's height :) ). Now let's forget about that and focus on the texts and the rectangle containers. They are the same sizes.
### Normal scaling from a flutter:
Now, for unscaled sizes, no _RelativeScale_ at all. Well, that's quite obvious :). Look at the texts on the last image, they are very small comparing to the first image. And the rectangle containers, very big difference.
The full example is in the [Example](https://pub.dev/packages/relative_scale#-example-tab-) section.
## Scaling Notes
For instance, you have a container widget like this:
```Dart
Container(
height: 300,
width: 500,
)
```
and you implemented RelativeScale:
```Dart
Container(
height: sy(300),
width: sx(500),
)
```
they will not be the same size anymore, using relative scaler will make your sizes a bit bigger. But the hard work will payoff after adjusting your sizes because your app will now have the same widget sizes in every devices.
Please note that these scaler methods are relative to screen size. So basically in this case `sy(50)` and `sx(50)` is NOT the same size.
Also, another thing to note is that if you use `sy` for height and `sx` for width (or vice-versa), you'll get widgets with the same ratio (not size) which is still useful. The _Scaled_ preview image above uses only `sy`, and containers and text have the same size across different screens.
#### If you want to make a perfect _Square_ container, DON'T do this:
```Dart
Container(
height: sy(300),
width: sx(300),
)
// Yeah they are the same value "300", but they are not the same unit 'cause you used "sx" on the width.
```
#### DO this instead:
```Dart
Container(
height: sy(300), // or sx(value)
width: sy(300), // or sx(value)
)
```
## Portrait & Landscape
The library doesn't support orientation yet. If you designed your app for portrait and the user rotates the app to landscape view, the sizes will be messed up. So if you want to use this library, it's highly recommended you lock the rotation. Or if your app should adapt to orientation, **DO NOT** use this library, there are a lot of alternatives.