bottom_sheet_fx 0.1.1

A simple dragable bottom sheet widget.

Custom Bottom Drawer

A highly customizable bottom drawer widget for Flutter with smooth animations and gesture controls.

Features

• 🎨 Fully customizable appearance
• 🔄 Smooth animations with enhanced easing curves
• ↕️ Drag gesture support
• 🎮 Programmatic control through controller
• 📱 Responsive design
• 🎯 Main content scaling and sliding effects
• 🌗 Backdrop overlay with fade animation
• 🎛️ Customizable drag handle

Installation

Run this from you project in terminal.

flutter pub add bottom_sheet_fx

Usage

import 'package:custom_bottom_drawer/custom_bottom_drawer.dart';

// Create a controller
final drawerController = CustomDrawerController();

// Use the widget
CustomDrawer(
  controller: drawerController,
  mainContent: YourMainContent(),
  drawerContent: YourDrawerContent(),
  maxHeight: 0.9, // 90% of screen height
  backgroundColor: Colors.white,
  barrierColor: Colors.black54,
  animationDuration: Duration(milliseconds: 300),
)

Programmatic Control

// Open the drawer
drawerController.open();

// Close the drawer
drawerController.close();

// Toggle drawer state
drawerController.toggle();

// Check if drawer is open
final isOpen = drawerController.isOpen;

Customization

The widget offers several customization options:

Property	Type	Default	Description
mainContent	Widget	required	The main content of your app
drawerContent	Widget	required	Content displayed in the drawer
controller	CustomDrawerController?	null	Controller for programmatic control
minHeight	double	0.0	Minimum height when closed
maxHeight	double	0.90	Maximum height as percentage of screen
animationDuration	Duration	300ms	Duration of open/close animation
backgroundColor	Color	Colors.white	Background color of drawer
barrierColor	Color	Colors.black54	Color of backdrop overlay

Features

Gesture Control

• Drag up/down to open/close
• Velocity-based animations
• Snap to nearest position when released

Visual Effects

• Scale and slide animations for main content
• Smooth easing curves
• Animated border radius
• Backdrop overlay with fade
• Enhanced shadow effects

Example

import 'package:flutter/material.dart';
import 'package:custom_bottom_drawer/custom_bottom_drawer.dart';

class Example extends StatelessWidget {
  final drawerController = CustomDrawerController();

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: CustomDrawer(
        controller: drawerController,
        mainContent: Container(
          color: Colors.blue,
          child: Center(
            child: Text('Main Content'),
          ),
        ),
        drawerContent: Container(
          padding: EdgeInsets.all(16),
          child: Column(
            children: [
              Text('Drawer Content'),
              // Add your drawer content here
            ],
          ),
        ),
      ),
      floatingActionButton: FloatingActionButton(
        onPressed: () => drawerController.toggle(),
        child: Icon(Icons.add),
      ),
    );
  }
}

Contributing

Contributions are welcome! If you find a bug or want to contribute to the code or documentation, please feel free to create an issue or submit a pull request.

License

This project is licensed under the MIT License - see the LICENSE file for details.