❖ How to Show Dialogs, Snackbars, Drawers and Bottom Navigation in Flutter

❖ Welcome to Param Classes!

When developing a mobile application, you need more than buttons, text fields and images. A good application should also display messages, confirmation boxes and easy navigation options.

For example:

• When a user deletes a record, the app should ask for confirmation.

• When a user saves information, the app should display a success message.

• When a user opens the menu, the app should show navigation options.

• When a user taps Home, Profile or Settings, the app should display the selected section.

Flutter provides ready-to-use widgets for these tasks. You can use AlertDialog, SnackBar, Drawer and BottomNavigationBar to create interactive mobile application interfaces.

In this practical tutorial by Param Classes, you will learn how to use these widgets with simple explanations and complete code examples.

✦ 1. What Is AlertDialog in Flutter?

An AlertDialog is a small popup window that appears over the current screen. It is commonly used to display important information or ask users to confirm an action.

Common examples include:

• Confirm before deleting data.

• Show a logout confirmation.

• Display important information.

• Ask users whether they want to continue.

Flutter provides the AlertDialog widget for this purpose.

✦ Basic AlertDialog Example

import 'package:flutter/material.dart';

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

class MyApp extends StatelessWidget {
  const MyApp({super.key});

  @override
  Widget build(BuildContext context) {
    return const MaterialApp(
      debugShowCheckedModeBanner: false,
      home: DialogPage(),
    );
  }
}

class DialogPage extends StatelessWidget {
  const DialogPage({super.key});

  void showMyDialog(BuildContext context) {
    showDialog(
      context: context,
      builder: (context) {
        return AlertDialog(
          title: const Text("Welcome"),
          content: const Text(
            "Welcome to Flutter App Development!",
          ),
          actions: [
            TextButton(
              onPressed: () {
                Navigator.pop(context);
              },
              child: const Text("OK"),
            ),
          ],
        );
      },
    );
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: const Text("AlertDialog Example"),
      ),
      body: Center(
        child: ElevatedButton(
          onPressed: () {
            showMyDialog(context);
          },
          child: const Text("Show Dialog"),
        ),
      ),
    );
  }
}

✦ Understanding the Code

• showDialog() opens the popup.

• context identifies the current widget location.

• builder creates the dialog interface.

• AlertDialog displays the popup.

• title defines the dialog heading.

• content displays the message.

• actions contains buttons.

• Navigator.pop(context) closes the dialog.

When the user taps Show Dialog, the popup appears. Tapping OK closes it.

✦ 2. Create a Confirmation Dialog

In real-world applications, confirmation dialogs are useful when performing important actions.

For example, before deleting a student record, you can ask the user to confirm the operation.

✦ Delete Confirmation Example

void showDeleteDialog(BuildContext context) {
  showDialog(
    context: context,
    builder: (context) {
      return AlertDialog(
        title: const Text("Delete Record"),
        content: const Text(
          "Are you sure you want to delete this record?",
        ),
        actions: [
          TextButton(
            onPressed: () {
              Navigator.pop(context);
            },
            child: const Text("Cancel"),
          ),
          ElevatedButton(
            onPressed: () {
              Navigator.pop(context);
              print("Record Deleted");
            },
            child: const Text("Delete"),
          ),
        ],
      );
    },
  );
}

Explanation:

1. The dialog displays a confirmation message.

2. Cancel closes the dialog without performing the action.

3. Delete closes the dialog and runs the deletion action.

4. In a real application, you would replace print() with your database or API deletion logic.

This is useful in student management systems, inventory applications and admin panels.

✦ 3. What Is SnackBar in Flutter?

A SnackBar is a short message displayed near the bottom of the screen. It usually appears after a user performs an action.

Examples:

• Record saved successfully.

• Login successful.

• Item added to cart.

• Something went wrong.

• Internet connection unavailable.

Unlike AlertDialog, a SnackBar generally does not block the entire screen.

✦ Basic SnackBar Example

