Dividers

A divider is a thin line that groups content in lists and layouts.


Usage

Dividers separate content into clear groups.

Principles

Dividers should be noticeable in a layout, but not jarring. Dividers should only be used if elements cannot be separated using white space. Use dividers...

Read More

Subtle

Dividers should be noticeable in a layout, but not jarring.

Secondary

Dividers should only be used if elements cannot be separated using white space.

Infrequent

Use dividers sparingly, to create groupings rather than separate items.

Types

Full-bleed dividers separate content into sections and span the entire length of a layout. Inset dividers separate related content, anchored by elements that align with...

Read More

Full-bleed dividers

Full-bleed dividers separate content into sections and span the entire length of a layout.

Inset dividers

Inset dividers separate related content, anchored by elements that align with the app bar title.

Middle dividers

Middle dividers space related content and are centered in a layout or list.

Dividers with subheaders

Dividers can be paired with subheaders to help define content groupings.


Types

Full-bleed dividers

Full-bleed dividers separate content into sections.

Read More

Full-bleed dividers separate content into sections, such as:

  • Separating list and layout elements
  • Indicating where an element may expand

When lists don’t have an anchoring element (such as an icon), spacing may not be enough to separate content. Full-bleed dividers can help separate individual tiles.

A full-bleed divider in a navigation drawer

Inset dividers

Inset dividers separate related content, such as emails in an email thread. They should be used with anchoring elements such as icons or avatars, and...

Read More

Inset dividers separate related content, such as emails in an email thread. They should be used with anchoring elements such as icons or avatars, and left-aligned with the app bar title.

Inset dividers

Use inset dividers when there are anchoring elements such as an icon or avatar.

Do.

Use inset dividers to group items.

Don’t.

Don’t use dividers to separate individual items.

Middle dividers

Dividers can also be placed in the middle of a layout. They are best for separating related content, such prices on a receipt.

Read More

Dividers can also be placed in the middle of a layout. They are best for separating related content, such prices on a receipt.

An inset divider above a subheader

A full divider above a subheader

Dividers with subheaders

Dividers can be paired with subheaders to identify grouped content. Place dividers above subheaders to reinforce the subheader’s connection to content.

Read More

Dividers can be paired with subheaders to identify grouped content. Place dividers above subheaders to reinforce the subheader’s connection to content.

An inset divider above a subheader

A full-bleed divider above a subheader


Theming

Fortnightly Material Theme

This news app’s divider color has been customized using Material Theming. Fortnightly is a news app that uses Material Design components and Material Theming to...

Read More

Owl Material Theme

This educational app’s divider color has been customized using Material Theming. Owl is an educational app that provides courses for people who want to explore...

Read More

Specs

  • Measurement 1

Implementation

Dividers implementation support for each platform is indicated below.

Flutter Material Component

Status: Code Available