{"id":15483838,"url":"https://github.com/filledstacks/responsive_builder","last_synced_at":"2025-05-16T05:04:13.560Z","repository":{"id":41092752,"uuid":"218333196","full_name":"FilledStacks/responsive_builder","owner":"FilledStacks","description":"A set of widgets to make responsive UI building in flutter more readable","archived":false,"fork":false,"pushed_at":"2024-07-03T16:02:14.000Z","size":2487,"stargazers_count":512,"open_issues_count":24,"forks_count":82,"subscribers_count":10,"default_branch":"master","last_synced_at":"2025-05-16T05:03:58.410Z","etag":null,"topics":[],"latest_commit_sha":null,"homepage":null,"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/FilledStacks.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":"2019-10-29T16:29:20.000Z","updated_at":"2025-05-11T10:47:05.000Z","dependencies_parsed_at":"2024-11-28T20:03:31.220Z","dependency_job_id":"133961ff-d5d3-4247-a218-7ce46c0e1b7a","html_url":"https://github.com/FilledStacks/responsive_builder","commit_stats":{"total_commits":69,"total_committers":14,"mean_commits":4.928571428571429,"dds":0.3188405797101449,"last_synced_commit":"94f90251ded8d58369430e350b73fe1a9c7d6e07"},"previous_names":[],"tags_count":2,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/FilledStacks%2Fresponsive_builder","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/FilledStacks%2Fresponsive_builder/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/FilledStacks%2Fresponsive_builder/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/FilledStacks%2Fresponsive_builder/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/FilledStacks","download_url":"https://codeload.github.com/FilledStacks/responsive_builder/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":254471061,"owners_count":22076585,"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":[],"created_at":"2024-10-02T05:21:09.909Z","updated_at":"2025-05-16T05:04:13.536Z","avatar_url":"https://github.com/FilledStacks.png","language":"Dart","funding_links":[],"categories":[],"sub_categories":[],"readme":"[![Responsive UI in Flutter Banner](https://github.com/FilledStacks/responsive_builder/blob/master/responsive-builder-banner.jpeg)](https://youtu.be/neRnM_SiTfA)\n\n# Responsive Builder 💻➡️🖥➡️📱➡️⌚️\n\nThe responsive builder package contains widgets that allows you to create a readable responsive UI. The package is inspired by the [Responsive UI Flutter series](https://www.youtube.com/playlist?list=PLQQBiNtFxeyJbOkeKBe_JG36gm1V2629H) created by FilledStacks.\n\nIt aims to provide you with widgets that make it easy to build different UI's along two different Axis. Orientation x ScreenType. This means you can have a separate layout for Mobile - Landscape, Mobile - Portrait, Tablet - Landscape and Tablet-Portrait.\n\nIf you follow along with the series you will have a complete understanding of how it's built and how to use it. [Part 2](https://youtu.be/udsysUj-X4w) goes over how we build the example included in this project.\n\n![Responsive Layout Preview](./responsive_example.gif)\n\n## Installation\n\nAdd responsive_builder as dependency to your pubspec file.\n\n```\nresponsive_builder:\n```\n\n## Usage\n\nThis package provides a widget called `ResponsiveBuilder` that provides you with a builder function that returns the current `SizingInformation`. The `SizingInformation` includes the `DeviceScreenType`, `screenSize` and `localWidgetSize`. This can be used for fine grained responsive control from a view level down to per widget responsive level.\n\n### Responsive Builder\n\nThe `ResponsiveBuilder` is used as any other builder widget.\n\n```dart\n// import the package\nimport 'package:responsive_builder/responsive_builder.dart';\n\n// Use the widget\nResponsiveBuilder(\n    builder: (context, sizingInformation) {\n      // Check the sizing information here and return your UI\n          if (sizingInformation.deviceScreenType == DeviceScreenType.desktop) {\n          return Container(color:Colors.blue);\n        }\n\n        if (sizingInformation.deviceScreenType == DeviceScreenType.tablet) {\n          return Container(color:Colors.red);\n        }\n\n        if (sizingInformation.deviceScreenType == DeviceScreenType.watch) {\n          return Container(color:Colors.yellow);\n        }\n\n        return Container(color:Colors.purple);\n      },\n    },\n  );\n}\n```\n\nThis will return different colour containers depending on which device it's being shown on. A simple way to test this is to either run your code on Flutter web and resize the window or add the [device_preview](https://pub.dev/packages/device_preview) package and view on different devices.\n\n## Orientation Layout Builder\n\nThis widget can be seen as a duplicate of the `OrientationBuilder` that comes with Flutter, but the point of this library is to help you produce a readable responsive UI code base. As mentioned in the [follow along tutorial](https://youtu.be/udsysUj-X4w) I didn't want responsive code riddled with conditionals around orientation, `MediaQuery` or Renderbox sizes. That's why I created this builder.\n\nThe usage is easy. Provide a builder function that returns a UI for each of the orientations.\n\n```dart\n// import the package\nimport 'package:responsive_builder/responsive_builder.dart';\n\n// Return a widget function per orientation\nOrientationLayoutBuilder(\n  portrait: (context) =\u003e Container(color: Colors.green),\n  landscape: (context) =\u003e Container(color: Colors.pink),\n),\n```\n\nThis will return a different coloured container when you swap orientations for your device. In a more readable manner than checking the orientation with a conditional.\n\nSometimes you want your app to stay in a certain orientation. use `mode` property in `OrientationLayoutBuilder` to enforce this.\n\n```dart\nOrientationLayoutBuilder(\n  /// default mode is 'auto'\n  mode: info.isMobile\n    ? OrientationLayoutBuilderMode.portrait\n    : OrientationLayoutBuilderMode.auto,\n  ...\n),\n```\n\n## Screen Type Layout\n\nThis widget is similar to the Orientation Layout Builder in that it takes in Widgets that are named and displayed for different screen types.\n\n```dart\n// import the package\nimport 'package:responsive_builder/responsive_builder.dart';\n\n// Construct and pass in a widget per screen type\nScreenTypeLayout(\n  mobile: Container(color:Colors.blue)\n  tablet: Container(color: Colors.yellow),\n  desktop: Container(color: Colors.red),\n  watch: Container(color: Colors.purple),\n);\n```\n\nIf you don't want to build all the widgets at once, you can use the widget builder. A widget for the right type of screen will be created only when needed.\n\n```dart\n// Construct and pass in a widget builder per screen type\nScreenTypeLayout.builder(\n  mobile: (BuildContext context) =\u003e Container(color:Colors.blue),\n  tablet: (BuildContext context) =\u003e Container(color:Colors.yellow),\n  desktop: (BuildContext context) =\u003e Container(color:Colors.red),\n  watch: (BuildContext context) =\u003e Container(color:Colors.purple),\n);\n```\n\n## Custom Screen Breakpoints\n\nIf you wish to define your own custom break points you can do so by supplying either the `ScreenTypeLayout` or `ResponsiveBuilder` widgets with a `breakpoints` argument.\n\n```dart\n// import the package\nimport 'package:responsive_builder/responsive_builder.dart';\n\n//ScreenTypeLayout with custom breakpoints supplied\nScreenTypeLayout(\n  breakpoints: ScreenBreakpoints(\n    tablet: 600,\n    desktop: 950,\n    watch: 300\n  ),\n  mobile: Container(color:Colors.blue)\n  tablet: Container(color: Colors.yellow),\n  desktop: Container(color: Colors.red),\n  watch: Container(color: Colors.purple),\n);\n```\n\nTo get a more in depth run through of this package I would highly recommend [watching this tutorial](https://youtu.be/udsysUj-X4w) where I show you how it was built and how to use it.\n\n## Global Screen Breakpoints\n\nIf you want to set the breakpoints for the responsive builders once you can call the line below before the app starts, or wherever you see fit.\n\n```dart\nvoid main() {\n  ResponsiveSizingConfig.instance.setCustomBreakpoints(\n    ScreenBreakpoints(desktop: 800, tablet: 550, watch: 200),\n  );\n  runApp(MyApp());\n}\n```\n\nThis will then reflect the screen types based on what you have set here. You can then still pass in custom break points per `ScreenTypeLayout` if you wish that will override these values for that specific `ScreenTypeLayout` builder.\n\n## Screen Type specific values\n\nSometimes you don't want to write an entire new UI just to change one value. Say for instance you want your padding on mobile to be 10, on the tablet 30 and desktop 60. Instead of re-writing UI you can use the `getValueForScreenType` function. This is a generic function that will return your value based on the screen type you're on. Take this example below.\n\n```dart\nContainer(\n  padding: EdgeInsets.all(10),\n  child: Text('Best Responsive Package'),\n)\n```\n\nWhat if you ONLY want to update the padding based on the device screen size. You could do.\n\n```dart\nvar deviceType = getDeviceType(MediaQuery.of(context).size);\nvar paddingValue = 0;\nswitch(deviceType) {\n  case DeviceScreenType.desktop:\n    paddingValue = 60;\n    break;\n  case DeviceScreenType.tablet:\n    paddingValue = 30;\n    break;\n  case DeviceScreenType.mobile:\n    paddingValue = 10;\n    break;\n}\nContainer(\n  padding: EdgeInsets.all(paddingValue),\n  child: Text('Best Responsive Package'),\n)\n```\n\nOoooorrrr, you can use shorthand for that.\n\n```dart\nContainer(\n  padding: EdgeInsets.all(getValueForScreenType\u003cdouble\u003e(\n                context: context,\n                mobile: 10,\n                tablet: 30,\n                desktop: 60,\n              )),\n  child: Text('Best Responsive Package'),\n)\n```\n\nIt will return the value you give it for the DeviceScreen you're viewing the app on. For instance you want to hide a widget on mobile and not on tablet?\n\n```dart\ngetValueForScreenType\u003cbool\u003e(\n    context: context,\n    mobile: false,\n    tablet: true,\n  ) ? MyWidget() : Container()\n```\n\nThat will return true on tablet devices and false on mobile.\n\n## Responsive Sizing\n\nIn addition to providing specific layouts per device type there's also the requirement to size items based on the screen width or height. To use this functionality we added some responsive extensions. To use this wrap your Material or Cupertino App with the `ResponsiveApp` widget. \n\n```dart\nResponsiveApp(\n  builder: (context) =\u003e MaterialApp(\n    ...\n  )\n)\n```\n\nThis is required to use the following functionality. \n\n### Responsive Sizing\n\nTo use the responsive sizing all you need to do is the following. \n\n```dart\nimport 'package:responsive_builder/responsive_builder.dart';\n\nSizedBox(height: 30.screenHeight); // Or sh for shorthand\nText('respond to width', style: TextStyle(fontSize: 10.sw));\n```\n\nUse the number you want as the percentage and call the `screenHeight` or `screenWidth` extension. These also have shorthand extensions `sh` and `sw`.\n\n## Contribution\n\n1. Fork it!\n2. Create your feature branch: `git checkout -b my-new-feature`\n3. Commit your changes: `git commit -am 'Add some feature'`\n4. Push to the branch: `git push origin my-new-feature`\n5. Submit a pull request.\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Ffilledstacks%2Fresponsive_builder","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Ffilledstacks%2Fresponsive_builder","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Ffilledstacks%2Fresponsive_builder/lists"}