import 'package:flutter/material.dart';

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

class MyApp extends StatelessWidget {
  const MyApp({super.key});

  @override
  Widget build(BuildContext context) {
    return const MaterialApp(
      debugShowCheckedModeBanner: false,
      home: SnackBarPage(),
    );
  }
}

class SnackBarPage extends StatelessWidget {
  const SnackBarPage({super.key});

  void showMessage(BuildContext context) {
    ScaffoldMessenger.of(context).showSnackBar(
      const SnackBar(
        content: Text("Data Saved Successfully!"),
      ),
    );
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: const Text("SnackBar Example"),
      ),
      body: Center(
        child: ElevatedButton(
          onPressed: () {
            showMessage(context);
          },
          child: const Text("Save Data"),
        ),
      ),
    );
  }
}

✦ Understanding the Code

• ScaffoldMessenger manages SnackBars for the Scaffold.

• showSnackBar() displays the message.

• SnackBar creates the message area.

• content contains the text shown to the user.

When the user taps Save Data, the success message appears at the bottom.

✦ 4. Customize SnackBar

You can customize a SnackBar using different properties.

For example:

ScaffoldMessenger.of(context).showSnackBar(
  SnackBar(
    content: const Text("Student Added Successfully!"),
    duration: const Duration(seconds: 3),
    action: SnackBarAction(
      label: "UNDO",
      onPressed: () {
        print("Undo Action");
      },
    ),
  ),
);

Important properties:

• content: Message displayed inside the SnackBar.

• duration: How long the message remains visible.

• action: Adds an optional action button.

• backgroundColor: Changes the background color.

SnackBars are useful for providing quick feedback without interrupting the user's work.

✦ 5. What Is Drawer in Flutter?

A Drawer is a side navigation panel that usually slides in from the left side of the screen.

It is commonly used in applications with multiple sections.

For example:

• Home

• Profile

• Dashboard

• Settings

• Help

• Logout

Flutter provides the Drawer widget, which is generally placed inside the Scaffold widget.

✦ Basic Drawer Example

import 'package:flutter/material.dart';

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

class MyApp extends StatelessWidget {
  const MyApp({super.key});

  @override
  Widget build(BuildContext context) {
    return const MaterialApp(
      debugShowCheckedModeBanner: false,
      home: DrawerPage(),
    );
  }
}

class DrawerPage extends StatelessWidget {
  const DrawerPage({super.key});

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: const Text("Navigation Drawer"),
      ),

      drawer: Drawer(
        child: ListView(
          padding: EdgeInsets.zero,
          children: [

            const DrawerHeader(
              decoration: BoxDecoration(
                color: Colors.blue,
              ),
              child: Text(
                "My Flutter App",
                style: TextStyle(
                  color: Colors.white,
                  fontSize: 22,
                ),
              ),
            ),

            ListTile(
              leading: const Icon(Icons.home),
              title: const Text("Home"),
              onTap: () {
                Navigator.pop(context);
              },
            ),

            ListTile(
              leading: const Icon(Icons.person),
              title: const Text("Profile"),
              onTap: () {
                Navigator.pop(context);
              },
            ),

            ListTile(
              leading: const Icon(Icons.settings),
              title: const Text("Settings"),
              onTap: () {
                Navigator.pop(context);
              },
            ),

          ],
        ),
      ),

      body: const Center(
        child: Text(
          "Welcome to Home Page",
          style: TextStyle(fontSize: 22),
        ),
      ),
    );
  }
}

✦ Understanding Drawer Components

• drawer: Adds the side navigation panel to Scaffold.

• DrawerHeader: Displays the top section of the menu.

• ListView: Arranges menu items vertically.

• ListTile: Creates an individual menu item.

• leading: Displays an icon before the title.

• onTap: Handles the user's tap.

• Navigator.pop(context): Closes the drawer.

Note: In this basic example, the menu items close the drawer. To navigate to separate pages, you can combine them with Flutter navigation routes.

