From df25e4899d0310dd9d0cdc7dfe61df058d1bc269 Mon Sep 17 00:00:00 2001 From: Ian Hickson Date: Sat, 12 Nov 2016 15:09:12 -0800 Subject: [PATCH] Provide a way to override the Material border radius (#6828) This should help a bit with people trying to make apps that have a Material feel but don't necessarily exactly fit the Material spec. --- .../flutter/lib/src/material/material.dart | 26 ++++++++++++++++--- 1 file changed, 23 insertions(+), 3 deletions(-) diff --git a/packages/flutter/lib/src/material/material.dart b/packages/flutter/lib/src/material/material.dart index 5c891684da4..190c5883d37 100644 --- a/packages/flutter/lib/src/material/material.dart +++ b/packages/flutter/lib/src/material/material.dart @@ -160,8 +160,14 @@ abstract class MaterialInkController { /// placed inside Material.) Otherwise, in-progress ink features (e.g., ink /// splashes and ink highlights) won't move to account for the new layout. /// +/// In general, the features of a [Material] should not change over time (e.g. a +/// [Material] should not change its [color] or [type]). The one exception is +/// the [elevation], changes to which will be animated. +/// /// See also: /// +/// * [MergeableMaterial], a piece of material that can split and remerge. +/// * [Card], a wrapper for a [Material] of [type] [MaterialType.card]. /// * class Material extends StatefulWidget { /// Creates a piece of material. @@ -173,10 +179,12 @@ class Material extends StatefulWidget { this.elevation: 0, this.color, this.textStyle, + this.borderRadius, this.child }) : super(key: key) { assert(type != null); assert(elevation != null); + assert(type != MaterialType.circle || borderRadius == null); } /// The widget below this widget in the tree. @@ -205,6 +213,13 @@ class Material extends StatefulWidget { /// The typographical style to use for text within this material. final TextStyle textStyle; + /// If non-null, the corners of this box are rounded by this [BorderRadius]. + /// Otherwise, the corners specified for the current [type] of material are + /// used. + /// + /// Must be null if [type] is [MaterialType.circle]. + final BorderRadius borderRadius; + /// The ink controller from the closest instance of this class that /// encloses the given context. /// @@ -228,6 +243,10 @@ class Material extends StatefulWidget { description.add('elevation: $elevation'); if (color != null) description.add('color: $color'); + if (textStyle != null) + description.add('textStyle: $textStyle'); + if (borderRadius != null) + description.add('borderRadius: $borderRadius'); } } @@ -251,6 +270,7 @@ class _MaterialState extends State with TickerProviderStateMixin { Widget build(BuildContext context) { Color backgroundColor = _getBackgroundColor(context); Widget contents = config.child; + BorderRadius radius = config.borderRadius ?? kMaterialEdges[config.type]; if (contents != null) { contents = new AnimatedDefaultTextStyle( style: config.textStyle ?? Theme.of(context).textTheme.body1, @@ -274,7 +294,7 @@ class _MaterialState extends State with TickerProviderStateMixin { contents = new ClipOval(child: contents); } else if (kMaterialEdges[config.type] != null) { contents = new ClipRRect( - borderRadius: kMaterialEdges[config.type], + borderRadius: radius, child: contents ); } @@ -283,13 +303,13 @@ class _MaterialState extends State with TickerProviderStateMixin { curve: Curves.fastOutSlowIn, duration: kThemeChangeDuration, decoration: new BoxDecoration( - borderRadius: kMaterialEdges[config.type], + borderRadius: radius, boxShadow: config.elevation == 0 ? null : kElevationToShadow[config.elevation], shape: config.type == MaterialType.circle ? BoxShape.circle : BoxShape.rectangle ), child: new Container( decoration: new BoxDecoration( - borderRadius: kMaterialEdges[config.type], + borderRadius: radius, backgroundColor: backgroundColor, shape: config.type == MaterialType.circle ? BoxShape.circle : BoxShape.rectangle ),