{"id":32307021,"url":"https://github.com/titoworlddev/mediaquery_sizer","last_synced_at":"2026-02-19T21:56:05.713Z","repository":{"id":61975432,"uuid":"525451429","full_name":"titoworlddev/mediaquery_sizer","owner":"titoworlddev","description":"Package that helps in the use of device dimensions and to make an adaptable design in an easy way.","archived":false,"fork":false,"pushed_at":"2024-07-30T17:53:05.000Z","size":211,"stargazers_count":3,"open_issues_count":0,"forks_count":1,"subscribers_count":1,"default_branch":"master","last_synced_at":"2025-10-23T07:24:28.016Z","etag":null,"topics":["android","dart","dartlang","dartlanguage","flutter","flutterpackage","ios","responsive-design"],"latest_commit_sha":null,"homepage":"https://pub.dev/packages/mediaquery_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/titoworlddev.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,"publiccode":null,"codemeta":null}},"created_at":"2022-08-16T16:04:19.000Z","updated_at":"2024-09-18T14:43:42.000Z","dependencies_parsed_at":"2024-07-30T21:30:46.305Z","dependency_job_id":null,"html_url":"https://github.com/titoworlddev/mediaquery_sizer","commit_stats":{"total_commits":10,"total_committers":1,"mean_commits":10.0,"dds":0.0,"last_synced_commit":"50dceec42bf41a89cc330521f16ec619cec550e1"},"previous_names":[],"tags_count":3,"template":false,"template_full_name":null,"purl":"pkg:github/titoworlddev/mediaquery_sizer","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/titoworlddev%2Fmediaquery_sizer","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/titoworlddev%2Fmediaquery_sizer/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/titoworlddev%2Fmediaquery_sizer/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/titoworlddev%2Fmediaquery_sizer/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/titoworlddev","download_url":"https://codeload.github.com/titoworlddev/mediaquery_sizer/tar.gz/refs/heads/master","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/titoworlddev%2Fmediaquery_sizer/sbom","scorecard":null,"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":286080680,"owners_count":29634498,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2026-02-19T18:02:07.722Z","status":"ssl_error","status_checked_at":"2026-02-19T18:01:46.144Z","response_time":117,"last_error":"SSL_connect returned=1 errno=0 peeraddr=140.82.121.6:443 state=error: unexpected eof while reading","robots_txt_status":"success","robots_txt_updated_at":"2025-07-24T06:49:26.215Z","robots_txt_url":"https://github.com/robots.txt","online":false,"can_crawl_api":true,"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":["android","dart","dartlang","dartlanguage","flutter","flutterpackage","ios","responsive-design"],"created_at":"2025-10-23T07:13:22.674Z","updated_at":"2026-02-19T21:56:05.708Z","avatar_url":"https://github.com/titoworlddev.png","language":"Dart","readme":"# Mediaquery Sizer\n\n\u003e It helps you to use the screen sizes through mediaquery, without having to make instances to shorten its size or use it completely.\n\n- Manage sizes by screen percentages or even scalable pixels\n  - Width Percentage\n  - Height Percentage\n  - Scalable Pixels\n- Use sizes by percentage of the parent widget thanks to the LayoutBuilder\n  - Parent Width Percentage\n  - Parent Height Percentage\n  - Parent Scalable Pixels\n- Manage all the information on the screen easily\n  - Width\n  - Height\n  - Device Pixel Ratio\n  - Aspect Ratio\n  - Orientation\n  - Screen Size\n\n\u003cimg src=\"https://raw.githubusercontent.com/titoworlddev/mediaquery_sizer/master/example_screenshot.png\" width=\"200\"\u003e\n\n## Getting started\n\nCopy the dependency into your pubspec.yaml\n\n```\nmediaquery_sizer: ^1.1.0\n```\n\nImport the package in your file to be able to use it\n\n```dart\nimport 'package:mediaquery_sizer/mediaquery_sizer.dart';\n```\n\n## Usage\n\nIn order to use percentages and scalable pixels simply use the extension\n\nBy default it should be like this\n\n```dart\nSize size = MediaQuery.of(context).size;\nContainer(\n  // Long way\n  width: MediaQuery.of(context).size.width * 0.1,\n  // Short way\n  height: size.height * 0.2,\n  color: Colors.red,\n  Text(\n    'Hello world!',\n    // Text size is the same regardless of screen size\n    style: TextStyle(fontSize: 16),\n  )\n);\n```\n\nBut now you can put it like this\n\n```dart\nContainer(\n  // It is the same as using the full MediaQuery but much faster and applicable to all your apps quickly and easily.\n  width: 10.w(context),\n  height: 20.h(context),\n  color: Colors.red,\n  Text(\n    'Hello world!',\n    // The font size will grow with the screen size so as not to break the design. Something like a vectorized image.\n    style: TextStyle(fontSize: 16.sp(context))\n  )\n);\n```\n\n---\n\nUse the screen information through the static methods of the [Sizer] class\n\n```dart\nColumn(\n  mainAxisAlignment: MainAxisAlignment.spaceBetween,\n  crossAxisAlignment: CrossAxisAlignment.start,\n  children: [\n    Text('Screen Height:   ${Sizer.h(context)}', style: style),\n    Text('Screen Width:   ${Sizer.w(context)}', style: style),\n    // Eg: This is the same as using MediaQuery.of(context).devicePixelRatio\n    Text(\n        'Screen Device Pixel Ratio:  ${Sizer.devicePixelRatio(context)}',\n    // Eg: This is the same as using MediaQuery.of(context).size.aspectRatio\n        style: style),\n    Text('Screen Aspect Ratio:   ${Sizer.aspectRatio(context)}',\n        style: style),\n    Text('Screen Orientation:  ${Sizer.orientation(context)}',\n        style: style),\n    Text('Screen Is Portrait:   ${Sizer.isPortrait(context)}',\n        style: style),\n    Text('Screen Is Landscape:  ${Sizer.isLandscape(context)}',\n        style: style),\n    Text('Screen Screen Size:  ${Sizer.screenSize(context)}',\n        style: style),\n    Text('Screen Is Mobile:   ${Sizer.isMobile(context)}',\n        style: style),\n    Text('Screen Is Tablet:   ${Sizer.isTablet(context)}',\n        style: style),\n    Text('Screen Is Desktop:  ${Sizer.isDesktop(context)}',\n        style: style),\n  ],\n),\n```\n\n---\n\nUse the size as a percentage of the size of the containing parent widget\n\n```dart\nContainer(\n  alignment: Alignment.centerLeft,\n  width: 300,\n  color: Colors.yellow,\n  child: LayoutBuilder(builder: (ctx, cons) {\n    return Container(\n      alignment: Alignment.centerLeft,\n      // Here the width of the widget is specified with respect to the\n      // total width of its parent widget thanks to the values received\n      // by the constraints\n      width: 40.parentW(cons),\n      color: Colors.green,\n    );\n  }),\n)\n```\n\n## Additional information\n\nAs specified this package only makes use of the MediaQuery class.\nAn external package is not used, nor is any strange or special method done, it is something that anyone could do but in a shorter way to make things easier, since I have seen many packages that make use of special methods that in the end always give errors .\nBut this package only makes use of what Flutter and Dart already provide but in an abbreviated form.\n\nFeel free to use it or tweak it, and if you don't want to mess with it you can make the request in the repository and I'll try to add the feature.\n","funding_links":[],"categories":[],"sub_categories":[],"project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Ftitoworlddev%2Fmediaquery_sizer","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Ftitoworlddev%2Fmediaquery_sizer","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Ftitoworlddev%2Fmediaquery_sizer/lists"}