material-components_material-components-flutter/docs/components/dividers.md

Dividers

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

Contents

• Making dividers accessible
• Anatomy and key properties
• Types
• Theming dividers

Making dividers 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.

Anatomy and key properties

The following shows the anatomy of a divider:

Divider

	Property
Color	Within the Divider widget use the color parameter
Space	Within the Divider widget use the height parameter. Within the VerticalDivider widget use the width parameter.
Indent	Within the Divider widget use the indent parameter
End Indent	Within the Divider widget use the endIndent parameter
Thickness	Within the Divider widget use the thickness parameter

Types

There are 4 types of dividers:

1. Full Bleed divider
2. Inset divider
3. Middle divider
4. Vertical divider

Full-bleed dividers

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

Full-bleed dividers example

• Class definition
• GitHub source
• Dartpad demo
• YouTube video

The following example shows a list with full-bleed dividers:

Divider(),

Inset dividers

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

Inset divider example

• Class definition
• GitHub source
• Dartpad demo

The following example shows two lists separated by an inset divider and a subheader

Divider(indent: 16),
Container(
  padding: EdgeInsets.only(left: 16),
  child: Align(
    alignment: Alignment.centerLeft,
    child: Text(
      'Subheader',
      style: Theme.of(context).textTheme.bodyText2.copyWith(
          fontSize: 12.0,
          color: Theme.of(context).textTheme.caption.color),
      textAlign: TextAlign.start,
    ),
  ),
),

Middle dividers

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

Middle divider example

• Class definition
• GitHub source
• Dartpad demo

The following example shows a middle divider separating a list of items and their prices and the total cost:

Divider(
  indent: 16,
  endIndent: 16,
),

Flutter Vertical Dividers

Vertical divider offers the same parameters as the regular divider but instead the divider is vertical.

VerticalDivider

• Class definition
• GitHub source
• Dartpad demo

VerticalDivider()

Theming dividers

Divider

• Class definition
• GitHub source
• Dartpad demo

The following shows an inset divider with Shrine theming

import 'package:flutter/material.dart';

void main() => runApp(MyApp());

class MyApp extends StatefulWidget {
  @override
  _MyAppState createState() => _MyAppState();
}

class _MyAppState extends State<MyApp> {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      theme: _buildShrineTheme(),
      home: Scaffold(
        body: DividerThemeDemo(),
      ),
    );
  }
}

class DividerThemeDemo extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Center(
      child: Column(
        children: <Widget>[
          Expanded(
            child: Container(
              color: Colors.amber,
              child: const Center(
                child: Text('Start'),
              ),
            ),
          ),
          const Divider(),
          Expanded(
            child: Container(
              color: Colors.blue,
              child: const Center(
                child: Text('End'),
              ),
            ),
          ),
        ],
      ),
    );
  }
}

ThemeData _buildShrineTheme() {
  final ThemeData base = ThemeData.light();
  return base.copyWith(
    colorScheme: _shrineColorScheme,
    accentColor: shrineBrown900,
    primaryColor: shrinePink100,
    buttonColor: shrinePink100,
    scaffoldBackgroundColor: shrineBackgroundWhite,
    cardColor: shrineBackgroundWhite,
    textSelectionTheme: TextSelectionThemeData(selectionColor: shrinePink100),
    errorColor: shrineErrorRed,
    buttonTheme: const ButtonThemeData(
      colorScheme: _shrineColorScheme,
      textTheme: ButtonTextTheme.normal,
    ),
    primaryIconTheme: _customIconTheme(base.iconTheme),
    textTheme: _buildShrineTextTheme(base.textTheme),
    primaryTextTheme: _buildShrineTextTheme(base.primaryTextTheme),
    accentTextTheme: _buildShrineTextTheme(base.accentTextTheme),
    iconTheme: _customIconTheme(base.iconTheme),
  );
}

IconThemeData _customIconTheme(IconThemeData original) {
  return original.copyWith(color: shrineBrown900);
}

TextTheme _buildShrineTextTheme(TextTheme base) {
  return base
      .copyWith(
        caption: base.caption.copyWith(
          fontWeight: FontWeight.w400,
          fontSize: 14,
          letterSpacing: defaultLetterSpacing,
        ),
        button: base.button.copyWith(
          fontWeight: FontWeight.w500,
          fontSize: 14,
          letterSpacing: defaultLetterSpacing,
        ),
      )
      .apply(
        fontFamily: 'Rubik',
        displayColor: shrineBrown900,
        bodyColor: shrineBrown900,
      );
}

const ColorScheme _shrineColorScheme = ColorScheme(
  primary: shrinePink100,
  primaryVariant: shrineBrown900,
  secondary: shrinePink50,
  secondaryVariant: shrineBrown900,
  surface: shrineSurfaceWhite,
  background: shrineBackgroundWhite,
  error: shrineErrorRed,
  onPrimary: shrineBrown900,
  onSecondary: shrineBrown900,
  onSurface: shrineBrown900,
  onBackground: shrineBrown900,
  onError: shrineSurfaceWhite,
  brightness: Brightness.light,
);

const Color shrinePink50 = Color(0xFFFEEAE6);
const Color shrinePink100 = Color(0xFFFEDBD0);
const Color shrinePink300 = Color(0xFFFBB8AC);
const Color shrinePink400 = Color(0xFFEAA4A4);

const Color shrineBrown900 = Color(0xFF442B2D);
const Color shrineBrown600 = Color(0xFF7D4F52);

const Color shrineErrorRed = Color(0xFFC5032B);

const Color shrineSurfaceWhite = Color(0xFFFFFBFA);
const Color shrineBackgroundWhite = Colors.white;

const defaultLetterSpacing = 0.03;