{"id":15293146,"url":"https://github.com/marchdev-tk/responsive_layout_builder","last_synced_at":"2025-04-13T12:29:10.632Z","repository":{"id":56838143,"uuid":"240217954","full_name":"marchdev-tk/responsive_layout_builder","owner":"marchdev-tk","description":"Flutter package for building responsive layout based on screen sizes and orientation. It could be wristwatch, small/medium/large mobile, small/large tablet or desktop.","archived":false,"fork":false,"pushed_at":"2021-03-04T12:56:54.000Z","size":74,"stargazers_count":7,"open_issues_count":0,"forks_count":1,"subscribers_count":0,"default_branch":"master","last_synced_at":"2025-03-27T03:34:44.721Z","etag":null,"topics":["dart","dart2","dartlang","desktop","flutter","flutter-package","flutter-plugin","layout","orientation","responsive","responsive-layout","tablet","wristwatch"],"latest_commit_sha":null,"homepage":"","language":"Dart","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"bsd-3-clause","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/marchdev-tk.png","metadata":{"files":{"readme":"README.md","changelog":"CHANGELOG.md","contributing":"CONTRIBUTING.md","funding":null,"license":"LICENSE","code_of_conduct":"CODE_OF_CONDUCT.md","threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null}},"created_at":"2020-02-13T09:05:23.000Z","updated_at":"2023-10-12T03:59:00.000Z","dependencies_parsed_at":"2022-09-13T08:42:14.601Z","dependency_job_id":null,"html_url":"https://github.com/marchdev-tk/responsive_layout_builder","commit_stats":null,"previous_names":[],"tags_count":4,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/marchdev-tk%2Fresponsive_layout_builder","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/marchdev-tk%2Fresponsive_layout_builder/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/marchdev-tk%2Fresponsive_layout_builder/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/marchdev-tk%2Fresponsive_layout_builder/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/marchdev-tk","download_url":"https://codeload.github.com/marchdev-tk/responsive_layout_builder/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":248713813,"owners_count":21149784,"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":["dart","dart2","dartlang","desktop","flutter","flutter-package","flutter-plugin","layout","orientation","responsive","responsive-layout","tablet","wristwatch"],"created_at":"2024-09-30T16:39:59.735Z","updated_at":"2025-04-13T12:29:10.610Z","avatar_url":"https://github.com/marchdev-tk.png","language":"Dart","readme":"# responsive_layout_builder\n\nFlutter package for building responsive layout based on screen sizes and orientation.\nIt could be wristwatch, small/medium/large mobile, small/large tablet or desktop.\n\n## Getting Started\n\n### Widget approach\n\n`ResponsiveLayoutBuilder` could be used as usual widget builder such as `LayoutBuilder` or `OrientationBuilder`, etc.\n\n```dart\nResponsiveLayoutBuilder(\n    builder: (context, screenSize) {\n        // Use size argument to build size dependent widgets\n    },\n),\n```\n\n`size` property within `screenSize` stores `LayoutSize` which could be `watch`, `mobile`, `tablet`, `desktop` or `tv`.\n\n`mobile` property within `screenSize` stores `MobileLayoutSize` which could be `small`, `medium` or `large`.\n\n`tablet` property within `screenSize` stores `TabletLayoutSize` which could be `small` or `large`.\n\n### Functional approach\n\nFor using functional approach to retrieve current size use following:\n\n```dart\n// for getting mobile layout size \ngetMobileLayoutSize(width: MediaQuery.of(context).size.width);\n\n// for getting tablet layout size \ngetTabletLayoutSize(width: MediaQuery.of(context).size.width);\n\n// for getting screen size based on width\ngetScreenSize(width: MediaQuery.of(context).size.width);\n\n// for getting screen size based on context \ngetContextualScreenSize(context: context);\n```\n\nIf you need to specify `ScreenSizeSettings` for all above functions `sizes` argument is needed to be passed, like this:\n\n```dart\nsizes: ScreenSizeSettings(...)\n```\n\nFor `getScreenSize` and `getContextualScreenSize` could be specified also `orientation` and `defaultSize`.\n\n## TODO\n\n* Figure out how to determine TV\n* Add tests\n","funding_links":[],"categories":[],"sub_categories":[],"project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fmarchdev-tk%2Fresponsive_layout_builder","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fmarchdev-tk%2Fresponsive_layout_builder","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fmarchdev-tk%2Fresponsive_layout_builder/lists"}