Continuous Bottom Sheet #

A highly customizable Flutter package for creating a modal bottom sheet with multiple, swipeable pages. Each page can have a different height, and the sheet smoothly animates its size when navigating between pages.

This package is built with a focus on a clean API, modularity, and extensive customization, following modern Flutter best practices.

Key Features #

• Variable Page Heights: Each page automatically determines its own height based on its content.
• Smooth Height Animation: The bottom sheet container fluidly animates its height when navigating between pages of different sizes.
• Swipe and Programmatic Navigation: Users can swipe between pages, or you can control the flow programmatically using a dedicated controller.
• Highly Customizable: Tailor the appearance and behavior, including colors, shapes, animation durations, curves, and swipe physics.
• Robust and Overflow-Safe: Designed to handle dynamic content gracefully without layout overflows.

Demo #

(A GIF showcasing the bottom sheet swiping between a short page with a text field and a taller page with more content, demonstrating the smooth height animation.)

Installation #

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

dependencies:  
  continuous_bottom_sheet: ^1.0.0 # Replace with the latest version

Then, run flutter pub get in your terminal.

Usage #

Using the continuous bottom sheet is straightforward. Follow these three steps:

1. Create a Controller #

First, create an instance of ContinuousBottomSheetController. It's best to define it within your State class so it persists.

class _MyHomePageState extends State<MyHomePage> {  
  // Define the controller once to be used by the bottom sheet.  
  final sheetController = ContinuousBottomSheetController();

  // ... rest of the code  
}

2. Define Your Pages #

Create a list of widgets that will serve as the pages for your bottom sheet.

Important: To prevent potential layout overflows with dynamic content (like TextFields), it is highly recommended to wrap the content of each page in a SingleChildScrollView.

// Example Page Widget  
class FirstPage extends StatelessWidget {  
  final VoidCallback onNext;  
  final VoidCallback onClose;

  const FirstPage({super.key, required this.onNext, required this.onClose});

  @override  
  Widget build(BuildContext context) { 
    return Padding(  
        padding: const EdgeInsets.all(24.0),  
        child: Column(  
          mainAxisSize: MainAxisSize.min, // Important for height calculation  
          children: [  
            const Text("Step 1"),  
            const TextField(decoration: InputDecoration(labelText: 'Your Name')),  
            const SizedBox(height: 24),  
            ElevatedButton(onPressed: onNext, child: const Text('Continue')),  
          ],  
        ),    
    );  
  }  
}

3. Show the Bottom Sheet #

Call the showContinuousBottomSheet function from an event handler, like a button's onPressed callback. Pass the context, the controller, and your list of pages.

void _openBottomSheet() {  
  showContinuousBottomSheet(  
    context: context,  
    controller: sheetController,  
    pages: [  
      FirstPage(  
        onNext: sheetController.nextPage,  
        onClose: sheetController.close,  
      ),  
      SecondPage(  
        onPrev: sheetController.previousPage,  
        onNext: sheetController.nextPage,  
      ),  
      // ... more pages  
    ],  
  );  
}

Customization #

You can customize the appearance and behavior of the bottom sheet by passing optional parameters to the showContinuousBottomSheet function.

showContinuousBottomSheet(  
  context: context,  
  controller: sheetController,  
  pages: yourPages,  
  // \--- Customization Options \---  
  backgroundColor: Colors to.grey.shade100,  
  shape: const RoundedRectangleBorder(  
    borderRadius: BorderRadius.vertical(top: Radius.circular(30)),  
  ),  
  heightAnimationDuration: const Duration(milliseconds: 500),  
  heightAnimationCurve: Curves.easeOutCubic,  
  pageSlideAnimationDuration: const Duration(milliseconds: 300),  
  pageSlideAnimationCurve: Curves.linear,  
  physics: const BouncingScrollPhysics(),  
);

Controller API Reference #

The ContinuousBottomSheetController provides methods to control the bottom sheet programmatically.

Reporting Issues and Contributing #

Find a bug or have a feature request? Please open an issue on our GitHub repository.

Contributions are welcome!

License #

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