divider.dart 5.62 KB
Newer Older
Hans Muller's avatar
Hans Muller committed
1 2 3 4 5
// Copyright 2015 The Chromium Authors. All rights reserved.
// Use of this source code is governed by a BSD-style license that can be
// found in the LICENSE file.

import 'package:flutter/widgets.dart';
jslavitz's avatar
jslavitz committed
6
import 'package:flutter/painting.dart';
Hans Muller's avatar
Hans Muller committed
7 8 9

import 'theme.dart';

10
/// A one device pixel thick horizontal line, with padding on either
11 12 13
/// side.
///
/// In the material design language, this represents a divider.
14
///
15
/// Dividers can be used in lists, [Drawer]s, and elsewhere to separate content
jslavitz's avatar
jslavitz committed
16 17 18
/// vertically or horizontally depending on the value of the [axis] enum.
/// To create a one-pixel divider between items in a list, consider using
/// [ListTile.divideTiles], which is optimized for this case.
19
///
jslavitz's avatar
jslavitz committed
20 21
/// The box's total height is controlled by [height]. The appropriate
/// padding is automatically computed from the width or height.
22
///
23
/// See also:
24
///
25
///  * [PopupMenuDivider], which is the equivalent but for popup menus.
26
///  * [ListTile.divideTiles], another approach to dividing widgets in a list.
27
///  * <https://material.google.com/components/dividers.html>
28
class Divider extends StatelessWidget {
29 30
  /// Creates a material design divider.
  ///
31
  /// The height must be positive.
32
  const Divider({
33
    Key key,
34 35
    this.height = 16.0,
    this.indent = 0.0,
36
    this.color
37
  }) : assert(height >= 0.0),
38
       super(key: key);
Hans Muller's avatar
Hans Muller committed
39

jslavitz's avatar
jslavitz committed
40 41

  /// The divider's height extent.
42
  ///
43
  /// The divider itself is always drawn as one device pixel thick horizontal
44
  /// line that is centered within the height specified by this value.
45
  ///
jslavitz's avatar
jslavitz committed
46 47
  /// A divider with a [height] of 0.0 is always drawn as a line with a height
  /// of exactly one device pixel, without any padding around it.
Hans Muller's avatar
Hans Muller committed
48
  final double height;
49 50

  /// The amount of empty space to the left of the divider.
Hans Muller's avatar
Hans Muller committed
51
  final double indent;
52 53 54

  /// The color to use when painting the line.
  ///
55 56
  /// Defaults to the current theme's divider color, given by
  /// [ThemeData.dividerColor].
57
  ///
58 59
  /// ## Sample code
  ///
60
  /// ```dart
61
  /// Divider(
62 63
  ///   color: Colors.deepOrange,
  /// )
64
  /// ```
Hans Muller's avatar
Hans Muller committed
65 66
  final Color color;

67 68 69 70 71 72 73 74 75 76 77 78 79 80
  /// Computes the [BorderSide] that represents a divider of the specified
  /// color, or, if there is no specified color, of the default
  /// [ThemeData.dividerColor] specified in the ambient [Theme].
  ///
  /// The `width` argument can be used to override the default width of the
  /// divider border, which is usually 0.0 (a hairline border).
  ///
  /// ## Sample code
  ///
  /// This example uses this method to create a box that has a divider above and
  /// below it. This is sometimes useful with lists, for instance, to separate a
  /// scrollable section from the rest of the interface.
  ///
  /// ```dart
81 82 83
  /// DecoratedBox(
  ///   decoration: BoxDecoration(
  ///     border: Border(
84 85 86 87 88 89 90
  ///       top: Divider.createBorderSide(context),
  ///       bottom: Divider.createBorderSide(context),
  ///     ),
  ///   ),
  ///   // child: ...
  /// )
  /// ```
91
  static BorderSide createBorderSide(BuildContext context, { Color color, double width = 0.0 }) {
92
    assert(width != null);
93
    return BorderSide(
94 95 96 97 98
      color: color ?? Theme.of(context).dividerColor,
      width: width,
    );
  }

99
  @override
Hans Muller's avatar
Hans Muller committed
100
  Widget build(BuildContext context) {
101
    return SizedBox(
102
      height: height,
103 104
      child: Center(
        child: Container(
105
          height: 0.0,
106 107 108
          margin: EdgeInsetsDirectional.only(start: indent),
          decoration: BoxDecoration(
            border: Border(
109
              bottom: createBorderSide(context, color: color),
110 111 112
            ),
          ),
        ),
Hans Muller's avatar
Hans Muller committed
113 114 115 116
      ),
    );
  }
}
jslavitz's avatar
jslavitz committed
117 118 119 120 121 122 123 124 125 126 127 128 129 130 131 132 133 134 135 136 137 138 139 140 141 142 143 144 145 146 147 148 149 150 151 152 153 154 155 156 157 158 159 160 161 162 163 164 165 166 167 168 169 170 171 172 173 174 175 176 177 178

/// A one device pixel thick vertical line, with padding on either
/// side.
///
/// In the material design language, this represents a divider.
///
/// Dividers can be used in lists, [Drawer]s, and elsewhere to separate content
/// horizontally. To create a one-pixel divider between items in a list,
/// consider using [ListTile.divideTiles], which is optimized for this case.
///
/// The box's total width is controlled by [width]. The appropriate
/// padding is automatically computed from the width.
///
/// See also:
///
///  * [PopupMenuDivider], which is the equivalent but for popup menus.
///  * [ListTile.divideTiles], another approach to dividing widgets in a list.
///  * <https://material.google.com/components/dividers.html>
class VerticalDivider extends StatelessWidget {
  /// Creates a material design divider.
  ///
  /// The width must be positive.
  const VerticalDivider({
    Key key,
    this.width = 16.0,
    this.indent = 0.0,
    this.color
  }) : assert(width >= 0.0),
       super(key: key);

  /// The divider's width.
  ///
  /// The divider itself is always drawn as one device pixel thick
  /// line that is centered within the width specified by this value.
  ///
  /// A divider with a [width] of 0.0 is always drawn as a line with a width
  /// of exactly one device pixel, without any padding around it.
  final double width;

  /// The amount of empty space to the left of the divider.
  final double indent;

  /// The color to use when painting the line.
  ///
  /// Defaults to the current theme's divider color, given by
  /// [ThemeData.dividerColor].
  ///
  /// ## Sample code
  ///
  /// ```dart
  /// Divider(
  ///   color: Colors.deepOrange,
  /// )
  /// ```
  final Color color;

  @override
  Widget build(BuildContext context) {
    return SizedBox(
      width: width,
      child: Center(
        child: Container(
jslavitz's avatar
jslavitz committed
179
          width: 0.0,
jslavitz's avatar
jslavitz committed
180 181 182
          margin: EdgeInsetsDirectional.only(start: indent),
          decoration: BoxDecoration(
            border: Border(
jslavitz's avatar
jslavitz committed
183
              left: Divider.createBorderSide(context, color: color),
jslavitz's avatar
jslavitz committed
184 185 186 187 188 189 190
            ),
          ),
        ),
      ),
    );
  }
}