How to use Sidebar in Flutter Android Application

In the Flutter application, we need to use Sidebar. Because every application has these two primary option Sidebar (Drawers) & tabs. The sidebar provides a handy alternative.

When we place a sidebar in the application, with the help of this we can move easily from one page to another page, and here we can create a shortcut.

For use we need to follow some steps, which we are providing below:

1.Create a Scaffold in your Application.
2. Add a Drawer.
3. Create List of options.




1. Create Scaffold In Application

When we first write the code to create the application, we have to take the scaffold widget.

Scaffold(
drawer: // Add a Drawer here in the next step.
);

2. Add Drawer

Presently include a drawer to the Framework. A drawer can be any widget, but it’s regularly best to utilize the Drawer widget from the material library, which adheres to the Material Design spec.


Scaffold(
drawer: Drawer(
child: // Populate the Drawer in the next step.
)
);

3. Include all item which need.

Populate the ListView with a DrawerHeader and two ListTile widgets. For more data on working with Records, see the list formulas.


Drawer(
// Add a ListView to the drawer. This ensures the user can scroll
// through the options in the drawer if there isn't enough vertical
// space to fit everything.
child: ListView(
// Important: Remove any padding from the ListView.
padding: EdgeInsets.zero,
children: <Widget>[
DrawerHeader(
child: Container(
child: Row(
children: [
Container(
child: Container(
decoration: BoxDecoration(
color: Colors.blue,
shape: BoxShape.circle,
),
child:IconButton(
icon: Icon(Icons.search,color: Colors.white,size: 30,),
onPressed: () {}
),
),
),
Container(
child: Text("FLUTTER FACT",style: TextStyle(color: Colors.white,fontSize: 30),),
),
],
),
),
decoration: BoxDecoration(
color: Colors.blue,
),

),
ListTile(
leading: Icon(Icons.bookmark),
title: Text('My Bookmark'),
),
ListTile(
leading: Icon(Icons.feedback),
title: Text('Messages'),
),
],
),
),

Working Example of Drawer for Flutter Android Application

import 'package:flutter/animation.dart';
import 'package:flutter/material.dart';

void main() {
runApp(DrawerScreen());
}

class DrawerScreen extends StatefulWidget {
@override
_DrawerScreenState createState() => _DrawerScreenState();
}

class _DrawerScreenState extends State<DrawerScreen> {
@override
Widget build(BuildContext context) {
return MaterialApp(
home: Scaffold(
appBar: AppBar(
title: Text("Drawer"),

),
drawer: Drawer(
// Add a ListView to the drawer. This ensures the user can scroll
// through the options in the drawer if there isn't enough vertical
// space to fit everything.
child: ListView(
// Important: Remove any padding from the ListView.
padding: EdgeInsets.zero,
children: <Widget>[
DrawerHeader(
child: Container(
child: Row(
children: [
Container(
child: Container(
decoration: BoxDecoration(
color: Colors.blue,
shape: BoxShape.circle,
),
child: IconButton(
icon: Icon(Icons.search,color: Colors.white,size: 30,),
onPressed: () {}
),
),
),
Container(
child: Text("FLUTTER FACT",style: TextStyle(color: Colors.white,fontSize: 30),),
),
],
),
),
decoration: BoxDecoration(
color: Colors.blue,
),

),
ListTile(
leading: Icon(Icons.bookmark),
title: Text('My Bookmark'),
),
ListTile(
leading: Icon(Icons.feedback),
title: Text('Messages'),
),
ListTile(
leading: Icon(Icons.rate_review),
title: Text('Rating'),
),
ListTile(
leading: Icon(Icons.contact_mail),
title: Text('Contact Us'),
),
ListTile(
leading: Icon(Icons.settings),
title: Text('Contact Us'),
),
ListTile(
leading: Icon(Icons.info),
title: Text('About Us'),
),
Container(
height: 1,
color: Colors.grey,
),
ListTile(
leading: Icon(Icons.group_add),
title: Text('Invite to Friends'),
),
],
),
),
body: Center(
child: Container(
child: Text("Flutter Fact"),
),
),
),
);
}
}



Output:

Find Related: flutter navigation drawer with fragments, flutter custom drawer, flutter popup menu, flutter drawer without appbar, flutter drawer header, flutter drawer icon, flutter drawer ui, flutter bottom navigation bar, Page navigation
Previous
Next Post »