Sheets: bottom

Bottom sheets are surfaces containing supplementary content that are anchored to the bottom of the screen.

Android check Web Not available Flutter iOS

Usage

Bottom sheets are supplementary surfaces primarily used on mobile. There are three types suitable for different use cases:

  • Standard bottom sheets display content that complements the screen’s primary content. They remain visible while users interact with the primary content.
  • Modal bottom sheets are an alternative to inline menus or simple dialogs on mobile and provide room for additional items, longer descriptions, and iconography. They must be dismissed in order to interact with the underlying content.
  • Expanding bottom sheets provide a small, collapsed surface that can be expanded by the user to access a key feature or task. They offer the persistent access of a standard sheet with the space and focus of a modal sheet.
Standard bottom sheet
A user can view and interact with a standard bottom sheet and the rest of the screen, useful for multi-tasking. The music player in this standard bottom sheet allows users to control their music while browsing albums.
Modal bottom sheet
A user must interact with or dismiss a modal bottom sheet. Their blocking behavior make them suitable for menus, such as in this files app, to help users focus on their available choices.
Expanding bottom sheet
A user can tap an expanding bottom sheet when needed to access its full contents. The collapsed state can be used an indicator of the feature’s current status, such as the number of selected items or unread messages.

Principles

Supporting

Bottom sheets contain content that supplements the screen’s primary UI region.

Flexible

Bottom sheets can display a wide variety of content and layouts.

Ergonomic

Bottom sheets are easy to reach on a mobile device.


Anatomy

1.Sheet
2.Contents
3.Scrim (Modal only)

Sheet

Bottom sheets are anchored to the bottom edge of the screen and appear in front of other UI elements. Standard and modal bottom sheets are...

Bottom sheets are anchored to the bottom edge of the screen and appear in front of other UI elements. Standard and modal bottom sheets are full-width on mobile and can be inset or full-width on tablet or desktop.

DoA bottom sheet is anchored to the bottom edge of the screen.
Don'tDon’t inset all sides of a bottom sheet from screen edges. This can make it hard to see and allow it to be confused for other components, such as snackbars.
Standard bottom sheet inset on desktop

Contents

Bottom sheets can display a wide variety of content and layouts, ranging from menu items (in list and grid layouts), to supplemental content laid out...

Bottom sheets can display a wide variety of content and layouts, ranging from menu items (in list and grid layouts), to supplemental content laid out according to the layout grid.

Content from a bottom sheet that initially appears below the screen edge can become visible when the sheet is dragged into view.

Menu of actions (in a list) inside a modal bottom sheet
Menu of apps (in a grid layout) inside a modal bottom sheet
The location information in this standard bottom sheet initially extends below the screen edge. It can be dragged into view.
This music player has been made fully visible to reveal a track list beneath the player.

Behavior

Visibility

When bottom sheets initially appear on screen, they may contain content that extends below the bottom of the screen. They can be swiped or dragged...When bottom sheets initially appear on screen, they may contain content that extends below the bottom of the screen. They can be swiped or dragged...

Initial appearance

When bottom sheets initially appear on screen, they may contain content that extends below the bottom of the screen. They can be swiped or dragged up to become full-screen. Depending on the content, bottom sheets can also become full-screen by tapping on their surface or an expand icon.

Full-screen

When full-screen, bottom sheets can be internally scrolled to reveal additional content. A toolbar should be used to provide a collapse or close affordance to exit this view.

DoPartially visible bottom sheets can be dragged to full-screen view and scroll internally.
DoInclude a close affordance in a full-height modal bottom sheet to dismiss the sheet.

Scaling and adaptation

On mobile devices, bottom sheets extend across the width of a screen and are elevated above the primary content. Bottom sheets should scale to fit larger screens...

On mobile devices, bottom sheets extend across the width of a screen and are elevated above the primary content. Bottom sheets should scale to fit larger screens in one of three ways:

  • Setting a maximum width
  • Switching to a floating sheet
  • Switching to a side sheet to reduce the amount of space occupied on larger screens.
A full-width bottom sheet on a large screen
Don'tDon’t use full-width bottom sheets in large screen layouts.

On large screens, bottom sheets that contain a set of actions can become a context menu to preserve the intent and context of the primary content.

