Unverified Commit 82666ef1 authored by Hans Muller's avatar Hans Muller Committed by GitHub

Update Card example and shadowColor default (#61392)

parent e666ea8d
...@@ -7,11 +7,11 @@ ...@@ -7,11 +7,11 @@
import 'package:flutter/widgets.dart'; import 'package:flutter/widgets.dart';
import 'card_theme.dart'; import 'card_theme.dart';
import 'colors.dart';
import 'material.dart'; import 'material.dart';
import 'theme.dart'; import 'theme.dart';
/// A material design card. A card has slightly rounded corners and a shadow. /// A material design card: a panel with slightly rounded corners and an
/// elevation shadow.
/// ///
/// A card is a sheet of [Material] used to represent some related information, /// A card is a sheet of [Material] used to represent some related information,
/// for example an album, a geographical location, a meal, contact details, etc. /// for example an album, a geographical location, a meal, contact details, etc.
...@@ -39,16 +39,19 @@ import 'theme.dart'; ...@@ -39,16 +39,19 @@ import 'theme.dart';
/// title: Text('The Enchanted Nightingale'), /// title: Text('The Enchanted Nightingale'),
/// subtitle: Text('Music by Julie Gable. Lyrics by Sidney Stein.'), /// subtitle: Text('Music by Julie Gable. Lyrics by Sidney Stein.'),
/// ), /// ),
/// ButtonBar( /// Row(
/// mainAxisAlignment: MainAxisAlignment.end,
/// children: <Widget>[ /// children: <Widget>[
/// FlatButton( /// TextButton(
/// child: const Text('BUY TICKETS'), /// child: const Text('BUY TICKETS'),
/// onPressed: () { /* ... */ }, /// onPressed: () { /* ... */ },
/// ), /// ),
/// FlatButton( /// const SizedBox(width: 8),
/// TextButton(
/// child: const Text('LISTEN'), /// child: const Text('LISTEN'),
/// onPressed: () { /* ... */ }, /// onPressed: () { /* ... */ },
/// ), /// ),
/// const SizedBox(width: 8),
/// ], /// ],
/// ), /// ),
/// ], /// ],
...@@ -93,7 +96,6 @@ import 'theme.dart'; ...@@ -93,7 +96,6 @@ import 'theme.dart';
/// See also: /// See also:
/// ///
/// * [ListTile], to display icons and text in a card. /// * [ListTile], to display icons and text in a card.
/// * [ButtonBar], to display buttons at the bottom of a card.
/// * [showDialog], to display a modal card. /// * [showDialog], to display a modal card.
/// * <https://material.io/design/components/cards.html> /// * <https://material.io/design/components/cards.html>
class Card extends StatelessWidget { class Card extends StatelessWidget {
...@@ -127,7 +129,8 @@ class Card extends StatelessWidget { ...@@ -127,7 +129,8 @@ class Card extends StatelessWidget {
/// The color to paint the shadow below the card. /// The color to paint the shadow below the card.
/// ///
/// If null then the ambient [CardTheme]'s shadowColor is used. /// If null then the ambient [CardTheme]'s shadowColor is used.
/// If that's null too, then the default is fully opaque black. /// If that's null too, then the overall theme's [ThemeData.shadowColor]
/// (default black) is used.
final Color shadowColor; final Color shadowColor;
/// The z-coordinate at which to place this card. This controls the size of /// The z-coordinate at which to place this card. This controls the size of
...@@ -191,6 +194,7 @@ class Card extends StatelessWidget { ...@@ -191,6 +194,7 @@ class Card extends StatelessWidget {
@override @override
Widget build(BuildContext context) { Widget build(BuildContext context) {
final ThemeData theme = Theme.of(context);
final CardTheme cardTheme = CardTheme.of(context); final CardTheme cardTheme = CardTheme.of(context);
return Semantics( return Semantics(
...@@ -199,8 +203,8 @@ class Card extends StatelessWidget { ...@@ -199,8 +203,8 @@ class Card extends StatelessWidget {
margin: margin ?? cardTheme.margin ?? const EdgeInsets.all(4.0), margin: margin ?? cardTheme.margin ?? const EdgeInsets.all(4.0),
child: Material( child: Material(
type: MaterialType.card, type: MaterialType.card,
shadowColor: shadowColor ?? cardTheme.shadowColor ?? Colors.black, shadowColor: shadowColor ?? cardTheme.shadowColor ?? theme.shadowColor,
color: color ?? cardTheme.color ?? Theme.of(context).cardColor, color: color ?? cardTheme.color ?? theme.cardColor,
elevation: elevation ?? cardTheme.elevation ?? _defaultElevation, elevation: elevation ?? cardTheme.elevation ?? _defaultElevation,
shape: shape ?? cardTheme.shape ?? const RoundedRectangleBorder( shape: shape ?? cardTheme.shape ?? const RoundedRectangleBorder(
borderRadius: BorderRadius.all(Radius.circular(4.0)), borderRadius: BorderRadius.all(Radius.circular(4.0)),
......
...@@ -57,6 +57,7 @@ void main() { ...@@ -57,6 +57,7 @@ void main() {
testWidgets('Card widget properties take priority over theme', (WidgetTester tester) async { testWidgets('Card widget properties take priority over theme', (WidgetTester tester) async {
const Clip clip = Clip.hardEdge; const Clip clip = Clip.hardEdge;
const Color color = Colors.orange; const Color color = Colors.orange;
const Color shadowColor = Colors.pink;
const double elevation = 7.0; const double elevation = 7.0;
const EdgeInsets margin = EdgeInsets.all(3.0); const EdgeInsets margin = EdgeInsets.all(3.0);
const ShapeBorder shape = RoundedRectangleBorder( const ShapeBorder shape = RoundedRectangleBorder(
...@@ -69,6 +70,7 @@ void main() { ...@@ -69,6 +70,7 @@ void main() {
body: Card( body: Card(
clipBehavior: clip, clipBehavior: clip,
color: color, color: color,
shadowColor: shadowColor,
elevation: elevation, elevation: elevation,
margin: margin, margin: margin,
shape: shape, shape: shape,
...@@ -81,6 +83,7 @@ void main() { ...@@ -81,6 +83,7 @@ void main() {
expect(material.clipBehavior, clip); expect(material.clipBehavior, clip);
expect(material.color, color); expect(material.color, color);
expect(material.shadowColor, shadowColor);
expect(material.elevation, elevation); expect(material.elevation, elevation);
expect(container.margin, margin); expect(container.margin, margin);
expect(material.shape, shape); expect(material.shape, shape);
......
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