Drawer widget and Attributes

Drawer widget and Attributes

ยท

2 min read

The Drawer widget in Flutter serves as a slide-in menu that allows navigation and access to various application features. It is commonly used to create a navigation menu in mobile applications, providing an intuitive user interface.

Key Attributes of the Drawer Widget:

  1. child (Widget):

    • Specifies the main content of the drawer. It can be any Flutter widget.
  2. elevation (double):

    • Determines the shadow intensity below the drawer.
  3. semanticLabel (String):

    • Represents the accessibility label for the drawer.
  4. backgroundColor (Color):

    • Sets the background color of the drawer.
  5. semanticLabel (String):

    • Represents the accessibility label for the drawer.

Example Usage:

import 'package:flutter/material.dart';

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: MyHomePage(),
    );
  }
}

class MyHomePage extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Drawer Widget Example'),
      ),
      body: Center(
        child: Text('Main Content'),
      ),
      drawer: Drawer(
        child: ListView(
          padding: EdgeInsets.zero,
          children: <Widget>[
            DrawerHeader(
              decoration: BoxDecoration(
                color: Colors.blue,
              ),
              child: Text('Drawer Header'),
            ),
            ListTile(
              title: Text('Item 1'),
              onTap: () {
                // Handle item 1 click
              },
            ),
            ListTile(
              title: Text('Item 2'),
              onTap: () {
                // Handle item 2 click
              },
            ),
          ],
        ),
      ),
    );
  }
}

In this example, we have a simple Flutter app with a Drawer widget. The drawer attribute of the Scaffold widget is set to a Drawer, which contains a header and two list items. The Drawer slides in from the left when triggered, providing a clean and organized navigation menu for the user.

Did you find this article valuable?

Support Vinit Mepani (Flutter Developer) by becoming a sponsor. Any amount is appreciated!

ย