Search packages, repositories and app categories

GitHub repositorymhrst/bottom_sheet_bar

bottom_sheet_bar

A toolbar that expands into a bottom sheet

bottom_sheet_bar project cover
Stars
16
Forks
4
Last push (UTC)
Jun 13, 2025
Project status
Active

Original README

English project snapshot. Visit GitHub for the latest content.

bottom_sheet_bar

A toolbar that aligns to the bottom of a widget and expands into a bottom sheet.

Short content Long content Scrollable content
import 'package:bottom_sheet_bar/bottom_sheet_bar.dart';

BottomSheetBar(
    expandedBuilder: (scrollController) => ListView.builder(
        controller: scrollController, 
        itemBuilder: (context, index) => ListTile(title: index.toString()),
        itemCount: 50,
    ),
    collapsed: Text('Collapsed toolbar widget'),
    body: Text('Content overlayed by toolbar and bottom sheet'),
);

BottomSheetBar

Required
  • Widget body - The toolbar will be aligned to the bottom of the body Widget. Padding equal to height is added to the bottom of this widget.
  • Function(ScrollController) expandedBuilder - A function to build the widget displayed when the bottom sheet is expanded. If the expanded content is scrollable, pass the provided ScrollController to the scrollable widget.
Optional
  • Widget collapsed - A Widget to be displayed on the toolbar in its collapsed state
  • BottomSheetBarController controller - A controller can be used to listen to events, and expand and collapse the bottom sheet.
  • Color color - The background color of the toolbar and bottom sheet. Defaults to Colors.white
  • Color backdropColor - The backdrop color that overlays the [body] widget when the bottom sheet is expanded. Defaults to Colors.transparent (no backdrop)
  • BorderRadius borderRadius - Provide a border-radius to adjust the shape of the toolbar
  • BorderRadius borderRadiusExpanded - Provide a border-radius to adjust the shape of the bottom-sheet when expanded
  • List<BoxShadow> boxShadows - Provide shadow decoration to the bottom sheet
  • double height - The height of the collapsed toolbar. Default to kToolbarHeight (56.0)
  • bool isDismissable - If true, the bottom sheet can be dismissed by tapping elsewhere. Defaults to true
  • bool locked - If true, the bottom sheet cannot be opened or closed with a swipe gesture. Defaults to true
  • bool willPopScope - If true, the bottom sheet widget will be wrapped in a WillPopScope widget to handle back-gestures. Defaults to false
  • bool backButtonListener - If true, the bottom sheet widget will be wrapped in a BackButtonListener widget to handle back-gestures. Defaults to false

BottomSheetBarController

A controller used to expand or collapse the bottom sheet of a BottomSheetBar. Listeners can be added to respond to expand and collapse events. The expanded or collapsed state can also be determined through this controller.

  • bool get isCollapsed - Only returns [true] if the bottom sheet if fully collapsed
  • bool get isExpanded - Only returns [true] if the bottom sheet if fully expanded
  • TickerFuture collapse() - Collapse the bottom sheet built by BottomSheetBar.expandedBuilder
  • TickerFuture expand() - Expand the bottom sheet built by BottomSheetBar.expandedBuilder
  • void addListener(Function listener) - Adds a function to be called on every animation frame
  • void removeListener(Function listener) - Removes a previously added listener
  • void dispose() - Removes all previously added listeners
  • void attach(AnimationController animationController) - Used internally to assign the AnimationController created by BottomSheetBar to the controller. Unless you're using advanced animation techniques, you probably won't ever need to use this method.

Example

A quick demonstration can be found in the example directory. To run the example:

flutter run example/main.dart

Matt Hurst GitHub avatar
GitHub author

Matt Hurst ↗

Develop!

@workpailUnited States
LanguagesDartPythonHTMLSwiftKotlinObjective-C

Packages published by this repository

Dependencies used

Dependency list 4 items

How do I choose a repository?

Start with your use case, compare repository activity, and check the original project before adopting it.

  1. Search by repository name, owner or description, then narrow the results by topic.
  2. Compare stars, forks and recent pushes. Stars show community interest, not a guarantee of quality.
  3. Read the README, license and issues on GitHub before using a project.

Sources and maintenance

“A repository is the most basic element of GitHub.”

GitHub Docs — About repositories ↗