{"id":13790155,"url":"https://github.com/fluttercommunity/responsive_scaffold","last_synced_at":"2025-04-05T11:10:06.027Z","repository":{"id":47226273,"uuid":"188468351","full_name":"fluttercommunity/responsive_scaffold","owner":"fluttercommunity","description":"Responsive Scaffold - On mobile it shows a list and pushes to details and on tablet it shows the List and the selected item. Maintainer: @rodydavis","archived":false,"fork":false,"pushed_at":"2021-09-27T18:16:56.000Z","size":18730,"stargazers_count":360,"open_issues_count":25,"forks_count":44,"subscribers_count":9,"default_branch":"master","last_synced_at":"2025-03-29T10:08:08.229Z","etag":null,"topics":["flutter","material","material-design","responsive","scaffold"],"latest_commit_sha":null,"homepage":"https://fluttercommunity.github.io/responsive_scaffold/","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/fluttercommunity.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}},"created_at":"2019-05-24T18:17:37.000Z","updated_at":"2025-03-05T00:36:59.000Z","dependencies_parsed_at":"2022-09-10T03:41:14.373Z","dependency_job_id":null,"html_url":"https://github.com/fluttercommunity/responsive_scaffold","commit_stats":null,"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/fluttercommunity%2Fresponsive_scaffold","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/fluttercommunity%2Fresponsive_scaffold/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/fluttercommunity%2Fresponsive_scaffold/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/fluttercommunity%2Fresponsive_scaffold/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/fluttercommunity","download_url":"https://codeload.github.com/fluttercommunity/responsive_scaffold/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":247325693,"owners_count":20920714,"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":["flutter","material","material-design","responsive","scaffold"],"created_at":"2024-08-03T22:00:37.801Z","updated_at":"2025-04-05T11:10:06.006Z","avatar_url":"https://github.com/fluttercommunity.png","language":"Dart","funding_links":["https://www.buymeacoffee.com/rodydavis","https://www.paypal.com/cgi-bin/webscr?cmd=_s-xclick\u0026hosted_button_id=WSH3GVC49GNNJ"],"categories":["Packages"],"sub_categories":[],"readme":"[![Flutter Community: responsive_scaffold](https://fluttercommunity.dev/_github/header/responsive_scaffold)](https://github.com/fluttercommunity/community)\n\n[![Buy Me A Coffee](https://img.shields.io/badge/Donate-Buy%20Me%20A%20Coffee-yellow.svg)](https://www.buymeacoffee.com/rodydavis)\n[![Donate](https://img.shields.io/badge/Donate-PayPal-green.svg)](https://www.paypal.com/cgi-bin/webscr?cmd=_s-xclick\u0026hosted_button_id=WSH3GVC49GNNJ)\n[![pub package](https://img.shields.io/pub/v/responsive_scaffold.svg)](https://pub.dartlang.org/packages/responsive_scaffold)\n![github pages](https://github.com/fluttercommunity/responsive_scaffold/workflows/github%20pages/badge.svg)\n\n# responsive_scaffold\n\nView the online demo [here](https://fluttercommunity.github.io/responsive_scaffold/)!\n\nOn mobile it shows a list and pushes to details and on tablet it shows the List and the selected item.\n\nOnline Demo: https://fluttercommunity.github.io/responsive_scaffold/\n\n## Getting Started\n\n### 3 Column Layout\n\n[example](https://github.com/fluttercommunity/responsive_scaffold/tree/dev/lib/templates/3-column)\n\n### Responsive Layout\n\nFollows Material Design Layout [Docs](https://material.io/design/layout/responsive-layout-grid.html#grid-behavior). \n\n![md-layout](https://github.com/fluttercommunity/responsive_scaffold/blob/master/doc/screenshots/layout/md-layout.gif)\n\nHere is a demo on various sizes.\n\n![image](https://github.com/fluttercommunity/responsive_scaffold/blob/master/doc/screenshots/layout/1.png)\n![image](https://github.com/fluttercommunity/responsive_scaffold/blob/master/doc/screenshots/layout/2.png)\n![image](https://github.com/fluttercommunity/responsive_scaffold/blob/master/doc/screenshots/layout/6.png)\n![image](https://github.com/fluttercommunity/responsive_scaffold/blob/master/doc/screenshots/layout/3.png)\n![image](https://github.com/fluttercommunity/responsive_scaffold/blob/master/doc/screenshots/layout/4.png)\n![image](https://github.com/fluttercommunity/responsive_scaffold/blob/master/doc/screenshots/layout/5.png)\n\n\n#### Example\n\n``` dart \nimport 'package:flutter/material.dart';\nimport 'package:responsive_scaffold/responsive_scaffold.dart';\n\nclass LayoutExample extends StatelessWidget {\n  @override\n  Widget build(BuildContext context) {\n    return ResponsiveScaffold(\n      title: Text('Responsive Layout Example'),\n      drawer: ListView(\n        children: \u003cWidget\u003e[\n          ListTile(\n            leading: Icon(Icons.settings),\n            title: Text('Settings Page'),\n          ),\n          ListTile(\n            leading: Icon(Icons.info),\n            title: Text('Info Page'),\n          ),\n          ListTile(\n            leading: Icon(Icons.library_books),\n            title: Text('Library Page'),\n          ),\n          ListTile(\n            leading: Icon(Icons.help),\n            title: Text('Help Page'),\n          ),\n        ],\n      ),\n      endIcon: Icons.filter_list,\n      endDrawer: ListView(\n        children: \u003cWidget\u003e[\n          ListTile(\n            leading: Icon(Icons.filter_list),\n            title: Text('Filter List'),\n            subtitle: Text('Hide and show items'),\n            trailing: Switch(\n              value: true,\n              onChanged: (val) {},\n            ),\n          ),\n          ListTile(\n            leading: Icon(Icons.image_aspect_ratio),\n            title: Text('Size Settings'),\n            subtitle: Text('Change size of images'),\n          ),\n          ListTile(\n            title: Slider(\n              value: 0.5,\n              onChanged: (val) {},\n            ),\n          ),\n          ListTile(\n            leading: Icon(Icons.sort_by_alpha),\n            title: Text('Sort List'),\n            subtitle: Text('Change layout behavior'),\n            trailing: Switch(\n              value: false,\n              onChanged: (val) {},\n            ),\n          ),\n        ],\n      ),\n      trailing: IconButton(\n        icon: Icon(Icons.search),\n        onPressed: () {},\n      ),\n      body: Center(\n        child: RaisedButton(\n          child: Text('Close'),\n          onPressed: () {\n            Navigator.pop(context);\n          },\n        ),\n      ),\n      floatingActionButton: FloatingActionButton(\n        child: Icon(Icons.add),\n        backgroundColor: Theme.of(context).accentColor,\n        onPressed: () {},\n      ),\n    );\n  }\n}\n\n\n```\n\n### Responsive List\n\n* You can use this in two modes `ResponsiveListScaffold` and `ResponsiveListScaffold.builder`.\n* On Mobile the ListView will push to the details screen\n\n![tablet](https://github.com/fluttercommunity/responsive_scaffold/blob/master/doc/screenshots/tablet.png)\n![push](https://github.com/fluttercommunity/responsive_scaffold/blob/master/doc/screenshots/push.png)\n![mobile](https://github.com/fluttercommunity/responsive_scaffold/blob/master/doc/screenshots/mobile.png)\n\n* On Tablet it will show a Master Detail View.\n* You can add additional Slivers to the Scrollview and the AppBar is optional.\n\n\n##### Example\n\n``` dart \nimport 'package:flutter/material.dart';\n\nimport 'package:responsive_scaffold/responsive_scaffold.dart';\n\nvoid main() =\u003e runApp(MyApp());\n\nclass MyApp extends StatefulWidget {\n  @override\n  _MyAppState createState() =\u003e _MyAppState();\n}\n\nclass _MyAppState extends State\u003cMyApp\u003e {\n  var _scaffoldKey = new GlobalKey\u003cScaffoldState\u003e();\n\n  @override\n  Widget build(BuildContext context) {\n    return MaterialApp(\n      home: ResponsiveListScaffold.builder(\n        scaffoldKey: _scaffoldKey,\n        detailBuilder: (BuildContext context, int index, bool tablet) {\n          return DetailsScreen(\n            // appBar: AppBar(\n            //   elevation: 0.0,\n            //   title: Text(\"Details\"),\n            //   actions: [\n            //     IconButton(\n            //       icon: Icon(Icons.share),\n            //       onPressed: () {},\n            //     ),\n            //     IconButton(\n            //       icon: Icon(Icons.delete),\n            //       onPressed: () {\n            //         if (!tablet) Navigator.of(context).pop();\n            //       },\n            //     ),\n            //   ],\n            // ),\n            body: Scaffold(\n              appBar: AppBar(\n                elevation: 0.0,\n                title: Text(\"Details\"),\n                automaticallyImplyLeading: !tablet,\n                actions: [\n                  IconButton(\n                    icon: Icon(Icons.share),\n                    onPressed: () {},\n                  ),\n                  IconButton(\n                    icon: Icon(Icons.delete),\n                    onPressed: () {\n                      if (!tablet) Navigator.of(context).pop();\n                    },\n                  ),\n                ],\n              ),\n              bottomNavigationBar: BottomAppBar(\n                elevation: 0.0,\n                child: Container(\n                  child: IconButton(\n                    icon: Icon(Icons.share),\n                    onPressed: () {},\n                  ),\n                ),\n              ),\n              body: Container(\n                child: Center(\n                  child: Text(\"Item: $index\"),\n                ),\n              ),\n            ),\n          );\n        },\n        nullItems: Center(child: CircularProgressIndicator()),\n        emptyItems: Center(child: Text(\"No Items Found\")),\n        slivers: \u003cWidget\u003e[\n          SliverAppBar(\n            title: Text(\"App Bar\"),\n          ),\n        ],\n        itemCount: 100,\n        itemBuilder: (BuildContext context, int index) {\n          return ListTile(\n            leading: Text(index.toString()),\n          );\n        },\n        bottomNavigationBar: BottomAppBar(\n          elevation: 0.0,\n          child: Container(\n            child: IconButton(\n              icon: Icon(Icons.share),\n              onPressed: () {},\n            ),\n          ),\n        ),\n        floatingActionButton: FloatingActionButton(\n          child: Icon(Icons.add),\n          onPressed: () {\n            _scaffoldKey.currentState.showSnackBar(SnackBar(\n              content: Text(\"Snackbar!\"),\n            ));\n          },\n        ),\n      ),\n    );\n  }\n}\n\n```\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Ffluttercommunity%2Fresponsive_scaffold","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Ffluttercommunity%2Fresponsive_scaffold","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Ffluttercommunity%2Fresponsive_scaffold/lists"}