apptomate_custom_bottom_sheet 0.0.1

A highly customizable and reusable bottom sheet implementation for Flutter applications, providing consistent behavior with flexible styling options.

CustomBottomSheet

A highly customizable and reusable bottom sheet implementation for Flutter applications, providing consistent behavior with flexible styling options.

---

📌 Key Features

✅ Fully Customizable – Control colors, borders, height, padding, and more.
✅ Dark Mode Support – Automatically adapts to the app's theme.
✅ Drag Handle – Optional visual indicator for draggable sheets.
✅ Scrollable Content – Supports both fixed and scrollable layouts.
✅ Full-Screen Mode – Can expand to full screen when needed.
✅ Safe Area Support – Ensures content avoids notches and system UI.
✅ Top Border Option – Adds a divider at the top for better visual separation.

---

📥 Installation

Add the dependency to your pubspec.yaml:

dependencies:
  apptomate_custom_bottom_sheet: ^0.0.1

---

🚀 Basic Usage

1. Standard Bottom Sheet

CustomBottomSheet.show(
  context,
  child: Column(
    children: [
      Text("Title", style: TextStyle(fontWeight: FontWeight.bold)),
      SizedBox(height: 16),
      Text("This is a standard bottom sheet."),
      ElevatedButton(
        onPressed: () => Navigator.pop(context),
        child: Text("Close"),
      ),
    ],
  ),
);

2. Scrollable Bottom Sheet

CustomBottomSheet.show(
  context,
  isScrollControlled: true,
  child: SingleChildScrollView(
    child: Column(
      children: List.generate(20, (i) => ListTile(title: Text("Item ${i + 1}"))),
  ),
);

3. Full-Screen Bottom Sheet

CustomBottomSheet.show(
  context,
  isScrollControlled: true,
  height: MediaQuery.of(context).size.height * 0.9,
  child: Column(
    children: [
      Text("Full-Screen Sheet"),
      Expanded(child: ListView.builder(itemBuilder: (ctx, i) => ListTile(title: Text("Item $i"))),
    ],
  ),
);

---

⚙️ Customization Options

Property	Type	Description	Default
child	Widget	Content of the bottom sheet (required)	-
borderRadius	double	Top corner radius	16.0
backgroundColor	Color?	Background color	Auto (light/dark theme)
height	double?	Fixed height (null for wrap content)	null
isDismissible	bool	Whether tapping outside closes it	true
enableDrag	bool	Whether dragging closes it	true
isScrollControlled	bool	Expands to full height if needed	false
padding	EdgeInsetsGeometry	Inner padding	EdgeInsets.all(16)
showDragHandle	bool	Shows a drag indicator	true
dragHandleColor	Color?	Color of the drag handle	Auto (theme-based)
dragHandleWidth	double	Width of the drag handle	40.0
dragHandleHeight	double	Height of the drag handle	4.0
elevation	double	Shadow elevation	1.0
useSafeArea	bool	Avoids system UI overlaps	true
showTopBorder	bool	Adds a divider at the top	false
topBorderColor	Color?	Color of the top border	Theme divider color
topBorderWidth	double	Thickness of the top border	1.0
transitionAnimationController	AnimationController?	Custom animation control	null

---

Best Practices

1. Accessibility

• Ensure sufficient contrast between background and content
• Provide semantic labels for interactive elements
• Maintain minimum touch targets (48×48dp) for buttons
• Support screen readers with Semantics widgets when needed

2. Performance

• Use const constructors for static content
• Avoid unnecessary rebuilds with ListView.builder for long lists
• Limit full-screen sheets – prefer navigation for complex views
• Optimize heavy content with lazy loading (FutureBuilder if needed)

3. Internationalization

• Localize text (use MaterialLocalizations)
• Support RTL layouts with Directionality
• Adapt padding for localized text expansion

4. State Management

• For simple UIs: Use StatefulWidget with local state
• For complex flows: Integrate with providers (Riverpod/Bloc)
• Persist selections when reopening sheets

---

Comparison with Flutter's showModalBottomSheet

Feature	CustomBottomSheet	Flutter Default
Customization	Full control (colors, borders, handles)	Limited
Dark Mode	Auto-adapts + manual override	Theme-only
Height Control	Fixed/full-screen/scrollable	Scrollable only
Drag Handle	Customizable (color/size)	Not available
Top Border	Optional divider	No
Animations	Custom durations/controller	Fixed
Safe Area	Configurable	Always on
Use Cases	Complex UIs, branded designs	Simple pickers

---

Key Advantages

✔ Consistency – Uniform look across app
✔ Flexibility – Adapts to any design system
✔ Maintainability – Single source of truth