Commit bb119e95 authored by Anatoly Pulyaevskiy's avatar Anatoly Pulyaevskiy Committed by Ian Hickson

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
parent b4ba972b
...@@ -6,7 +6,7 @@ import 'package:flutter/widgets.dart'; ...@@ -6,7 +6,7 @@ import 'package:flutter/widgets.dart';
import 'theme.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. /// side.
/// ///
/// In the material design language, this represents a divider. /// In the material design language, this represents a divider.
...@@ -26,19 +26,22 @@ import 'theme.dart'; ...@@ -26,19 +26,22 @@ import 'theme.dart';
class Divider extends StatelessWidget { class Divider extends StatelessWidget {
/// Creates a material design divider. /// Creates a material design divider.
/// ///
/// The height must be at least 1.0 logical pixels. /// The height must be positive.
const Divider({ const Divider({
Key key, Key key,
this.height: 16.0, this.height: 16.0,
this.indent: 0.0, this.indent: 0.0,
this.color this.color
}) : assert(height >= 1.0), }) : assert(height >= 0.0),
super(key: key); super(key: key);
/// The divider's vertical extent. /// 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. /// 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; final double height;
/// The amount of empty space to the left of the divider. /// The amount of empty space to the left of the divider.
...@@ -58,19 +61,22 @@ class Divider extends StatelessWidget { ...@@ -58,19 +61,22 @@ class Divider extends StatelessWidget {
@override @override
Widget build(BuildContext context) { Widget build(BuildContext context) {
final double bottom = (height ~/ 2.0).toDouble(); return new SizedBox(
return new Container( height: height,
height: 0.0, child: new Center(
margin: new EdgeInsets.only( child: new Container(
top: height - bottom - 1.0, height: 0.0,
left: indent, margin: new EdgeInsets.only(left: indent),
bottom: bottom 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)
)
)
); );
} }
} }
...@@ -82,7 +82,7 @@ class DrawerHeader extends StatelessWidget { ...@@ -82,7 +82,7 @@ class DrawerHeader extends StatelessWidget {
border: new Border( border: new Border(
bottom: new BorderSide( bottom: new BorderSide(
color: theme.dividerColor, color: theme.dividerColor,
width: 1.0 width: 0.0
) )
) )
), ),
......
...@@ -294,7 +294,7 @@ class ListTile extends StatelessWidget { ...@@ -294,7 +294,7 @@ class ListTile extends StatelessWidget {
position: DecorationPosition.foreground, position: DecorationPosition.foreground,
decoration: new BoxDecoration( decoration: new BoxDecoration(
border: new Border( border: new Border(
bottom: new BorderSide(color: dividerColor), bottom: new BorderSide(color: dividerColor, width: 0.0),
), ),
), ),
child: tile, child: tile,
......
...@@ -4,11 +4,13 @@ ...@@ -4,11 +4,13 @@
import 'package:flutter/material.dart'; import 'package:flutter/material.dart';
import 'package:flutter_test/flutter_test.dart'; import 'package:flutter_test/flutter_test.dart';
import '../rendering/mock_canvas.dart';
void main() { void main() {
testWidgets('Divider control test', (WidgetTester tester) async { testWidgets('Divider control test', (WidgetTester tester) async {
await tester.pumpWidget(const Center(child: const Divider())); await tester.pumpWidget(const Center(child: const Divider()));
final RenderBox box = tester.firstRenderObject(find.byType(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));
}); });
} }
...@@ -48,7 +48,7 @@ void main() { ...@@ -48,7 +48,7 @@ void main() {
box = tester.renderObject(find.byKey(containerKey)); box = tester.renderObject(find.byKey(containerKey));
expect(box.size.width, equals(drawerWidth - 2 * 16.0)); 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); expect(find.text('header'), findsOneWidget);
}); });
......
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