Context menu elevated over large screen UI
DoWhen adapting for larger screens, a bottom sheet can become a context menu.

A bottom sheet on mobile can also be swapped for a side sheet that shows supporting content on larger screens.

Side sheet on a large screen UI
DoSwap the bottom sheet for a side sheet in landscape layouts.

Standard bottom sheet

Usage

Standard bottom sheets co-exist with the screen’s main UI region and allow for simultaneously viewing and interacting with both regions. They are commonly used to...

Standard bottom sheets co-exist with the screen’s main UI region and allow for simultaneously viewing and interacting with both regions. They are commonly used to keep a feature or secondary content visible on screen when content in main UI region is frequently scrolled or panned.

DoStandard bottom sheets can contain supplementary content that continues below the screen, such as location information over a map.
DoUse a standard bottom sheet to persist an important feature such as media controls in a music app.

Behavior

Standard bottom sheets remain on-screen when a user interacts with the main UI region or the sheet itself. They have a default elevation of 8dp,...

Interaction

Standard bottom sheets remain on-screen when a user interacts with the main UI region or the sheet itself. They have a default elevation of 8dp, which allows content in the main UI region behind to scroll or pan and for the sheet to temporarily cover the main UI region when made full-screen. At full-screen height, they should contain a collapse icon in an app bar to return to their initial position.

DoStandard bottom sheets are elevated above the main UI region so their visibility is not affected by panning or scrolling.
DoThis music player in a standard bottom sheet remains on-screen as the user browses available music.

Placement

The contents of standard bottom sheets on mobile can be moved into side sheets on larger screen sizes given the additional horizontal space. Side sheets...

The contents of standard bottom sheets on mobile can be moved into side sheets on larger screen sizes given the additional horizontal space.

On mobile, the location information for this map is displayed in a standard bottom sheet due to limited screen width.
On desktop, the location information for this map is displayed in side sheet because screen widths are larger than screen heights.

Modal bottom sheet

Usage

Modal bottom sheets present a set of choices while blocking interaction with the rest of the screen. They are an alternative to inline menus and...

Modal bottom sheets present a set of choices while blocking interaction with the rest of the screen. They are an alternative to inline menus and simple dialogs on mobile, providing additional room for content, iconography, and actions.

Modal bottom sheets are used in mobile apps only.

DoModal bottom sheets can be used instead of menus to present additional screen actions.
DoUse a modal bottom sheet to provide deep links to another app.

Behavior

Modal bottom sheets have a default elevation of 16dp. This elevation allows them to appear over most UI elements and allows them to be pulled...

Elevation and scrim

Modal bottom sheets have a default elevation of 16dp. This elevation allows them to appear over most UI elements and allows them to be pulled up in front of the entire UI to display more options.

A modal bottom sheet causes all content and UI elements behind it to display a scrim, which indicates that they will not respond to user interaction. Tapping the scrim dismisses both the modal bottom sheet and scrim from view.

DoUse a visible scrim with modal bottom sheets to inform users they cannot interact with the rest of the screen.
Don'tDon’t use an invisible scrim for modal bottom sheets. This can mislead users about their ability to interact with the rest of the screen.

Visibility

To provide initial access to its top actions, the initial vertical position of modal bottom sheets is capped at 50% of the screen height.

Modal bottom sheets whose contents exceed 50% of the screen height can then be pulled across the full screen, scrolling internally to access their remaining items.

Sheet height Visibility and behavior
Under 50% of screen height Visible at full height
50 to 100% of screen height Partially visibility at 50% of screen height.
On scroll or surface tap, reveal full sheet.
Greater than or equal to 100% of screen height Partially visible at 50% of screen height.
On scroll or container tap, move to top of screen and scroll contents internally.
Add internal action to close.
DoModal bottom sheets with few items are fully visible upon opening.
Don'tDon’t make tall bottom sheets full-screen upon opening. This places the top content immediately out of reach for users on mobile devices.

Control

Modal bottom sheets appear when triggered by a user action, such as tapping a button or an overflow icon. They can be dismissed by:

  • Tapping a menu item or action within the bottom sheet
  • Tapping the scrim
  • Swiping the sheet down
  • Using a close affordance within the bottom sheet’s top app bar, if available
