{"id":13551908,"url":"https://github.com/jamesblasco/layout","last_synced_at":"2025-04-09T04:04:30.023Z","repository":{"id":38257485,"uuid":"220646209","full_name":"jamesblasco/layout","owner":"jamesblasco","description":"Flutter | Create responsive layouts for mobile, web and desktop","archived":false,"fork":false,"pushed_at":"2023-09-03T19:23:59.000Z","size":8357,"stargazers_count":750,"open_issues_count":6,"forks_count":75,"subscribers_count":13,"default_branch":"main","last_synced_at":"2025-04-02T03:01:59.066Z","etag":null,"topics":["dart","flutter","responsive","responsive-design","responsive-grid","responsive-layout"],"latest_commit_sha":null,"homepage":"https://pub.dev/packages/layout","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/jamesblasco.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}},"created_at":"2019-11-09T13:28:01.000Z","updated_at":"2025-03-25T05:56:27.000Z","dependencies_parsed_at":"2024-01-19T06:52:50.177Z","dependency_job_id":"8255b595-c050-4444-88fc-d8a61f0f7d7b","html_url":"https://github.com/jamesblasco/layout","commit_stats":null,"previous_names":[],"tags_count":7,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/jamesblasco%2Flayout","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/jamesblasco%2Flayout/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/jamesblasco%2Flayout/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/jamesblasco%2Flayout/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/jamesblasco","download_url":"https://codeload.github.com/jamesblasco/layout/tar.gz/refs/heads/main","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":247974715,"owners_count":21026742,"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","flutter","responsive","responsive-design","responsive-grid","responsive-layout"],"created_at":"2024-08-01T12:01:55.587Z","updated_at":"2025-04-09T04:04:29.998Z","avatar_url":"https://github.com/jamesblasco.png","language":"Dart","funding_links":[],"categories":["Dart"],"sub_categories":[],"readme":"\u003ca  href=\"https://pub.dev/packages/layout\"\u003e\u003cimg src=\"https://github.com/jamesblasco/layout/blob/main/layout_banner.png?raw=true\"/\u003e\u003c/a\u003e \n\n# Layout\n[![pub package](https://img.shields.io/pub/v/layout.svg)](https://pub.dev/packages/layout)  \n\n\n\u003ca  href=\"https://pub.dev/packages/layout/\"\u003e\u003cimg align=\"right\"  height=\"250px\" src=\"https://github.com/jamesblasco/layout/blob/main/layout.gif?raw=true\"/\u003e\u003c/a\u003e \n\nFollowing the Material Design Guidelines, **Layout** encourage consistency across platforms, environments, and screen sizes by using uniform elements and spacing.\n \n \n## Install\n\nFollow the instructions to install it [here](https://pub.dev/packages/layout/install)\n\n## Getting started \n\nThis package aims to provide the tools to implement a responsive layout in an easy and consistent way.\n\nIf you want to learn more in detail about layout in Material Design I recommend you the [official website](https://material.io/design/layout/understanding-layout.html#columns-gutters-and-margins). \n\nLet's get started!\n\nEverything starts with the `Layout` widget. Usually added at the top of your widget tree, but you can place it wherever you need it. \nIt uses its widget constraints to calculate its breakpoint, columns, gutters, and margins.\n\n```dart\n  @override\n  Widget build(BuildContext context) {\n    return Layout(\n      child: MaterialApp(\n      ....\n      ),\n    );\n  }\n```\n\n## Breakpoints\n\nA breakpoint is the range of predetermined screen sizes that have specific layout requirements. At a given breakpoint range, the layout adjusts to suit the screen size and orientation.\n\nEach breakpoint range determines the number of columns, and recommended margins and gutters, for each display size.\n\nBy default the breakpoints are defined as:\n - **xs**:    0 –  599\n - **sm**:  600 – 1023\n - **md**: 1024 – 1439\n - **lg**: 1440 – 1919\n - **xl**: 1920 +\n \n ```dart\n  @override\n  Widget build(BuildContext context) {\n    if(context.breakpoint \u003e LayoutBreakpoint.md)\n      return TabletView();\n    else\n      return MobileView();\n  }\n```\n\n## LayoutValues\n\nA layout value is relative to the width of the screen. This way you can define responsive variable, reuse them and apply them when needed.\n\n```dart\nfinal double padding = context.layout.value(xs: 0.0, sm: 12.0, md: 24.0, lg: 32.0, xl: 48.0);\n```\n\nThe most important layout values are the ones relative to the breakpoint. These are the most common and useful as you can define a value for different breakpoint sizes. If a breakpoint is not provided, its value will correspond to the first previous/smaller breakpoint.\n\n```dart\nfinal double padding = context.layout.value(\n     xs: 0.0,  // sm value will be like xs 0.0\n     md: 24.0, // lg value will be like md 24.0\n     xl: 48.0\n);\n```\n\nLayout values can be reused in different parts of the app with even different `Layout` widgets. For that they need to be created as\n```dart\nfinal displaySidebar = LayoutValue(xs: false, md: true);\n\nfinal horizontalMargin = LayoutValue.builder((layout) {\n    double margin = layout.width \u003e= 500 ? 24.0 : 16.0;\n    margin += 8.0 * layout.visualDensity.horizontal;\n    return EdgeInsets.symmetric(horizontal: margin);\n});\n```\nThen it can be used in any widget that has some Layout up in the tree as:\n\n```dart\nreturn Column(\n  children: [\n    Padding(\n      padding: horizontalMargin.resolve(context),\n      child:child,\n    ),\n    if(displaySidebar.resolve(context))\n      SideBar(),\n    ),\n  ],\n);\n```\n\nYou can also create values relative to the layout width like.\n```dart\nfinal displaySidebar = LayoutValue.builder((layout) =\u003e layout.width \u003e 600);\n```\n\n## Margins\nMargins are the space between content and the left and right edges of the screen.\n\n```dart\n  @override\n  Widget build(BuildContext context) {\n    return Margin(\n      child: Text('This text'),\n    );\n  }\n```\n\nMargin widths are defined as fixed values at each breakpoint range. To better adapt to the screen, the margin width can change at different breakpoints. Wider margins are more appropriate for larger screens, as they create more whitespace around the perimeter of content.\n\nBy default the margin values are the ones from the Material Design Guidelines. 16dp for screens with a width less than 720dp and 24 for bigger screens.\nYou can override these values in any moment by providing the margin param.\n\n## Fluid Margins\n\nSome times you want to have a fixed width that stays the same across screen sizes.\n\n```dart\n  @override\n  Widget build(BuildContext context) {\n    return FluidMargin(\n      child: Text('This text'),\n    );\n  }\n```\n\nFluid margins are dynamically updated to keep a fixed size of its inner child. These fixed sizes are by default the ones from the Material Design Guidelines but can also easily customizable.\n\n\n## AdaptiveBuilder\n\nA widget that allows easily to build responsive layouts\n\n```dart\n  @override\n  Widget build(BuildContext context) {\n    return AdaptiveBuilder(\n      xs: (context) =\u003e LayoutWithBottomNavigationBar(),\n      lg: (context) =\u003e LayoutWithTrailingNavigationBar(),\n    );\n  }\n```\n\nor for more complex cases\n\n```dart\n  @override\n  Widget build(BuildContext context) {\n    return  AdaptiveBuilder.builder(\n      builder: (context, layout, child) {\n        if (layout.breakpoint \u003c LayoutBreakpoint.lg) {\n          return LayoutWithBottomNavigationBar(child: child);\n        } else {\n          return LayoutWithTrailingNavigationBar(child: child);\n        }\n      },\n      child: child,\n    );\n  }\n```\n\n\n\n## Contributing\nIf you want to take the time to make this project better, you can open an new [issue](https://github.com/jamesblasco/layout/issues/new/choose), or a [pull request](https://github.com/jamesblasco/layout/compare).\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fjamesblasco%2Flayout","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fjamesblasco%2Flayout","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fjamesblasco%2Flayout/lists"}