✦ 6. What Is Bottom Navigation Bar?

A Bottom Navigation Bar displays important navigation options at the bottom of the mobile screen.

It is useful when an application has a few main sections that users need to access frequently.

For example:

• Home

• Search

• Profile

• Settings

Flutter provides the BottomNavigationBar widget for this purpose.

✦ Basic Bottom Navigation Example

import 'package:flutter/material.dart';

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

class MyApp extends StatelessWidget {
  const MyApp({super.key});

  @override
  Widget build(BuildContext context) {
    return const MaterialApp(
      debugShowCheckedModeBanner: false,
      home: BottomNavPage(),
    );
  }
}

class BottomNavPage extends StatefulWidget {
  const BottomNavPage({super.key});

  @override
  State<BottomNavPage> createState() =>
      _BottomNavPageState();
}

class _BottomNavPageState extends State<BottomNavPage> {

  int selectedIndex = 0;

  final List<Widget> pages = [
    const Center(child: Text("Home Page")),
    const Center(child: Text("Search Page")),
    const Center(child: Text("Profile Page")),
  ];

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: const Text("Bottom Navigation"),
      ),

      body: pages[selectedIndex],

      bottomNavigationBar: BottomNavigationBar(
        currentIndex: selectedIndex,

        onTap: (index) {
          setState(() {
            selectedIndex = index;
          });
        },

        items: const [
          BottomNavigationBarItem(
            icon: Icon(Icons.home),
            label: "Home",
          ),

          BottomNavigationBarItem(
            icon: Icon(Icons.search),
            label: "Search",
          ),

          BottomNavigationBarItem(
            icon: Icon(Icons.person),
            label: "Profile",
          ),
        ],
      ),
    );
  }
}

✦ How Does Bottom Navigation Work?

1. selectedIndex stores the currently selected tab.

2. pages contains the widgets displayed for each tab.

3. currentIndex tells Flutter which item is selected.

4. onTap receives the index of the tapped item.

5. setState() updates the selected index.

6. pages[selectedIndex] displays the corresponding page.

When the user taps Search, the selected index becomes 1 and the Search Page appears.

Note: BottomNavigationBar is a traditional Flutter navigation widget. Flutter also provides NavigationBar for Material 3 applications.

✦ 7. Practical Project: Combine Dialog, SnackBar, Drawer and Bottom Navigation

Now let's combine these concepts in one small application.

This example includes:

• Bottom navigation with three sections.

• A navigation drawer.

• A button to show an AlertDialog.

• A button to display a SnackBar.

✦ Complete Code

import 'package:flutter/material.dart';

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

class MyApp extends StatelessWidget {
  const MyApp({super.key});

  @override
  Widget build(BuildContext context) {
    return const MaterialApp(
      debugShowCheckedModeBanner: false,
      home: MainPage(),
    );
  }
}

class MainPage extends StatefulWidget {
  const MainPage({super.key});

  @override
  State<MainPage> createState() => _MainPageState();
}

class _MainPageState extends State<MainPage> {

  int selectedIndex = 0;

  final List<Widget> pages = const [
    Center(child: Text("Home Page", style: TextStyle(fontSize: 24))),
    Center(child: Text("Search Page", style: TextStyle(fontSize: 24))),
    Center(child: Text("Profile Page", style: TextStyle(fontSize: 24))),
  ];

  void showAlert() {
    showDialog(
      context: context,
      builder: (context) {
        return AlertDialog(
          title: const Text("Confirmation"),
          content: const Text("Do you want to continue?"),
          actions: [
            TextButton(
              onPressed: () {
                Navigator.pop(context);
              },
              child: const Text("Cancel"),
            ),
            ElevatedButton(
              onPressed: () {
                Navigator.pop(context);
                showMessage();
              },
              child: const Text("Yes"),
            ),
          ],
        );
      },
    );
  }

  void showMessage() {
    ScaffoldMessenger.of(context).showSnackBar(
      const SnackBar(
        content: Text("Action Completed Successfully!"),
      ),
    );
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: const Text("Flutter Navigation App"),
      ),

