Make dividers one device pixel thick as defined in Material design spec (#10523)

* Make dividers one device pixel thick as defined in Material design spec

* Updated divider test to check stroke width

* Clarified dividers with 0 height in the docs

* Updated Divider.height docs according to PR feedback
This commit is contained in:
Anatoly Pulyaevskiy 2017-06-12 21:47:56 -07:00 committed by Ian Hickson
parent b4ba972bf3
commit bb119e95fa
5 changed files with 28 additions and 20 deletions

View file

@ -6,7 +6,7 @@ import 'package:flutter/widgets.dart';
import 'theme.dart';
/// A one logical pixel thick horizontal line, with padding on either
/// A one device pixel thick horizontal line, with padding on either
/// side.
///
/// In the material design language, this represents a divider.
@ -26,19 +26,22 @@ import 'theme.dart';
class Divider extends StatelessWidget {
/// Creates a material design divider.
///
/// The height must be at least 1.0 logical pixels.
/// The height must be positive.
const Divider({
Key key,
this.height: 16.0,
this.indent: 0.0,
this.color
}) : assert(height >= 1.0),
}) : assert(height >= 0.0),
super(key: key);
/// The divider's vertical extent.
///
/// The divider itself is always drawn as one logical pixel thick horizontal
/// The divider itself is always drawn as one device pixel thick horizontal
/// line that is centered within the height specified by this value.
///
/// 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.
final double height;
/// The amount of empty space to the left of the divider.
@ -58,19 +61,22 @@ class Divider extends StatelessWidget {
@override
Widget build(BuildContext context) {
final double bottom = (height ~/ 2.0).toDouble();
return new Container(
height: 0.0,
margin: new EdgeInsets.only(
top: height - bottom - 1.0,
left: indent,
bottom: bottom
return new SizedBox(
height: height,
child: new Center(
child: new Container(
height: 0.0,
margin: new EdgeInsets.only(left: indent),
decoration: new BoxDecoration(
border: new Border(
bottom: new BorderSide(
color: color ?? Theme.of(context).dividerColor,
width: 0.0,
),
),
),
),
),
decoration: new BoxDecoration(
border: new Border(
bottom: new BorderSide(color: color ?? Theme.of(context).dividerColor)
)
)
);
}
}

View file

@ -82,7 +82,7 @@ class DrawerHeader extends StatelessWidget {
border: new Border(
bottom: new BorderSide(
color: theme.dividerColor,
width: 1.0
width: 0.0
)
)
),

View file

@ -294,7 +294,7 @@ class ListTile extends StatelessWidget {
position: DecorationPosition.foreground,
decoration: new BoxDecoration(
border: new Border(
bottom: new BorderSide(color: dividerColor),
bottom: new BorderSide(color: dividerColor, width: 0.0),
),
),
child: tile,

View file

@ -4,11 +4,13 @@
import 'package:flutter/material.dart';
import 'package:flutter_test/flutter_test.dart';
import '../rendering/mock_canvas.dart';
void main() {
testWidgets('Divider control test', (WidgetTester tester) async {
await tester.pumpWidget(const Center(child: const Divider()));
final RenderBox box = tester.firstRenderObject(find.byType(Divider));
expect(box.size.height, 15.0);
expect(box.size.height, 16.0);
expect(find.byType(Divider), paints..path(strokeWidth: 0.0));
});
}

View file

@ -48,7 +48,7 @@ void main() {
box = tester.renderObject(find.byKey(containerKey));
expect(box.size.width, equals(drawerWidth - 2 * 16.0));
expect(box.size.height, equals(drawerHeight - 2 * 16.0 - 1.0)); // bottom edge
expect(box.size.height, equals(drawerHeight - 2 * 16.0));
expect(find.text('header'), findsOneWidget);
});