DoTapping the scrim dismisses a modal bottom sheet.
DoA modal bottom sheet can be dismissed by swiping the sheet down.
DoDisplay a close affordance in a full-screen modal bottom sheet.

Placement

Modal bottom sheets are most effective on small screens. Menus display a list of choices on temporary surfaces. Related Article arrow_downward Dialogs inform users about...

Modal bottom sheets are most effective on small screens.

On larger screens, use menus or dialogs to create clear visual connections to the triggering UI element.

An overflow menu using a bottom sheet on mobile (1) and an inline menu on desktop (2).

Expanding bottom sheet

Usage

An expanding bottom sheet is a surface anchored to the bottom of the screen that users can expand to access a feature or task. It...

An expanding bottom sheet is a surface anchored to the bottom of the screen that users can expand to access a feature or task. It can be used for:

  • Persistently displaying a cross-app feature, such as a shopping cart
  • Collecting and acting on user selections from a set of items, such as photos in a gallery
  • Supporting tasks, such as chat and comments
  • Indirect navigation between items, such as videos in a playlist

Expanding bottom sheets are recommended for use on mobile and tablet.

DoPlace supporting features, such as chat, in an expanding bottom sheet. In this example, an expanding bottom sheet allows users to switch between viewing a product and contacting customer service.
DoUse an expanding bottom sheet for advanced item selection. In this photos app, the expanded sheet allows users to review and take action on selected images.

Expanding bottom sheets and floating action buttons shouldn’t be used for the same purposes.

  • Floating action buttons are used for actions only, and they don’t respond to a user’s interaction with the rest of the screen. They can transform into larger surfaces to allow a user to complete an action.
  • Expanding bottom sheets transform into larger surfaces and can update their content to reflect user interactions.
DoUse an expanding bottom sheet to give access to a feature. It can also display updates on the status of that feature.
Don'tDon’t use a floating action button in place of an expanding bottom sheet. Floating action buttons are meant for actions only.

Anatomy

Expanding bottom sheets are anchored to the bottom corner of the screen. They have two states: a small, collapsed state and a larger, expanded state....

Expanding bottom sheets are anchored to the bottom corner of the screen. They have two states: a small, collapsed state and a larger, expanded state.

Collapsed state
1.Container
2.Icon
3.Label (Optional)

Expanded state
4.Header
5.Close action
6.Label
7.Content

Collapsed

When collapsed, an expanding bottom sheet is intended to be small and informative.

  • It can use shape and color to express that it is interactive.
  • An icon is required at minimum, and larger screen sizes should also include a short text label.
  • To avoid blocking content, the width shouldn’t exceed half the screen.
DoUse a short label in the collapsed state of an expanding bottom sheet to explain the feature or track updates, such as the number of unread messages.
Don'tDon’t increase the height or width of a collapsed expanding bottom sheet by stacking elements, wrapping text, or using long labels.

Expanded

When expanded, an expanding bottom sheet is full-screen on mobile (1), but can be smaller on tablet and desktop based on its content (2).

  • It contains a fixed header with a title and an affordance to collapse the sheet.
This bottom sheet covers the full screen on mobile (1). On tablet, it’s shorter to keep the main content visible (2) (Tablet example scaled to 62.5%.)

Behavior

Expanding bottom sheets can be expanded and collapsed.

Controls

Expanding bottom sheets can be expanded and collapsed.

  • When collapsed, the entire container is interactive, and tapping it expands the sheet.
  • Once expanded, the sheet displays an app bar with an action icon that enables collapsing the sheet. In addition, it can display a contextual action in the sheet that completes a task, such as “Checkout”, “Submit”, or “Download” buttons.
DoA collapsed bottom sheet expands the sheet when tapped.
Don'tDon’t add additional actions to a collapsed bottom sheet. Those actions should only appear when the sheet is expanded, in the expanded area.
Expanded bottom sheets must contain a dedicated affordance to collapse, such as an action icon (1). They can also be dismissed by an embedded action that completes the sheet’s task, such as the “Save” button in this image selection screen (2).

Placement

