Unverified Commit d3c864de authored by Shi-Hao Hong's avatar Shi-Hao Hong Committed by GitHub

Add endIndent property to Divider and VerticalDivider (#34057)

* Fixed indent to properly add to the top and not to the start

* Updated Divider documentation
parent 8896f48c
...@@ -13,15 +13,14 @@ import 'theme.dart'; ...@@ -13,15 +13,14 @@ import 'theme.dart';
/// A one device pixel thick horizontal line, with padding on either /// A one device pixel thick horizontal line, with padding on either
/// side. /// 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 /// To create a one-pixel divider between [ListTile] items, consider using
/// 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. /// [ListTile.divideTiles], which is optimized for this case.
/// ///
/// The box's total height is controlled by [height]. The appropriate /// 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: /// See also:
/// ///
...@@ -36,6 +35,7 @@ class Divider extends StatelessWidget { ...@@ -36,6 +35,7 @@ class Divider extends StatelessWidget {
Key key, Key key,
this.height = 16.0, this.height = 16.0,
this.indent = 0.0, this.indent = 0.0,
this.endIndent = 0.0,
this.color, this.color,
}) : assert(height >= 0.0), }) : assert(height >= 0.0),
super(key: key); super(key: key);
...@@ -53,6 +53,9 @@ class Divider extends StatelessWidget { ...@@ -53,6 +53,9 @@ class Divider extends StatelessWidget {
/// The amount of empty space to the left of the divider. /// The amount of empty space to the left of the divider.
final double indent; 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. /// The color to use when painting the line.
/// ///
/// Defaults to the current theme's divider color, given by /// Defaults to the current theme's divider color, given by
...@@ -108,7 +111,7 @@ class Divider extends StatelessWidget { ...@@ -108,7 +111,7 @@ class Divider extends StatelessWidget {
child: Center( child: Center(
child: Container( child: Container(
height: 0.0, height: 0.0,
margin: EdgeInsetsDirectional.only(start: indent), margin: EdgeInsetsDirectional.only(start: indent, end: endIndent),
decoration: BoxDecoration( decoration: BoxDecoration(
border: Border( border: Border(
bottom: createBorderSide(context, color: color), bottom: createBorderSide(context, color: color),
...@@ -123,19 +126,16 @@ class Divider extends StatelessWidget { ...@@ -123,19 +126,16 @@ class Divider extends StatelessWidget {
/// A one device pixel thick vertical line, with padding on either /// A one device pixel thick vertical line, with padding on either
/// side. /// side.
/// ///
/// In the material design language, this represents a divider. /// In the material design language, this represents a divider. Vertical
/// /// dividers can be used in horizontally scrolling lists, such as a
/// Dividers can be used in lists, [Drawer]s, and elsewhere to separate content /// [ListView] with [ListView.scrollDirection] set to [Axis.horizontal].
/// 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 /// The box's total width is controlled by [width]. The appropriate
/// padding is automatically computed from the width. /// padding is automatically computed from the width.
/// ///
/// See also: /// See also:
/// ///
/// * [PopupMenuDivider], which is the equivalent but for popup menus. /// * [ListView.separated], which can be used to generate vertical dividers.
/// * [ListTile.divideTiles], another approach to dividing widgets in a list.
/// * <https://material.io/design/components/dividers.html> /// * <https://material.io/design/components/dividers.html>
class VerticalDivider extends StatelessWidget { class VerticalDivider extends StatelessWidget {
/// Creates a material design divider. /// Creates a material design divider.
...@@ -145,6 +145,7 @@ class VerticalDivider extends StatelessWidget { ...@@ -145,6 +145,7 @@ class VerticalDivider extends StatelessWidget {
Key key, Key key,
this.width = 16.0, this.width = 16.0,
this.indent = 0.0, this.indent = 0.0,
this.endIndent = 0.0,
this.color, this.color,
}) : assert(width >= 0.0), }) : assert(width >= 0.0),
super(key: key); super(key: key);
...@@ -158,9 +159,12 @@ class VerticalDivider extends StatelessWidget { ...@@ -158,9 +159,12 @@ class VerticalDivider extends StatelessWidget {
/// of exactly one device pixel, without any padding around it. /// of exactly one device pixel, without any padding around it.
final double width; 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; final double indent;
/// The amount of empty space under the divider.
final double endIndent;
/// The color to use when painting the line. /// The color to use when painting the line.
/// ///
/// Defaults to the current theme's divider color, given by /// Defaults to the current theme's divider color, given by
...@@ -183,7 +187,7 @@ class VerticalDivider extends StatelessWidget { ...@@ -183,7 +187,7 @@ class VerticalDivider extends StatelessWidget {
child: Center( child: Center(
child: Container( child: Container(
width: 0.0, width: 0.0,
margin: EdgeInsetsDirectional.only(start: indent), margin: EdgeInsetsDirectional.only(top: indent, bottom: endIndent),
decoration: BoxDecoration( decoration: BoxDecoration(
border: Border( border: Border(
left: Divider.createBorderSide(context, color: color), left: Divider.createBorderSide(context, color: color),
......
...@@ -22,6 +22,59 @@ void main() { ...@@ -22,6 +22,59 @@ void main() {
expect(find.byType(Divider), paints..path(strokeWidth: 0.0)); 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 { testWidgets('Vertical Divider Test', (WidgetTester tester) async {
await tester.pumpWidget( await tester.pumpWidget(
const Directionality( const Directionality(
...@@ -59,4 +112,57 @@ void main() { ...@@ -59,4 +112,57 @@ void main() {
expect(containerBox.size.height, 600.0); expect(containerBox.size.height, 600.0);
expect(find.byType(VerticalDivider), paints..path(strokeWidth: 0.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);
});
} }
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment