Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/fluttercommunity/responsive_scaffold
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
https://github.com/fluttercommunity/responsive_scaffold
flutter material material-design responsive scaffold
Last synced: 3 days ago
JSON representation
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
- Host: GitHub
- URL: https://github.com/fluttercommunity/responsive_scaffold
- Owner: fluttercommunity
- License: mit
- Created: 2019-05-24T18:17:37.000Z (over 5 years ago)
- Default Branch: master
- Last Pushed: 2021-09-27T18:16:56.000Z (over 3 years ago)
- Last Synced: 2025-02-09T16:08:52.613Z (10 days ago)
- Topics: flutter, material, material-design, responsive, scaffold
- Language: Dart
- Homepage: https://fluttercommunity.github.io/responsive_scaffold/
- Size: 17.9 MB
- Stars: 361
- Watchers: 10
- Forks: 44
- Open Issues: 25
-
Metadata Files:
- Readme: README.md
- Changelog: CHANGELOG.md
- License: LICENSE
Awesome Lists containing this project
README
[](https://github.com/fluttercommunity/community)
[](https://www.buymeacoffee.com/rodydavis)
[](https://www.paypal.com/cgi-bin/webscr?cmd=_s-xclick&hosted_button_id=WSH3GVC49GNNJ)
[](https://pub.dartlang.org/packages/responsive_scaffold)
# responsive_scaffold
View the online demo [here](https://fluttercommunity.github.io/responsive_scaffold/)!
On mobile it shows a list and pushes to details and on tablet it shows the List and the selected item.
Online Demo: https://fluttercommunity.github.io/responsive_scaffold/
## Getting Started
### 3 Column Layout
[example](https://github.com/fluttercommunity/responsive_scaffold/tree/dev/lib/templates/3-column)
### Responsive Layout
Follows Material Design Layout [Docs](https://material.io/design/layout/responsive-layout-grid.html#grid-behavior).
Here is a demo on various sizes.
#### Example
``` dart
import 'package:flutter/material.dart';
import 'package:responsive_scaffold/responsive_scaffold.dart';
class LayoutExample extends StatelessWidget {
@override
Widget build(BuildContext context) {
return ResponsiveScaffold(
title: Text('Responsive Layout Example'),
drawer: ListView(
children: [
ListTile(
leading: Icon(Icons.settings),
title: Text('Settings Page'),
),
ListTile(
leading: Icon(Icons.info),
title: Text('Info Page'),
),
ListTile(
leading: Icon(Icons.library_books),
title: Text('Library Page'),
),
ListTile(
leading: Icon(Icons.help),
title: Text('Help Page'),
),
],
),
endIcon: Icons.filter_list,
endDrawer: ListView(
children: [
ListTile(
leading: Icon(Icons.filter_list),
title: Text('Filter List'),
subtitle: Text('Hide and show items'),
trailing: Switch(
value: true,
onChanged: (val) {},
),
),
ListTile(
leading: Icon(Icons.image_aspect_ratio),
title: Text('Size Settings'),
subtitle: Text('Change size of images'),
),
ListTile(
title: Slider(
value: 0.5,
onChanged: (val) {},
),
),
ListTile(
leading: Icon(Icons.sort_by_alpha),
title: Text('Sort List'),
subtitle: Text('Change layout behavior'),
trailing: Switch(
value: false,
onChanged: (val) {},
),
),
],
),
trailing: IconButton(
icon: Icon(Icons.search),
onPressed: () {},
),
body: Center(
child: RaisedButton(
child: Text('Close'),
onPressed: () {
Navigator.pop(context);
},
),
),
floatingActionButton: FloatingActionButton(
child: Icon(Icons.add),
backgroundColor: Theme.of(context).accentColor,
onPressed: () {},
),
);
}
}
```
### Responsive List
* You can use this in two modes `ResponsiveListScaffold` and `ResponsiveListScaffold.builder`.
* On Mobile the ListView will push to the details screen
* On Tablet it will show a Master Detail View.
* You can add additional Slivers to the Scrollview and the AppBar is optional.
##### Example
``` dart
import 'package:flutter/material.dart';
import 'package:responsive_scaffold/responsive_scaffold.dart';
void main() => runApp(MyApp());
class MyApp extends StatefulWidget {
@override
_MyAppState createState() => _MyAppState();
}
class _MyAppState extends State {
var _scaffoldKey = new GlobalKey();
@override
Widget build(BuildContext context) {
return MaterialApp(
home: ResponsiveListScaffold.builder(
scaffoldKey: _scaffoldKey,
detailBuilder: (BuildContext context, int index, bool tablet) {
return DetailsScreen(
// appBar: AppBar(
// elevation: 0.0,
// title: Text("Details"),
// actions: [
// IconButton(
// icon: Icon(Icons.share),
// onPressed: () {},
// ),
// IconButton(
// icon: Icon(Icons.delete),
// onPressed: () {
// if (!tablet) Navigator.of(context).pop();
// },
// ),
// ],
// ),
body: Scaffold(
appBar: AppBar(
elevation: 0.0,
title: Text("Details"),
automaticallyImplyLeading: !tablet,
actions: [
IconButton(
icon: Icon(Icons.share),
onPressed: () {},
),
IconButton(
icon: Icon(Icons.delete),
onPressed: () {
if (!tablet) Navigator.of(context).pop();
},
),
],
),
bottomNavigationBar: BottomAppBar(
elevation: 0.0,
child: Container(
child: IconButton(
icon: Icon(Icons.share),
onPressed: () {},
),
),
),
body: Container(
child: Center(
child: Text("Item: $index"),
),
),
),
);
},
nullItems: Center(child: CircularProgressIndicator()),
emptyItems: Center(child: Text("No Items Found")),
slivers: [
SliverAppBar(
title: Text("App Bar"),
),
],
itemCount: 100,
itemBuilder: (BuildContext context, int index) {
return ListTile(
leading: Text(index.toString()),
);
},
bottomNavigationBar: BottomAppBar(
elevation: 0.0,
child: Container(
child: IconButton(
icon: Icon(Icons.share),
onPressed: () {},
),
),
),
floatingActionButton: FloatingActionButton(
child: Icon(Icons.add),
onPressed: () {
_scaffoldKey.currentState.showSnackBar(SnackBar(
content: Text("Snackbar!"),
));
},
),
),
);
}
}
```