endDrawer Widget in Flutter

The endDrawer is the panel displayed to the side of the body (Scaffold Widget). It is generally hidden in mobile devices. We can open it by swiping in from right to left, or we can customise it to open on-press of an icon or a button. This widget is similar to the already present Drawer widget in flutter except for the fact the Drawer by default open from left-to-right and the endDrawer by default opens from right-to-left. However, this direction can be changed by using textDirection property. 

Constructor of Drawer class:

Drawer({Key key,
double elevation, 
Widget child, 
String semanticLabel})

Properties of endDrawer :

• child: This property takes in a widget as a parameter to show below endDrawer widget in the tree.
• hashCode: This property takes an int as the parameter. The hash code represents the state of the object that effects operator== comparison.
• elevation: This property takes in a double value as a parameter to control the z-coordinate at which to place this drawer relative to its parent.
• semanticLabel: This property takes in a string value a the parameter to create the semantic label of the dialog used by accessibility frameworks to announce screen transitions when the drawer is opened and closed.

Implementation with Example:

main.dart

Dart

import 'package:flutter/material.dart';

void main() {
  runApp(MyApp());
}
class MyApp extends StatelessWidget {

  // This widget is the
  // root of your application.
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Demo',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: MyHomePage(),
      debugShowCheckedModeBanner: false,
    );
  }
}

class MyHomePage extends StatefulWidget {
  @override
  _MyHomePageState createState() => _MyHomePageState();
}
class _MyHomePageState extends State<MyHomePage> {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title:Text("GeeksforGeeks")
,
        backgroundColor: Colors.green,
      ),
      endDrawer: Drawer(
        child: ListView.builder(
          itemBuilder: (
            BuildContext context,int index){
          return ListTile(
            leading:Icon(Icons.list),
            title: Text("GFG item $index"),
            trailing: Icon(Icons.done),
          );
        }),
        //elevation: 20.0,
        //semanticLabel: 'endDrawer',
      ),
    );
  }
}

Explanation:

• We create a Scaffold that contains an AppBar and Drawer.
• Let’s add the endDrawer in our app. Child of Drawer is ListView.builder to build the list of items.
• Create a List of items as shown above in the code.
• Run the app and see the output.

Output: