{"id":26341259,"url":"https://github.com/xamantra/relative_scale","last_synced_at":"2026-01-11T04:50:00.808Z","repository":{"id":43141145,"uuid":"234733243","full_name":"xamantra/relative_scale","owner":"xamantra","description":"RelativeScale is a simple custom sizing system for flutter widgets to achieve the same physical sizes across different devices.","archived":false,"fork":false,"pushed_at":"2021-03-05T13:05:19.000Z","size":273,"stargazers_count":18,"open_issues_count":1,"forks_count":1,"subscribers_count":2,"default_branch":"master","last_synced_at":"2023-08-20T23:00:36.264Z","etag":null,"topics":["flutter","flutter-responsive","flutter-widgets"],"latest_commit_sha":null,"homepage":"https://pub.dev/packages/relative_scale","language":"Dart","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"gpl-3.0","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/xamantra.png","metadata":{"files":{"readme":"README.md","changelog":"CHANGELOG.md","contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null}},"created_at":"2020-01-18T12:43:41.000Z","updated_at":"2023-05-30T08:22:51.000Z","dependencies_parsed_at":"2022-09-09T23:20:26.765Z","dependency_job_id":null,"html_url":"https://github.com/xamantra/relative_scale","commit_stats":null,"previous_names":[],"tags_count":0,"template":null,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/xamantra%2Frelative_scale","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/xamantra%2Frelative_scale/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/xamantra%2Frelative_scale/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/xamantra%2Frelative_scale/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/xamantra","download_url":"https://codeload.github.com/xamantra/relative_scale/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":243826800,"owners_count":20354220,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["flutter","flutter-responsive","flutter-widgets"],"created_at":"2025-03-16T04:29:02.951Z","updated_at":"2025-03-16T04:29:03.417Z","avatar_url":"https://github.com/xamantra.png","language":"Dart","funding_links":[],"categories":[],"sub_categories":[],"readme":"\u003cp align=\"center\"\u003e\u003cimg src=\"https://i.imgur.com/yB3GZ9j.png\"\u003e\u003c/p\u003e\n\n\u003cp align=\"center\"\u003eRelativeScale is a simple custom sizing system for flutter widgets to achieve the same physical sizes across different devices.\u003c/p\u003e\n\n\u003cp align=\"center\"\u003e\n\u003ca href=\"https://pub.dev/packages/relative_scale\" target=\"_blank\"\u003e\u003cimg src=\"https://img.shields.io/pub/v/relative_scale\" alt=\"Pub Version\" /\u003e\u003c/a\u003e\n\u003ca href=\"https://github.com/xamantra/relative_scale/actions?query=workflow%3ACI\" target=\"_blank\"\u003e\u003cimg src=\"https://github.com/xamantra/relative_scale/workflows/CI/badge.svg?event=push\" alt=\"CI\" /\u003e\u003c/a\u003e\n\u003ca href=\"https://codecov.io/gh/xamantra/relative_scale\"\u003e\u003cimg src=\"https://codecov.io/gh/xamantra/relative_scale/branch/master/graph/badge.svg\" /\u003e\u003c/a\u003e\n\u003ca href=\"https://pub.dev/packages/relative_scale/score\" target=\"_blank\"\u003e\u003cimg src=\"https://img.shields.io/badge/dynamic/json?color=blue\u0026label=likes\u0026query=likes\u0026url=http://www.pubscore.gq/likes?package=relative_scale\" alt=\"likes\" /\u003e\u003c/a\u003e\n\u003ca href=\"https://pub.dev/packages/relative_scale/score\" target=\"_blank\"\u003e\u003cimg src=\"https://img.shields.io/badge/dynamic/json?color=green\u0026label=health\u0026query=pub_points\u0026url=http://www.pubscore.gq/pub-points?package=relative_scale\" alt=\"health\" /\u003e\u003c/a\u003e\n\u003ca href=\"https://pub.dev/packages/relative_scale/score\" target=\"_blank\"\u003e\u003cimg src=\"https://img.shields.io/badge/dynamic/json?color=teal\u0026label=popularity\u0026query=popularity\u0026url=http://www.pubscore.gq/popularity?package=relative_scale\" alt=\"popularity\" /\u003e\u003c/a\u003e\n\u003ca href=\"https://github.com/xamantra/relative_scale/stargazers\" target=\"_blank\"\u003e\u003cimg src=\"https://img.shields.io/github/stars/xamantra/relative_scale\" alt=\"GitHub stars\" /\u003e\u003c/a\u003e\n\u003ca href=\"https://github.com/tenhobi/effective_dart\" target=\"_blank\"\u003e\u003cimg src=\"https://img.shields.io/badge/style-effective_dart-54C5F8.svg\" alt=\"style: effective dart\" /\u003e\u003c/a\u003e\n\u003ca href=\"https://github.com/xamantra/relative_scale/blob/master/LICENSE\" target=\"_blank\"\u003e\u003cimg src=\"https://img.shields.io/github/license/xamantra/relative_scale\" alt=\"GitHub license\" /\u003e\u003c/a\u003e\n\u003ca href=\"https://github.com/xamantra/relative_scale/commits/master\" target=\"_blank\"\u003e\u003cimg src=\"https://img.shields.io/github/last-commit/xamantra/relative_scale\" alt=\"GitHub last commit\" /\u003e\u003c/a\u003e\n\u003c/p\u003e\n\n---\n\n## Usage\nIt is VERY easy to use.\n\n- `sy(value)` and `sx(value)`\n- Example:\n  - `sy(10`) - size relative to screen height.\n  - `sx(10`) - size relative to screen width.\n\n- `RelativeBuilder` - A builder widget that provides the scaling methods `sy` and `sx`.\n- `RelativeScale` (`deprecated`) - A StatefulWidget mixin that provides the scaling methods `sy` and `sx`. It is highly recommended to use `RelativeBuilder`.\n\n\u003chr\u003e\n\n## Example\n`RelativeBuilder` example.\n\n```dart\nclass Example extends StatelessWidget {\n  @override\n  Widget build(BuildContext context) {\n    return RelativeBuilder(\n      builder: (context, height, width, sy, sx) {\n        return Scaffold(\n          appBar: AppBar(\n            title: Text(\n              'App Bar Title',\n              style: TextStyle(fontSize: sy(13)),\n            ),\n          ),\n          body: Container(\n            height: height,\n            width: width,\n            child: Text(\n              'Body Text',\n              style: TextStyle(fontSize: sy(11)),\n            ),\n          ),\n        );\n      },\n    );\n  }\n}\n```\n\n\u003chr\u003e\n\n## Preview\n\nThe 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).\n\n### Scaled with `RelativeScale`:\n\n![Scaled](./preview/scaled.png)\n\nNow, 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.\n\n### Normal scaling from a flutter:\n\n  ![Unscaled](./preview/unscaled.png)\n\n  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.\n\n\nThe full example is in the [Example](https://pub.dev/packages/relative_scale#-example-tab-) section.\n\n\u003chr\u003e\n\n## Scaling Notes\n\nFor instance, you have a container widget like this:\n\n```Dart\nContainer(\n    height: 300,\n    width: 500,\n)\n```\n\nand you implemented RelativeScale:\n\n```Dart\nContainer(\n    height: sy(300),\n    width: sx(500),\n)\n```\n\nthey 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.\n\nPlease 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.\n\nAlso, 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.\n\n#### If you want to make a perfect _Square_ container, DON'T do this:\n\n```Dart\nContainer(\n    height: sy(300),\n    width: sx(300),\n)\n// Yeah they are the same value \"300\", but they are not the same unit 'cause you used \"sx\" on the width.\n```\n\n#### DO this instead:\n\n```Dart\nContainer(\n    height: sy(300), // or sx(value)\n    width: sy(300), // or sx(value)\n)\n```\n\n## Portrait \u0026 Landscape\nThe 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.","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fxamantra%2Frelative_scale","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fxamantra%2Frelative_scale","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fxamantra%2Frelative_scale/lists"}