anchored_sheets 1.2.4
anchored_sheets: ^1.2.4 copied to clipboard
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
- 🎨 Material Design - Full theming integration with Material 3 support
- 📱 Status Bar Smart - Intelligent status bar overlap handling with background extension
- 🖱️ Drag Support - Optional drag-to-dismiss with customizable handles
- 🔄 Easy Dismissal - Simple
context.popAnchoredSheet()method for closing sheets - 🚀 Provider Ready - Built-in support for state management patterns
- ♿ Accessibility - Full screen reader and semantic support
- 🛡️ Type Safe - Full type safety with generic support
- 🚫 Duplicate Prevention - Prevent re-rendering when clicking same button multiple times
- ⚡ Memory Optimized - Automatic lifecycle management with Flutter best practices
📦 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';
### Anchored to Widget
```dart
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.popAnchoredSheet('home'),
),
ListTile(
leading: Icon(Icons.settings),
title: Text('Settings'),
onTap: () => context.popAnchoredSheet('settings'),
),
],
),
);
if (result != null) {
print('Selected: $result');
}
}
🙏 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 and lifecycle management
📧 Support #
Made with ❤️ for the Flutter community