development/flutter
development/flutter
1
0
Fork 0
mirror of https://github.com/flutter/flutter synced 2024-10-13 19:52:53 +00:00
Code Issues Packages Projects Releases Wiki Activity

Add endIndent property to Divider and VerticalDivider (#34057)

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

* Updated Divider documentation
This commit is contained in:
Shi-Hao Hong 2019-06-07 18:32:17 -07:00 committed by GitHub
parent 8896f48c0f
commit d3c864de06
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
2 changed files with 125 additions and 15 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

34
packages/flutter/lib/src/material/divider.dart
View file

@ -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.
/// * <https://material.io/design/components/dividers.html>
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),

106
packages/flutter/test/material/divider_test.dart
View file

@ -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);
});
}