What is the endDrawer widget in Flutter?

· 4 min read
What is the endDrawer widget in Flutter?
What is the endDrawer widget in Flutter?

The endDrawer is the panel that is displayed to the side of the body (Scaffold Widget). So, in this article, we will see what is the endDrawer widget in Flutter.

What is the endDrawer widget in Flutter?

We can open this hidden widget by swiping in from right to left. We can also customize it to open the on-press of an icon or a button. This widget is similar to the already Drawer widget in a flutter. The difference is Drawer by default opens from left-to-right and the endDrawer by default opens from right-to-left. However, we can use the textDirection property to change the direction.

Properties of endDrawer :

  • child: This property takes in a widget as a parameter to show below the endDrawer widget in the tree.
  • hashCode: This property takes an int as the parameter. The hash code represents the state of the object that affects 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 as the parameter to create the semantic label. When the drawer is opened and closed accessibility frameworks use this property to announce screen transitions.

Implementation with Example:

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 Example',
      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: const Text("Flutter Agency")
,
        backgroundColor: Colors.green,
      ),
      endDrawer: Drawer(
        child: ListView.builder(
          itemBuilder: (
            BuildContext context,int index){
          return ListTile(
            leading: const Icon(Icons.list),
            title: Text("Item $index"),
            trailing: const Icon(Icons.done),
          );
        }),
        //elevation: 20.0,
        //semanticLabel: 'endDrawer',
      ),
    );
  }
}

So, we created a Scaffold that contains an AppBar and Drawer. After that, we added the endDrawer in our app. Later we used ListView.builder to build the list of items. At last, we created a list of items as shown above in the code. Now when you will run the app, you will see the following output.

 

 

Conclusion:

Thanks for being with us on a Flutter Journey!

So, in this article, we have seen what is the endDrawer widget in Flutter. Also, feel free to comment and provide any other suggestions regarding Flutter tips & tricks.

Flutter Agency is our portal Platform dedicated to Flutter Technology and Flutter Developers. The portal is full of cool resources from Flutter like Flutter Widget GuideFlutter ProjectsCode libs and etc.

Flutter Agency is one of the most popular online portals dedicated to Flutter Technology. Daily thousands of unique visitors come to this portal to enhance their knowledge of Flutter.

Leave a Reply