anchored_sheets 1.2.8

A Flutter package to create anchored sheets that can be dragged and snapped to different positions on the screen.

🎯 Anchored Sheets

A Flutter package for creating modal sheets that slide down from the top of the screen, similar to showModalBottomSheet but positioned at the top. Perfect for filter menus, notifications, dropdowns, and any content that should appear anchored to specific widgets or screen positions.

🎨 Demo

[Anchored Sheets Demo]

✨ Features

• 🎯 Anchor Positioning - Attach sheets to specific widgets using GlobalKeys
• 🛡️ Type Safe - Full type safety with generic support
• 🧭 Navigation Integration - Seamless navigation flows with automatic sheet management
• 🔄 Flow Control - Built-in patterns for sheet → navigate → return workflows
• 📱 Context Extensions - Convenient methods for common navigation patterns

📦 Installation

Add this to your package's pubspec.yaml file:

dependencies:
  anchored_sheets: ^1.2.1

Then run:

flutter pub get

🚀 Quick Start

Basic Usage

import 'package:anchored_sheets/anchored_sheets.dart';

// Basic anchored sheet
void showBasicSheet() async {
  final result = await anchoredSheet<String>(
    context: context,
    builder: (context) => Container(
      height: 200,
      child: Center(
        child: Text('Hello from anchored sheet!'),
      ),
    ),
  );
  
  if (result != null) {
    print('Result: $result');
  }
}

Anchored to Widget

final GlobalKey buttonKey = GlobalKey();

// In your build method
ElevatedButton(
  key: buttonKey, // 🎯 Anchor point
  onPressed: showAnchoredMenu,
  child: Text('Menu'),
)

// Show anchored sheet
void showAnchoredMenu() async {
  final result = await anchoredSheet<String>(
    context: context,
    anchorKey: buttonKey, // Sheet appears below this button
    builder: (context) => Column(
      mainAxisSize: MainAxisSize.min,
      children: [
        ListTile(
          leading: Icon(Icons.home),
          title: Text('Home'),
          onTap: () => context.popAnchorSheet('home'),
        ),
        ListTile(
          leading: Icon(Icons.settings),
          title: Text('Settings'),
          onTap: () => context.popAnchorSheet('settings'),
        ),
      ],
    ),
  );
  
  if (result != null) {
    print('Selected: $result');
  }
}

🧭 Navigation Integration

Sheet → Navigate → Return Pattern

Perfect for selection flows where you need to navigate from a sheet to another screen and return with a value:

void showSelectionSheet() async {
  final result = await anchoredSheet<String>(
    context: context,
    anchorKey: buttonKey,
    builder: (context) => Column(
      mainAxisSize: MainAxisSize.min,
      children: [
        Text('Current selection: ${selectedValue ?? 'None'}'),
        ElevatedButton(
          onPressed: () async {
            // Navigate and automatically reopen sheet with result
            final newValue = await context.popAnchorAndNavigate(
              MaterialPageRoute(
                builder: (context) => SelectionScreen(current: selectedValue),
              ),
            );
            
            if (newValue != null) {
              // Manually reopen with new value
              showSelectionSheet(initialValue: newValue);
            }
          },
          child: Text('Select Value'),
        ),
      ],
    ),
  );
}

Advanced Flow with Automatic Reopening

For even more streamlined flows, use the navigateAndReopenAnchor method:

void showAdvancedFlow() async {
  final result = await context.navigateAndReopenAnchor<String>(
    MaterialPageRoute(builder: (context) => SelectionScreen()),
    sheetBuilder: (selectedValue) => MyCustomSheet(
      value: selectedValue,
      onNavigate: () => _handleNavigation(selectedValue),
    ),
    anchorKey: myButtonKey,
    reopenOnlyIfResult: true, // Only reopen if navigation returned a value
  );
  
  print('Final result: $result');
}

🔧 Context Extensions

Convenient extension methods for common operations:

// Close current anchored sheet
context.popAnchorSheet('result');

// Navigate after dismissing sheet
final result = await context.popAnchorAndNavigate(
  MaterialPageRoute(builder: (context) => NextScreen()),
);

// Complete flow with automatic sheet management
final result = await context.navigateAndReopenAnchor(
  route,
  sheetBuilder: (value) => MySheet(value: value),
  anchorKey: buttonKey,
);

🙏 Acknowledgments

• Inspired by Material Design guidelines
• Built on Flutter's robust animation and layout systems
• Thanks to the Flutter community for feedback and suggestions
• Special thanks to contributors helping improve performance, lifecycle management, and navigation patterns

📧 Support

• 📖 Read the docs
• 🐛 Report issues

---

Made with ❤️ for the Flutter community