Expanding bottom sheets are fixed to the bottom, trailing corner of the screen to minimize obstructing the screen’s main content. On mobile devices, an expanding...

Expanding bottom sheets are fixed to the bottom, trailing corner of the screen to minimize obstructing the screen’s main content.

DoPlace expanding bottom sheets along the trailing edge of the screen. In this layout, the page’s headings can be read without interruption.
Don'tDon’t place expanding bottom sheets along the leading edge of the screen. In this layout, the placement of the collapsed sheet obstructs headings and actions.

Mobile

On mobile devices, an expanding bottom sheet affects other bottom-aligned components. It could obstruct important features such as bottom navigation, or create confusion when placed next to a floating action button.

The following recommendations suggest when and how to pair an expanding bottom sheet with nearby components:

Component Pair with an expanding bottom sheet? Recommendation
Bottom navigation Caution Place a collapsed sheet above bottom navigation. Hide bottom navigation on scroll and when a sheet expands.
Bottom app bar No A bottom app bar would obstruct a collapsed sheet.
Floating action button: Regular No Collapsed sheets have similar size and placement as floating action buttons, which may confuse users about the usage of each.
Floating action button: Extended Caution An extended floating action button can be used if center-aligned, so it doesn’t overlap with a collapsed sheet. The button width and collapsed sheet should both be short and styled differently from one other.
On-screen keyboard Yes When the keyboard appears, it covers the sheet. When the sheet is collapsed, it doesn’t attach to the keyboard.
Snackbar Yes To avoid overlap, place a snackbar above a collapsed sheet.
CautionAn expanding bottom sheet can be paired with other bottom-aligned components if done carefully. Example A shows a bottom sheet displaying both a label and message, as there is sufficient room to do so. Example B has a prominent extended floating action button instead, giving the sheet room to display only an icon.

Tablet and desktop

On larger screens, expanding bottom sheets don’t need to expand to the screen’s height or width. At a smaller size, expanding bottom sheets enable multi-tasking and other uses of screen space.

As their placement at the bottom of the screen may make them less noticeable, their content can be placed in a side sheet or accessed from a top app bar.

On tablet and desktop, this expanding bottom sheet doesn’t take up the full width or height of the screen, as it does on mobile.
On tablet and desktop, the bottom sheet content moves into a side sheet, where it remains visible. On mobile, this expanding bottom sheet contains a selection queue.

Theming

Posivibes Material Theme

This social media app’s bottom sheets have been customized using Material Theming. Areas of customization include color and shape. Posivibe’s bottom sheets use custom color...

This social media app’s bottom sheets have been customized using Material Theming. Areas of customization include color and shape.

Posivibe’s customized bottom sheets

Shape

Posivibe’s bottom sheets use a custom container shape. Bottom sheets can only be shaped on the top left and top right corners.

Element Category Attribute Value
Container Large component Family
Size
Cut
0;0; n/a; n/a dp*

Shrine Material Theme

Shrine is a retail app, and its expanding bottom sheet has been customized using Material Theming. Areas of customization include color and shape. Shrine’s expanding...

Shrine is a retail app, and its expanding bottom sheet has been customized using Material Theming. Areas of customization include color and shape.

Shrine’s customized expanding bottom sheet

Color

Shrine’s expanding bottom sheet uses custom colors on its container and icon.

Element Category Attribute Value
Container Secondary Color
Opacity
#FEEAE6
100%
Container On Secondary Color
Opacity
#442C2E
100%

Shape

The collapsed state of Shrine’s expanding bottom sheet uses a custom container shape. The top leading corner is shaped to help indicate it is interactive.*Expanding bottom sheets can only be shaped on the top left corner.

Element Category Attribute Value
Container Large component Family
Size
Cut
0; n/a; n/a; n/a dp*

Specs

Modal bottom sheet for mobile

  • Measurement max-height 1/2 screen
  • Measurement 360
  • Measurement 16
  • Measurement 56
  • Measurement 56
  • Measurement 36
 
  • Measurement 360
  • Measurement max-height 1/2 screen
  • Measurement 56
  • Measurement 56
  • Measurement 16
 

Standard bottom sheet for mobile

  • Measurement min height: 56dp
  • Measurement 360
 

Using bottom sheets

