apptomate_custom_drawer 0.0.1
apptomate_custom_drawer: ^0.0.1 copied to clipboard
An enhanced implementation of Flutter's Drawer with extensive customization options and a clean API.
CustomDrawer #
An enhanced implementation of Flutter's Drawer with extensive customization options and a clean API.
Features #
- Flexible Header Section - Support for custom profile sections or simple titles
- Customizable Items - Pre-styled drawer items with icons and colors
- Footer Support - Optional footer widget at the bottom
- Full Customization - Control over colors, dimensions, and styling
- Built-in Animations - Smooth transitions when opening/closing
- Responsive Design - Works across all screen sizes
- Easy Integration - Drop-in replacement for standard Drawer
Installation #
Add the dependency to your pubspec.yaml:
dependencies:
apptomate_custom_drawer: ^0.0.1
Usage #
Basic Usage #
Scaffold(
drawer: CustomDrawer(
title: 'My App',
items: [
DrawerItem(label: 'Home', icon: Icons.home),
DrawerItem(label: 'Settings', icon: Icons.settings),
],
),
body: // Your content...
)
Available Parameters #
| Parameter | Type | Default | Description |
|---|---|---|---|
title |
String | required | Header title (if profileSection not used) |
items |
List | required | List of navigation items |
elevation |
double | 16.0 | Shadow elevation |
backgroundColor |
Color | Colors.white | Drawer background color |
width |
double | 250.0 | Drawer width |
titleTextStyle |
TextStyle? | null | Custom title text style |
profileSection |
Widget? | null | Custom header widget |
footer |
Widget? | null | Footer widget |
headerDecoration |
Decoration? | Gradient | Header background decoration |
footerPadding |
EdgeInsetsGeometry? | 8.0 | Footer padding |
DrawerItem Properties #
| Property | Type | Description |
|---|---|---|
label |
String | Item display text |
icon |
IconData? | Optional leading icon |
iconColor |
Color? | Icon color |
textColor |
Color? | Text color |
onTap |
VoidCallback? | Click handler |
Advanced Examples #
Custom profile header:
CustomDrawer(
profileSection: Column(
children: [
CircleAvatar(/*...*/),
Text('User Name'),
],
),
items: [/*...*/],
)
Themed drawer with footer:
CustomDrawer(
backgroundColor: Colors.grey[100]!,
headerDecoration: BoxDecoration(color: Colors.blue),
items: [/*...*/],
footer: Text('Version 1.0.0'),
)
Demo #
The package includes a CustomDrawerWidget demo that shows:
- Custom profile section with avatar
- Multiple drawer items with different icons
- Footer with version info
- Interactive snackbar feedback
To run the demo:
void main() {
runApp(MaterialApp(
home: CustomDrawerWidget(),
));
}
Implementation Details #
The widget:
- Extends Flutter's core Drawer functionality
- Uses ListView.separated for efficient item rendering
- Implements proper widget composition
- Handles navigation and drawer closing automatically
- Provides sensible defaults while allowing full customization
Best Practices #
- Keep drawer items to 5-7 for usability
- Use consistent icon and text colors
- Include a profile section for user context
- Add a subtle footer for additional info
- Test on both mobile and tablet layouts
Comparison with Flutter's Drawer #
| Feature | Flutter Drawer | CustomDrawer |
|---|---|---|
| Header customization | Limited | Full control |
| Item styling | Manual | Pre-configured |
| Footer support | No | Yes |
| Default styling | Basic | Polished |
| Color control | Partial | Complete |
| Icon support | Manual | Built-in |
Common Use Cases #
- Main app navigation
- User profile access
- App settings
- Multi-section apps
- Admin dashboards
- Enterprise applications