Package detailsv4.0.4

bottom_sheet

Flexible bottom sheet with the ability to scroll content even without a list.

AndroidiOSWebmacOSWindowsLinux

pub.dev API documentation Source code

30-day downloads: 30.1K
Likes: 410
Pub points: 140

Install package

flutter pub add bottom_sheet

Package Overview

Package selection guidance compiled from public package information, community data, and project usage.

A flexible bottom sheet widget for Flutter that supports scrolling content even when not wrapped in a list. It provides smooth, customizable transitions and is designed for use across multiple platforms including Android, iOS, Web, macOS, Windows, and Linux. The package enhances user experience by enabling interactive content presentation from the bottom of the screen with responsive behavior. Ideal for modals, filters, or detailed views that require space without full-screen navigation.

Use cases

Modal dialogs
Filter panels
Detailed content views
Interactive forms
Quick action menus

Key features

Scrollable content without ListView
Cross-platform support
Customizable animations
Flexible height control
Responsive design
Easy integration

Suitable for

Developers building multi-platform apps
UI-heavy applications
Apps needing expandable content areas
Design systems requiring consistent bottom sheets
Teams using Surf Studio's Flutter components

Considerations

Requires careful handling of nested scrollables
May need additional styling for complex layouts
Performance impact with heavy content
Limited documentation beyond basic usage
Not optimized for very large datasets

Original README

Original README snapshot from the linked source repository. Visit the repository for the latest content.

Bottom Sheet

Made by Surf 🏄‍♂️🏄‍♂️🏄‍♂️

About

Custom bottom sheet widget that can be resized in response to drag gestures and then scrolled.

Overview

Main classes:

Flexible and scrollable bottom sheet.

All you have to do is call showFlexibleBottomSheet() and you'll get a popup that looks like a modal bottom sheet and can be resized by dragging it up and down and scrolled when expanded.

There are 2 types of BottomSheets:

BottomSheet
StickyBottomSheet

Example

Simple BottomSheet

Demo

To show bottomSheet, use :

showFlexibleBottomSheet(
  minHeight: 0,
  initHeight: 0.5,
  maxHeight: 1,
  context: context,
  builder: _buildBottomSheet,
  anchors: [0, 0.5, 1],
  isSafeArea: true,
);

Widget _buildBottomSheet(
    BuildContext context,
    ScrollController scrollController,
    double bottomSheetOffset,
  ) {
    return Material(
        child: Container(
          child: ListView(
            controller: scrollController,
            ...
          ),
        ),
      );
  }

BottomSheet with height based on content

Demo

showFlexibleBottomSheet(
  minHeight: 0,
  initHeight: 0.8,
  maxHeight: 0.8,
  context: context,
  builder: _buildBottomSheet,
  isExpand: false,
);

Widget _buildBottomSheet(
    BuildContext context,
    ScrollController scrollController,
    double bottomSheetOffset,
  ) {
    return Material(
        child: Container(
          child: ListView(
              controller: scrollController,
              shrinkWrap: true,
              ...
          ),
        ),
      );
  }

Sticky BottomSheet

Demo

To show sticky BottomSheet, use:
You have to return SliverChildListDelegate from builder !!!

showStickyFlexibleBottomSheet(
  minHeight: 0,
  initHeight: 0.5,
  maxHeight: 1,
  headerHeight: 200,
  context: context,
  backgroundColor: Colors.white,
  headerBuilder: (BuildContext context, double offset) {
    return Container(
      ...
    );
  },
  builder: (BuildContext context, double offset) {
    return SliverChildListDelegate(
      <Widget>[...],
    );
  },
  anchors: [0, 0.5, 1],
);

Installation

Add bottom_sheet to your pubspec.yaml file:

dependencies:
  bottom_sheet: $currentVersion$

At this moment, the current version of bottom_sheet is .

Changelog

All notable changes to this project will be documented in this file.

Issues

To report your issues, submit them directly in the Issues section.

Contribute

If you would like to contribute to the package (e.g. by improving the documentation, fixing a bug or adding a cool new feature), please read our contribution guide first and send us your pull request.

Your PRs are always welcome.