Before you can use Material bottom sheets, you need to add a dependency to the Material Components for Android library. For more information, go to the Getting started page.

Standard bottom sheet basic usage:

Modal bottom sheet basic usage:

More info on each individual section below.

Setting behavior

There are several attributes that can be used to adjust the behavior of both standard and modal bottom sheets.

In standard bottom sheets, they can be applied in xml by setting them on the same child View that has the app:layout_behavior set on it, or programmaticaly like so:

In modal bottom sheets they can be applied via app-level theme attributes and styles:

Or programmaticaly like so:

More info about these attributes and their default values in the behavior attributes section.

Retaining behavior on configuration change

In order to save and restore specific behaviors of the bottom sheet on configuration change, the following flags can be set (or combined with bitwise OR operations):

  • SAVE_PEEK_HEIGHT: app:behavior_peekHeight is preserved.
  • SAVE_HIDEABLE: app:behavior_hideable is preserved.
  • SAVE_SKIP_COLLAPSED: app:behavior_skipCollapsed is preserved.
  • SAVE_FIT_TO_CONTENTS: app:behavior_fitToContents is preserved.
  • SAVE_ALL: All aforementioned attributes are preserved.
  • SAVE_NONE: No attribute is preserved. This is the default value.

That can be done in code like so:

Or in xml via the app:behavior_saveFlags attribute.

Setting state

Standard and modal bottom sheets have the following states:

  • STATE_COLLAPSED: The bottom sheet is visible but only showing its peek height. This state is usually the 'resting position' of a bottom sheet, and should have enough height to indicate there is extra content for the user to interact with.
  • STATE_EXPANDED: The bottom sheet is visible at its maximum height and it is neither dragging or settling (see below).
  • STATE_HALF_EXPANDED: The bottom sheet is half-expanded (only applicable if behavior_fitToContents has been set to false), and is neither dragging or settling (see below).
  • STATE_HIDDEN: The bottom sheet is no longer visible and can only be re-shown programmatically.
  • STATE_DRAGGING: The user is actively dragging the bottom sheet up or down.
  • STATE_SETTLING: The bottom sheet is settling to specific height after a drag/swipe gesture. This will be the peek height, expanded height, or 0, in case the user action caused the bottom sheet to hide.

You can set a state on the bottom sheet like so:

Note: STATE_SETTLING and STATE_DRAGGING should not be set programmatically.

Listening to state and slide changes

A BottomSheetCallback can be added to a BottomSheetBehavior like so:

Handling insets and fullscreen

BottomSheetBehavior can automatically handle insets (such as for edge to edge) by specifying any of:

  • app:paddingBottomSystemWindowInsets
  • app:paddingLeftSystemWindowInsets
  • app:paddingRightSystemWindowInsets
  • app:paddingTopSystemWindowInsets

to true on the view.

On API 21 and above the modal bottom sheet will be rendered fullscreen (edge to edge) if the navigation bar is transparent and app:enableEdgeToEdge is true.

It can automatically add insets if any of the padding attributes above are set to true in the style, either by updating the style passed to the constructor, or by updating the default style specified by the ?attr/bottomSheetDialogTheme attribute in your theme.

BottomSheetDialog will also add padding to the top when the bottom sheet slides under the status bar to prevent content from being drawn underneath it.

Making bottom sheets accessible

The contents within a bottom sheet should follow their own accessibility guidelines, such as images having content descriptions set on them.

Standard bottom sheet

Standard bottom sheets co-exist with the screen’s main UI region and allow for simultaneously viewing and interacting with both regions. They are commonly used to keep a feature or secondary content visible on screen when content in main UI region is frequently scrolled or panned.

BottomSheetBehavior is applied to a child of CoordinatorLayout to make that child a persistent bottom sheet, which is a view that comes up from the bottom of the screen, elevated over the main content. It can be dragged vertically to expose more or less of their content.

API and source code:

Standard bottom sheet example

The following example shows a standard bottom sheet in its collapsed and expanded state:

Standard bottom sheet example. Collapsed on the left and expanded on the
right.

BottomSheetBehavior works in tandem with CoordinatorLayout to let you display content on a bottom sheet, perform enter/exit animations, respond to dragging/swiping gestures, etc.

