endDrawer Widget in Flutter

The endDrawer is the panel displayed to the side of the body. It is generally hidden in mobile devices. We can open it by swiping in from right to left.

Constructor of Drawer class:

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

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

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.


Article Tags :

4


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