From bb119e95fa67d0e487ea142d1e1a5e93d0d33e85 Mon Sep 17 00:00:00 2001 From: Anatoly Pulyaevskiy Date: Mon, 12 Jun 2017 21:47:56 -0700 Subject: [PATCH] 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 --- .../flutter/lib/src/material/divider.dart | 38 +++++++++++-------- .../lib/src/material/drawer_header.dart | 2 +- .../flutter/lib/src/material/list_tile.dart | 2 +- .../flutter/test/material/divider_test.dart | 4 +- .../flutter/test/material/drawer_test.dart | 2 +- 5 files changed, 28 insertions(+), 20 deletions(-) diff --git a/packages/flutter/lib/src/material/divider.dart b/packages/flutter/lib/src/material/divider.dart index 317190ee7b0..c8dc1b58a41 100644 --- a/packages/flutter/lib/src/material/divider.dart +++ b/packages/flutter/lib/src/material/divider.dart @@ -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) - ) - ) ); } } diff --git a/packages/flutter/lib/src/material/drawer_header.dart b/packages/flutter/lib/src/material/drawer_header.dart index b94f68eafaa..2167ce57c2d 100644 --- a/packages/flutter/lib/src/material/drawer_header.dart +++ b/packages/flutter/lib/src/material/drawer_header.dart @@ -82,7 +82,7 @@ class DrawerHeader extends StatelessWidget { border: new Border( bottom: new BorderSide( color: theme.dividerColor, - width: 1.0 + width: 0.0 ) ) ), diff --git a/packages/flutter/lib/src/material/list_tile.dart b/packages/flutter/lib/src/material/list_tile.dart index b3416ae9f1c..70e25030f74 100644 --- a/packages/flutter/lib/src/material/list_tile.dart +++ b/packages/flutter/lib/src/material/list_tile.dart @@ -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, diff --git a/packages/flutter/test/material/divider_test.dart b/packages/flutter/test/material/divider_test.dart index 72e52bacf73..096a06571c8 100644 --- a/packages/flutter/test/material/divider_test.dart +++ b/packages/flutter/test/material/divider_test.dart @@ -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)); }); } diff --git a/packages/flutter/test/material/drawer_test.dart b/packages/flutter/test/material/drawer_test.dart index eebac15071b..50d483ae996 100644 --- a/packages/flutter/test/material/drawer_test.dart +++ b/packages/flutter/test/material/drawer_test.dart @@ -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); });