Apply the BottomSheetBehavior to a direct child View of CoordinatorLayout like so:

In this example, the bottom sheet is in fact the FrameLayout.

Anatomy and key properties

Bottom sheets have a sheet, content, and, if modal, a scrim.

Bottom sheet anatomy

  1. Sheet
  2. Content
  3. Scrim (in modal bottom sheets)

Sheet attributes

ElementAttributeRelated method(s)Default value
Colorapp:backgroundTintN/A?attr/colorSurface
Shapeapp:shapeAppearanceN/A?attr/shapeAppearanceLargeComponent
Elevationandroid:elevationN/A1dp
Max widthandroid:maxWidthsetMaxWidth
getMaxWidth
640dp
Max heightandroid:maxHeightsetMaxHeight
getMaxHeight
N/A

Behavior attributes

More info about these attributes and how to use them in the setting behavior section.

BehaviorRelated method(s)Default value
app:behavior_peekHeightsetPeekHeight
getPeekHeight
auto
app:behavior_hideablesetHideable
isHideable
false for standard
true for modal
app:behavior_skipCollapsedsetSkipCollapsed
getSkipCollapsed
false
app:behavior_fitToContentssetFitToContents
isFitToContents
true
app:behavior_draggablesetDraggable
isDraggable
true
app:behavior_halfExpandedRatiosetHalfExpandedRatio
getHalfExpandedRatio
0.5
app:behavior_expandedOffsetsetExpandedOffset
getExpandedOffset
0dp

To save behavior on configuration change:

AttributeRelated method(s)Default value
app:behavior_saveFlagssetSaveFlags
getSaveFlags
SAVE_NONE

Styles

ElementDefault value
Default style (modal)@style/Widget.MaterialComponents.BottomSheet.Modal

Default style theme attribute:?attr/bottomSheetStyle

Theme overlays

ElementTheme overlay
Default theme overlayThemeOverlay.MaterialComponents.BottomSheetDialog

Default theme overlay attribute: ?attr/bottomSheetDialogTheme

See the full list of styles, attrs, and themes and theme overlays.

Theming bottom sheets

Bottom sheets support Material Theming and can be customized in terms of color and shape.

Bottom sheet theming example

API and source code:

The following example shows a bottom sheet with Material Theming, in its collapsed and expanded states.

Bottom sheet with pink background color. Collapsed on the left and expanded on
the right.

Implementing bottom sheet theming

Setting the theme attribute bottomSheetDialogTheme to your custom ThemeOverlay will affect all bottom sheets.

In res/values/themes.xml:

In res/values/styles.xml:

