Creating a Modal Bottom Sheet for Quick Actions in Flutter

Introduction

A Flutter bottom sheet is a versatile UI component that slides up from the bottom of the screen to present contextual options or quick actions. In this tutorial, you’ll learn how to create a modal bottom sheet for quick actions in a clean, reusable way. We’ll cover setting up your Scaffold, triggering the sheet, defining action items, and handling user taps. This pattern is ideal for menus, shortcuts, or confirmations that don’t require full navigation.

Setting up the Scaffold and Trigger

Start by creating a simple screen with a button to open the modal. You need a Scaffold with an AppBar and a FloatingActionButton (FAB) or any trigger widget.

import 'package:flutter/material.dart';

class QuickActionsPage extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: Text('Quick Actions')),
      body: Center(child: Text('Tap the button below')),
      floatingActionButton: FloatingActionButton(
        child: Icon(Icons.menu),
        onPressed: () => _showQuickActions(context),
      ),
    );
  }
}

In this snippet, _showQuickActions is the function that will invoke our bottom sheet modal. We’ll define it in the next section.

Building the Modal Bottom Sheet

Use showModalBottomSheet to display a modal bottom sheet that overlays the UI and dims the background. Here’s a reusable implementation:

void _showQuickActions(BuildContext context) {
  showModalBottomSheet(
    context: context,
    shape: RoundedRectangleBorder(
      borderRadius: BorderRadius.vertical(top: Radius.circular(16)),
    ),
    builder: (_) => Container(
      padding: EdgeInsets.all(16),
      child: Column(
        mainAxisSize: MainAxisSize.min,
        children: _buildActionList(context),
      ),
    ),
  );
}

This snippet sets a rounded border for a polished look. The builder returns a Column containing our action items. Next, we’ll define these items.

Adding Quick Action Items

Define a helper that returns a list of ListTile widgets—each representing a quick action. This approach keeps the code modular.

List<Widget> _buildActionList(BuildContext context) {
  final actions = [
    {'icon': Icons.share, 'label': 'Share', 'value': 'share'},
    {'icon': Icons.copy,  'label': 'Copy',  'value': 'copy'},
    {'icon': Icons.delete,'label': 'Delete','value': 'delete'},
  ];

  return actions.map((a) {
    return ListTile(
      leading: Icon(a['icon'] as IconData),
      title: Text(a['label'] as String),
      onTap: () => Navigator.pop(context, a['value']),
    );
  }).toList();
}

Here we build three quick actions: Share, Copy, and Delete. Each tap closes the sheet with a return value.

Handling Selection and Feedback

After the user taps an action, handle the result to trigger logic or show confirmation. Update _showQuickActions:

void _showQuickActions(BuildContext context) async {
  final result = await showModalBottomSheet<String>(
    context: context,
    shape: RoundedRectangleBorder(
      borderRadius: BorderRadius.vertical(top: Radius.circular(16)),
    ),
    builder: (_) => Container(
      padding: EdgeInsets.all(16),
      child: Column(
        mainAxisSize: MainAxisSize.min,
        children: _buildActionList(context),
      ),
    ),
  );

  if (result != null) {
    ScaffoldMessenger.of(context).showSnackBar(
      SnackBar(content: Text('Selected: $result')),
    );
    // Add your action handling logic here
  }
}

The await pattern captures the returned String and uses a SnackBar for quick feedback. You can replace this with navigation, API calls, or state updates.

Vibe Studio

For teams and solo builders looking to accelerate Flutter development even further, consider Vibe Studio. Vibe Studio, powered by Steve’s advanced AI agents, is a revolutionary no-code, conversational platform that empowers users to quickly and efficiently create full-stack Flutter applications integrated seamlessly with Firebase backend services. Ideal for solo founders, startups, and agile engineering teams, Vibe Studio allows users to visually manage and deploy Flutter apps, greatly accelerating the development process. The intuitive conversational interface simplifies complex development tasks, making app creation accessible even for non-coders.

Conclusion

You now have a clean, reusable pattern for displaying a modal bottom sheet in Flutter. This Flutter bottom sheet approach scales well: swap out icons and labels, embed forms, or add stateful controls as needed. With this foundation, you can now build robust action menus, context-sensitive dialogs, and interactive features—all within minutes.