      drawer: Drawer(
        child: ListView(
          padding: EdgeInsets.zero,
          children: [
            const DrawerHeader(
              decoration: BoxDecoration(
                color: Colors.blue,
              ),
              child: Text(
                "Param Classes Demo",
                style: TextStyle(
                  color: Colors.white,
                  fontSize: 22,
                ),
              ),
            ),

            ListTile(
              leading: const Icon(Icons.home),
              title: const Text("Home"),
              onTap: () {
                setState(() {
                  selectedIndex = 0;
                });
                Navigator.pop(context);
              },
            ),

            ListTile(
              leading: const Icon(Icons.person),
              title: const Text("Profile"),
              onTap: () {
                setState(() {
                  selectedIndex = 2;
                });
                Navigator.pop(context);
              },
            ),
          ],
        ),
      ),

      body: Column(
        children: [
          Expanded(
            child: pages[selectedIndex],
          ),

          ElevatedButton(
            onPressed: showAlert,
            child: const Text("Show Dialog"),
          ),

          ElevatedButton(
            onPressed: showMessage,
            child: const Text("Show SnackBar"),
          ),

          const SizedBox(height: 20),
        ],
      ),

      bottomNavigationBar: BottomNavigationBar(
        currentIndex: selectedIndex,
        onTap: (index) {
          setState(() {
            selectedIndex = index;
          });
        },
        items: const [
          BottomNavigationBarItem(
            icon: Icon(Icons.home),
            label: "Home",
          ),
          BottomNavigationBarItem(
            icon: Icon(Icons.search),
            label: "Search",
          ),
          BottomNavigationBarItem(
            icon: Icon(Icons.person),
            label: "Profile",
          ),
        ],
      ),
    );
  }
}

✦ What Will You Learn from This Project?

After running this application, you can:

• Open the side drawer from the AppBar.

• Switch between Home, Search and Profile.

• Display an AlertDialog by tapping Show Dialog.

• Display a SnackBar by tapping Show SnackBar.

• Select Home or Profile from the drawer.

This project demonstrates how multiple Flutter widgets can work together to create a simple mobile application interface.

✦ 8. Best Practices for Using These Widgets

Follow these suggestions when developing real-world Flutter applications:

1. Use AlertDialog carefully: Display confirmation dialogs only when the user needs to make an important decision.

2. Keep SnackBar messages short: Use clear messages such as "Data Saved Successfully".

3. Organize Drawer items: Keep navigation options simple and easy to understand.

4. Use Bottom Navigation wisely: Keep only the main sections in the bottom navigation area.

5. Use setState correctly: Update the selected tab when the user changes navigation items.

6. Keep navigation consistent: Make sure the same section opens from the drawer and bottom navigation when appropriate.

7. Test on different screens: Check that your navigation and popup interfaces work properly on different device sizes.

✦ 9. Practice Tasks for Beginners

Try these exercises after completing the tutorial:

• Create an AlertDialog that asks users to confirm logout.

• Display a SnackBar after submitting a registration form.

• Create a Drawer with Home, About, Contact and Settings options.

• Build a Bottom Navigation Bar with Home, Courses and Profile.

• Create a confirmation dialog before deleting a student record.

• Combine Drawer and Bottom Navigation in a small student management application.

These exercises will help you understand how to build practical Flutter interfaces.

❖ Conclusion

Dialogs, SnackBars, Drawers and Bottom Navigation are important components of modern Flutter applications. They help developers display messages, confirm user actions and create simple navigation systems.

In this tutorial, you learned how to use AlertDialog, create confirmation popups, display SnackBars, build a Navigation Drawer and switch between pages using BottomNavigationBar.

At Param Classes, we focus on practical programming knowledge that helps beginners understand application development step by step. Practice these examples and use them in your own Flutter projects.

Learn Today, Grow Tomorrow with Param Classes!