Note: The benefit of using a custom ThemeOverlay is that any changes to your main theme, such as updated colors, will be reflected in the bottom sheet (as long as they're not overridden in your custom theme overlay). If you use a custom Theme instead (by extending from one of the Theme.MaterialComponents.*.BottomSheetDialog variants) you have more control over exactly what attributes are included in each, but it also means you'll have to duplicate any changes that you've made in your main theme into these as well.

No Android implementation guidance available
No Web implementation guidance available

Using bottom sheets

Bottom sheets are supplementary surfaces primarily used on mobile.

Before you can use bottom sheets, you need to import the Material Components package for Flutter:

You need to be using a MaterialApp.

For more information on getting started with the Material for Flutter, go to the Flutter Material library page.

Making bottom sheets accessible

Flutter's APIs support accessibility setting for large fonts, screen readers, and sufficient contrast. For more information, go to Flutter's accessibility and internationalization pages.

For more guidance on writing labels, go to our page on how to write a good accessibility label.

Types

There are three types of bottom sheets: 1. Standard bottom sheets 2. Modal bottom sheets 3. Expanding bottom sheets

Composite image of bottom sheet types

Standard bottom sheet

Standard bottom sheets co-exist with the screen’s main UI region and allow for simultaneously viewing and interacting with both regions. They are commonly used to keep a feature or secondary content visible on screen when content in main UI region is frequently scrolled or panned.

Standard bottom sheet example

BottomSheet

The following is an example expanded standard bottom sheet:

Bottom sheet with "Header" and 5 items partially covering image of paper stacks.

The persistent bottom sheet can be used for a standard bottom sheet. Use a DraggableScrollableSheet for more custom dragging and snap points.

Anatomy and key properties

The following shows the anatomy of a standard bottom sheet:

Standard bottom sheet anatomy

  1. Sheet
  2. Contents

Sheets properties

 Property
ColorbackgroundColor
Elevationelevation
Shapeshape

Contents properties

There are no specific properties for content because the content can be any composition of widgets.

Anatomy and key properties

The following shows the anatomy of a modal bottom sheet:

Modal bottom sheet anatomy

  1. Sheet
  2. Contents
  3. Scrim

Sheets properties

 Property
ColorbackgroundColor
Elevationelevation
Shapeshape

Contents properties

There are no specific properties for content because the content can be any composition of widgets.

Scrim properties

 Property
ColorbarrierColor

Expanding bottom sheet

Expanding bottom sheets provide a small, collapsed surface that can be expanded by the user to access a key feature or task to offer the persistent access of a standard sheet with the space and focus of a modal sheet.

Expanding bottom sheets require creating a custom widget. See Expanding bottom sheet for more info.

Theming bottom sheets

Bottom Sheets support Material Theming and can be customized in terms of color, elevation and shape.

Source code API:

Theming for bottom sheet content can be done by theming the widgets that are inside the widget returned by the builder of showBottomSheet or showModalBottomSheet.

  • The widget used for list items is commonly a ListTile, and can be themed with ListTileTheme.
  • Other Texts and Icons can be themed with TextTheme and IconTheme.

The following shows a modal bottom sheet with Shrine theming:

Bottom sheet with "Header" and 5 items partially covering image of paper stacks in shrine theme.

No Flutter implementation guidance available

Using bottom sheets

Bottom sheets are supplementary surfaces primarily used on mobile.

Installing

In order to install with Cocoapods, first add the component to your Podfile:

Then run the installer:

From there, import the relevant target or file.

Swift

Objective-C

Making bottom sheets accessible

As a user of the bottom sheet component, it is up to you to determine that its contents are accessible. The bottom sheet ccomponent does not have any specific APIs for managing the accessibility of a bottom sheet's contents. MDCBottomSheetController does, however, have such APIs for the scrim:

  • isScrimAccessibilityElement
  • scrimAccessibilityLabel
  • scrimAccessibilityHint
  • scrimAccessibilityTraits

We recommend giving all of these properties appropriate values for your use case.

Types

There are three types suitable for different use cases:

  1. Standard bottom sheets display content that complements the screen’s primary content and remain visible while users interact with the primary content
  2. Modal bottom sheets are an alternative to inline menus or simple dialogs on mobile and provide room for additional items, longer descriptions, and iconography, and must be dismissed in order to interact with the underlying content
  3. Expanding bottom sheets provide a small, collapsed surface that can be expanded by the user to access a key feature or task to offer the persistent access of a standard sheet with the space and focus of a modal sheet.

Composite image of bottom sheet types

Note: Standard bottom sheets aren't supported on iOS. This is because the iOS bottom sheet implementation makes use of custom view controller transitions, which do not allow interaction with the presenting view controller, even when the presented view controller does not take up the whole screen.

Expanding bottom sheet

An expanding bottom sheet is a surface anchored to the bottom of the screen that users can expand to access a feature or task. It can be used for:

  • Persistently displaying a cross-app feature, such as a shopping cart
  • Collecting and acting on user selections from a set of items, such as photos in a gallery
  • Supporting tasks, such as chat and comments
  • Indirect navigation between items, such as videos in a playlist

Expanding bottom sheets are recommended for use on mobile and tablet.

Expanding bottom sheet example

To generate an expanding bottom sheet on iOS, set the trackingScrollView property on your MDCBottomSheetController. If the contentSize of the scroll view has a large enough height the bottom sheet will expand to the top.

Swift

Objective-C

Theming

Unlike most Material components on iOS, bottom sheets do not offer theming with a container scheme. However, MDCBottomSheetController does have a shape themer. In order to use the shape themer, first add the following to your Podfile:

Then run the installer:

Next, import the relevant taret or file and call the correct theming method.

Swift

Objective-C

No iOS implementation guidance available

Up next