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

filter_none

edit
close

play_arrow

link
brightness_4
code

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',
      ),
    );
  }
}

chevron_right


 
 

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:

 

enddrawer wiget in flutterend

 




My Personal Notes arrow_drop_up

Check out this Author's contributed articles.

If you like GeeksforGeeks and would like to contribute, you can also write an article using contribute.geeksforgeeks.org or mail your article to contribute@geeksforgeeks.org. See your article appearing on the GeeksforGeeks main page and help other Geeks.

Please Improve this article if you find anything incorrect by clicking on the "Improve Article" button below.



Improved By : ankit_kumar_

Article Tags :

5


Please write to us at contribute@geeksforgeeks.org to report any issue with the above content.