diff --git a/packages/flutter/lib/src/material/divider.dart b/packages/flutter/lib/src/material/divider.dart index 74ac02a841..dca38fe623 100644 --- a/packages/flutter/lib/src/material/divider.dart +++ b/packages/flutter/lib/src/material/divider.dart @@ -13,15 +13,14 @@ import 'theme.dart'; /// A one device pixel thick horizontal line, with padding on either /// side. /// -/// In the material design language, this represents a divider. +/// In the material design language, this represents a divider. Dividers can be +/// used in lists, [Drawer]s, and elsewhere to separate content. /// -/// Dividers can be used in lists, [Drawer]s, and elsewhere to separate content -/// vertically or horizontally depending on the value of the [axis] enum. -/// To create a one-pixel divider between items in a list, consider using +/// To create a one-pixel divider between [ListTile] items, consider using /// [ListTile.divideTiles], which is optimized for this case. /// /// The box's total height is controlled by [height]. The appropriate -/// padding is automatically computed from the width or height. +/// padding is automatically computed from the height. /// /// See also: /// @@ -36,6 +35,7 @@ class Divider extends StatelessWidget { Key key, this.height = 16.0, this.indent = 0.0, + this.endIndent = 0.0, this.color, }) : assert(height >= 0.0), super(key: key); @@ -53,6 +53,9 @@ class Divider extends StatelessWidget { /// The amount of empty space to the left of the divider. final double indent; + /// The amount of empty space to the right of the divider. + final double endIndent; + /// The color to use when painting the line. /// /// Defaults to the current theme's divider color, given by @@ -108,7 +111,7 @@ class Divider extends StatelessWidget { child: Center( child: Container( height: 0.0, - margin: EdgeInsetsDirectional.only(start: indent), + margin: EdgeInsetsDirectional.only(start: indent, end: endIndent), decoration: BoxDecoration( border: Border( bottom: createBorderSide(context, color: color), @@ -123,19 +126,16 @@ class Divider extends StatelessWidget { /// 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. +/// In the material design language, this represents a divider. Vertical +/// dividers can be used in horizontally scrolling lists, such as a +/// [ListView] with [ListView.scrollDirection] set to [Axis.horizontal]. /// /// 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. +/// * [ListView.separated], which can be used to generate vertical dividers. /// * class VerticalDivider extends StatelessWidget { /// Creates a material design divider. @@ -145,6 +145,7 @@ class VerticalDivider extends StatelessWidget { Key key, this.width = 16.0, this.indent = 0.0, + this.endIndent = 0.0, this.color, }) : assert(width >= 0.0), super(key: key); @@ -158,9 +159,12 @@ class VerticalDivider extends StatelessWidget { /// of exactly one device pixel, without any padding around it. final double width; - /// The amount of empty space to the left of the divider. + /// The amount of empty space on top of the divider. final double indent; + /// The amount of empty space under the divider. + final double endIndent; + /// The color to use when painting the line. /// /// Defaults to the current theme's divider color, given by @@ -183,7 +187,7 @@ class VerticalDivider extends StatelessWidget { child: Center( child: Container( width: 0.0, - margin: EdgeInsetsDirectional.only(start: indent), + margin: EdgeInsetsDirectional.only(top: indent, bottom: endIndent), decoration: BoxDecoration( border: Border( left: Divider.createBorderSide(context, color: color), diff --git a/packages/flutter/test/material/divider_test.dart b/packages/flutter/test/material/divider_test.dart index 6a7ae90220..ad5628b5bb 100644 --- a/packages/flutter/test/material/divider_test.dart +++ b/packages/flutter/test/material/divider_test.dart @@ -22,6 +22,59 @@ void main() { expect(find.byType(Divider), paints..path(strokeWidth: 0.0)); }); + testWidgets('Horizontal divider custom indentation', (WidgetTester tester) async { + const double customIndent = 10.0; + Rect dividerRect; + Rect lineRect; + + await tester.pumpWidget( + const Directionality( + textDirection: TextDirection.ltr, + child: Center( + child: Divider( + indent: customIndent, + ), + ), + ), + ); + // The divider line is drawn with a DecoratedBox with a border + dividerRect = tester.getRect(find.byType(Divider)); + lineRect = tester.getRect(find.byType(DecoratedBox)); + expect(lineRect.left, dividerRect.left + customIndent); + expect(lineRect.right, dividerRect.right); + + await tester.pumpWidget( + const Directionality( + textDirection: TextDirection.ltr, + child: Center( + child: Divider( + endIndent: customIndent, + ), + ), + ), + ); + dividerRect = tester.getRect(find.byType(Divider)); + lineRect = tester.getRect(find.byType(DecoratedBox)); + expect(lineRect.left, dividerRect.left); + expect(lineRect.right, dividerRect.right - customIndent); + + await tester.pumpWidget( + const Directionality( + textDirection: TextDirection.ltr, + child: Center( + child: Divider( + indent: customIndent, + endIndent: customIndent, + ), + ), + ), + ); + dividerRect = tester.getRect(find.byType(Divider)); + lineRect = tester.getRect(find.byType(DecoratedBox)); + expect(lineRect.left, dividerRect.left + customIndent); + expect(lineRect.right, dividerRect.right - customIndent); + }); + testWidgets('Vertical Divider Test', (WidgetTester tester) async { await tester.pumpWidget( const Directionality( @@ -59,4 +112,57 @@ void main() { expect(containerBox.size.height, 600.0); expect(find.byType(VerticalDivider), paints..path(strokeWidth: 0.0)); }); + + testWidgets('Vertical divider custom indentation', (WidgetTester tester) async { + const double customIndent = 10.0; + Rect dividerRect; + Rect lineRect; + + await tester.pumpWidget( + const Directionality( + textDirection: TextDirection.ltr, + child: Center( + child: VerticalDivider( + indent: customIndent, + ), + ), + ), + ); + // The divider line is drawn with a DecoratedBox with a border + dividerRect = tester.getRect(find.byType(VerticalDivider)); + lineRect = tester.getRect(find.byType(DecoratedBox)); + expect(lineRect.top, dividerRect.top + customIndent); + expect(lineRect.bottom, dividerRect.bottom); + + await tester.pumpWidget( + const Directionality( + textDirection: TextDirection.ltr, + child: Center( + child: VerticalDivider( + endIndent: customIndent, + ), + ), + ), + ); + dividerRect = tester.getRect(find.byType(VerticalDivider)); + lineRect = tester.getRect(find.byType(DecoratedBox)); + expect(lineRect.top, dividerRect.top); + expect(lineRect.bottom, dividerRect.bottom - customIndent); + + await tester.pumpWidget( + const Directionality( + textDirection: TextDirection.ltr, + child: Center( + child: VerticalDivider( + indent: customIndent, + endIndent: customIndent, + ), + ), + ), + ); + dividerRect = tester.getRect(find.byType(VerticalDivider)); + lineRect = tester.getRect(find.byType(DecoratedBox)); + expect(lineRect.top, dividerRect.top + customIndent); + expect(lineRect.bottom, dividerRect.bottom - customIndent); + }); }