{"id":13552352,"url":"https://github.com/CoderUni/responsive_sizer","last_synced_at":"2025-04-03T03:31:24.851Z","repository":{"id":40395440,"uuid":"355939286","full_name":"CoderUni/responsive_sizer","owner":"CoderUni","description":"Responsive Sizer helps implement are responsive layout by providing helper widgets and extensions","archived":false,"fork":false,"pushed_at":"2024-03-24T08:16:56.000Z","size":895,"stargazers_count":130,"open_issues_count":0,"forks_count":20,"subscribers_count":5,"default_branch":"main","last_synced_at":"2025-04-02T08:48:38.340Z","etag":null,"topics":["adaptive","adaptive-layouts","flutter","hacktoberfest","responsive","responsive-layout"],"latest_commit_sha":null,"homepage":"https://pub.dev/packages/responsive_sizer","language":"Dart","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/CoderUni.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,"governance":null,"roadmap":null,"authors":null,"dei":null}},"created_at":"2021-04-08T14:27:09.000Z","updated_at":"2025-03-31T06:09:56.000Z","dependencies_parsed_at":"2024-01-22T18:00:39.058Z","dependency_job_id":null,"html_url":"https://github.com/CoderUni/responsive_sizer","commit_stats":{"total_commits":41,"total_committers":2,"mean_commits":20.5,"dds":0.09756097560975607,"last_synced_commit":"37c2b26eb997d1c5c0d1beb4e4a0da92f8110410"},"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/CoderUni%2Fresponsive_sizer","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/CoderUni%2Fresponsive_sizer/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/CoderUni%2Fresponsive_sizer/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/CoderUni%2Fresponsive_sizer/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/CoderUni","download_url":"https://codeload.github.com/CoderUni/responsive_sizer/tar.gz/refs/heads/main","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":246933426,"owners_count":20857048,"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":["adaptive","adaptive-layouts","flutter","hacktoberfest","responsive","responsive-layout"],"created_at":"2024-08-01T12:02:02.614Z","updated_at":"2025-04-03T03:31:19.829Z","avatar_url":"https://github.com/CoderUni.png","language":"Dart","readme":"# Responsive Sizer\n\nResponsive Sizer helps implement a responsive layout by providing helper widgets and extensions.\n\n![Responsive Image](https://github.com/CoderUni/responsive_sizer/blob/main/assets/img_ss_with_lib.png)\n\n![Responsive Image](https://github.com/CoderUni/responsive_sizer/blob/main/assets/img_ss_without_lib.png)\n\n# Content\n\n- [Installation](#installation)\n- [Usage](#usage)\n- [Parameters](#parameters)\n- [Take Note](#take-note)\n- [FAQ](#faq)\n- [Community Support](#community-support)\n\n# Installation\nAdd `responsive_sizer` to pubspec.yaml\n```yaml\ndependencies:\n  responsive_sizer: ^3.3.1\n```\n\n# Usage\n\n## Import the Package\n```dart\nimport 'package:responsive_sizer/responsive_sizer.dart';\n```\n\n## Wrap MaterialApp with ResponsiveSizer widget\n```dart\nResponsiveSizer( \n  builder: (context, orientation, screenType) {\n    return MaterialApp(\n      home: HomePage(),\n    );\n  },\n);\n```\n\n## Widget Size\n```dart\nContainer(\n  width: Adaptive.w(20),    // This will take 20% of the screen's width\n  height: 30.5.h     // This will take 30.5% of the screen's height\n)\n```\n\n## Font size\n```dart\nText(\n  'Responsive Sizer', \n  style: TextStyle(fontSize: 15.dp), \n  // 15.sp can also be used instead of .dp\n  // To know their differences, check #FAQ\n)\n```\n\n## Orientation\n\nIf you want to support both portrait and landscape orientations\n```dart\nDevice.orientation == Orientation.portrait\n  ? Container(   // Widget for Portrait\n      width: 100.w,\n      height: 20.5.h,\n   )\n  : Container(   // Widget for Landscape\n      width: 100.w,\n      height: 12.5.h,\n   )\n```\n\n\n## ScreenType\n\nIf you want the same layout to look different in tablet and mobile, use the ``Device.screenType`` method:\n\n```dart\nDevice.screenType == ScreenType.tablet\n  ? Container(   // Widget for Tablet\n      width: 100.w,\n      height: 20.5.h,\n   )\n  : Container(   // Widget for Mobile\n      width: 100.w,\n      height: 12.5.h,\n   )\n```\n*`Device.ScreenType` **can not** be *Desktop* unless `maxTabletWidth` is set\n\n# Parameters\n## ResponsiveSizer\n* `maxMobileWidth` - Maximum width of a mobile device\n(If the device's width is larger than this, it will be categorized as a tablet) - Default value: 599\n* `maxTabletWidth` - Maximum width of a tablet device\n(If the device's width is larger than this, it will be categorized as a desktop) - Optional: enables *Desktop* `ScreenType` if enabled\n\n## Extensions\n* `Adaptive.h()` or `.h` - Calculated percentage of the device's **height** (40.h -\u003e 40% of device's height)\n* `Adaptive.w()` or `.w` - Calculated percentage of the device's **width** (40.w -\u003e 40% of device's width)\n* `Adaptive.sp()` or `.sp` - Calculated sp based on the device's pixel density and aspect ratio (See [FAQ](#sp-dp-difference))\n* `Adaptive.dp()` or `.dp` - Calculated dp based on the device's pixel density (See [FAQ](#sp-dp-difference))\n\n##### *Note: Only use `.sh` and `.sw` if you want height and width to depend on the device's available height and width after applying SafeArea. Use `.h` and `.w` by default.\n* `Adaptive.sh()` or `.sh` - Calculated percentage of the **remaining device's height** after applying `SafeArea` \n* `Adaptive.sw()` or `.sw` - Calculated percentage of the **remaining device's width** after applying `SafeArea` \n\n\u003cbr /\u003e\n\n* `Device.boxConstraints` - BoxConstraints of the device\n* `Device.orientation` - Screen Orientation of the device (portrait or landscape)\n* `Device.screenType` - Screen type of the device (mobile or tablet)\n* `Device.aspectRatio` - Aspect ratio of the device\n* `Device.pixelRatio` - Pixel density ratio of the device\n\n\u003cbr /\u003e\n\n* `Adaptive.cm()` or `.cm` - The respective value in value in centimeters\n* `Adaptive.mm()` or `.mm` - The respective value in value in millimeters\n* `Adaptive.Q()` or `.Q` - The respective value in quarter-millimeters\n* `Adaptive.inches()` or `.inches` - The respective value in inches\n* `Adaptive.pc()` or `.pc` - The respective value in picas (1/6th of 1 inch)\n* `Adaptive.pt()` or `.pt` - The respective value in points (1/72th of 1 inch)\n* `Adaptive.px()` or `.px` - The respective value in pixels\n\n\n# Take Note\n\nYou need to import `responsive_sizer` package in order to access `number.h`, `number.w`, `number.dp`, and `number.sp`\n\n**Auto import in VSCode and Android Studio doesn't work for dart extension methods.** Typing `10.h` would not bring up auto import suggestion for this package\n\nOne workaround is to type `Device` so that the auto import suggestion would show up:\n```dart\nimport 'package:responsive_sizer/responsive_sizer.dart';\n```\n\n# FAQ\n\n### \u003ca id=\"sp-dp-difference\"\u003e\u003c/a\u003eWhat is the difference between `.sp` and `.dp`?\n\n`.dp` is *supposedly* calculated [see below](#dp-sp-calculation) based on Material Design's [dp calculation](https://material.io/design/layout/pixel-density.html#pixel-density-on-android) \nwhile`.sp` is calculated based on the device's [pixel density and aspect ratio](https://github.com/CoderUni/responsive_sizer/blob/f1558c80bc2c2ca7db3ccbd4b34a30c87f3c5f0e/lib/src/extension.dart#L54)\n\n### \u003ca id=\"dp-sp-calculation\"\u003e\u003c/a\u003eWhy is dp not calculated using the device's screen density?\n\nSince there is no way to obtain a device's physical width in inches, we could not calculate for screen density. Material Design's [screen density calculation](https://material.io/design/layout/pixel-density.html#pixel-density-on-android) involves a device's physical width in inches. As an alternative, dp is calculated using the device's [pixel ratio](https://api.flutter.dev/flutter/dart-ui/FlutterView/devicePixelRatio.html).\n\n# Community Support\n\nIf you have any suggestions or issues, feel free to open an [issue](https://github.com/CoderUni/responsive_sizer/issues)\n\nIf you would like to contribute, feel free to create a [PR](https://github.com/CoderUni/responsive_sizer/pulls)","funding_links":[],"categories":["Dart"],"sub_categories":[],"project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2FCoderUni%2Fresponsive_sizer","html_url":"https://awesome.ecosyste.ms/projects/github.com%2FCoderUni%2Fresponsive_sizer","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2FCoderUni%2Fresponsive_sizer/lists"}