Here’s a powerful way of how you can use the Responsive Scaffold in Flutter. This package was designed by the flutter community team, as it allows Desktop, Tablet, and mobile view more flexible and responsive.
How does Responsive Scaffold in Flutter work? On mobile, it simply shows the list and pushes to details, then on a tablet device it shows the List and the selected item, and for those who use the web app, It shows the full detail list both on the right and left. Here’s an example below.
These Layouts follows the Material Design guideline.
You’ll notice that the red border line indicates the size of the scree, i.e Shows the Desktop mode, Tablet mode, and mobile mode. Isn’t that amazing? Yes, It is.
We’ll be showing the three types of example and ways you can use the ResponsiveScaffold to create a beautiful app that would look great on all platforms. Here are the list;
- Responsive Layout
- Responsive List
- Multi-Column Layout
Responsive Layout
Here’s the code below, and usage.
import 'package:flutter/material.dart';
import 'package:responsive_scaffold/responsive_scaffold.dart';
void main() {
runApp( new MaterialApp(
debugShowCheckedModeBanner: false,
home:
Homepage(),
));
}
class Homepage extends StatelessWidget {
@override
Widget build(BuildContext context) {
return ResponsiveScaffold(
title: Text('Responsive Title'),
//The left drawer
drawer: ListView(
children: <Widget>[
ListTile(
leading: Icon(Icons.local_movies),
title: Text('Movies'),
),
ListTile(
leading: Icon(Icons.dashboard),
title: Text('Visit Dashboard'),
),
ListTile(
leading: Icon(Icons.refresh),
title: Text('Refresh'),
),
ListTile(
leading: Icon(Icons.call),
title: Text('Contact Us'),
),
],
),
endIcon: Icons.filter_list,
endDrawer: ListView(
children: <Widget>[
ListTile(
leading: Icon(Icons.email),
title: Text('Our eMail'),
subtitle: Text('See Us Here'),
trailing: Switch(
value: true,
onChanged: (val) {},
),
),
ListTile(
leading: Icon(Icons.question_answer),
title: Text('More Questions'),
subtitle: Text('Ask Us anything you wants'),
),
ListTile(
title: Slider(
value: 0.75,
onChanged: (val) {},
),
),
ListTile(
leading: Icon(Icons.chrome_reader_mode),
title: Text('Browse'),
subtitle: Text('Visit us today'),
trailing: Switch(
value: false,
onChanged: (val) {},
),
),
],
),
trailing: IconButton(
icon: Icon(Icons.search),
onPressed: () {},
),
body: Center(
child: RaisedButton(
child: Text('Go Back'),
onPressed: () {
Navigator.pop(context);
},
),
),
floatingActionButton: FloatingActionButton.extended(
backgroundColor: Theme.of(context).accentColor,
onPressed: () {}, label: Text("Responsive"),
),
);
}
}Output/Result (Responsive Layout)
Responsive List
- On Tablet it will show a Master-Detail View.
- You can add additional Slivers to the Scrollview and the AppBar is optional.
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<MyApp> {
var _scaffoldKey = new GlobalKey<ScaffoldState>();
@override
Widget build(BuildContext context) {
return MaterialApp(
home: ResponsiveListScaffold.builder(
scaffoldKey: _scaffoldKey,
detailBuilder: (BuildContext context, int index, bool tablet) {
return DetailsScreen(
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: <Widget>[
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!"),
));
},
),
),
);
}
}I hope you can use the ResponsiveScaffold package to create a better responsive application with Flutter.
I hope this helps you understand, and give a bit of knowledge about the Responsive Scaffold.
Have Any Flutter problem with no solution yet? Ask the FlutterFix community today.
