card.dart 2.92 KB
Newer Older
1 2 3 4
// Copyright 2015 The Chromium Authors. All rights reserved.
// Use of this source code is governed by a BSD-style license that can be
// found in the LICENSE file.

5
import 'package:flutter/widgets.dart';
6 7

import 'material.dart';
8

9
/// A material design card. A card has slightly rounded corners and a shadow.
10 11 12
///
/// 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.
13
///
14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50
/// ## Sample code
///
/// Here is an example of using a [Card] widget.
///
/// ```dart
/// new Card(
///   child: new Column(
///     mainAxisSize: MainAxisSize.min,
///     children: <Widget>[
///       const ListTile(
///         leading: const Icon(Icons.album),
///         title: const Text('The Enchanted Nightingale'),
///         subtitle: const Text('Music by Julie Gable. Lyrics by Sidney Stein.'),
///       ),
///       new ButtonTheme.bar( // make buttons use the appropriate styles for cards
///         child: new ButtonBar(
///           children: <Widget>[
///             new FlatButton(
///               child: const Text('BUY TICKETS'),
///               onPressed: () { /* ... */ },
///             ),
///             new FlatButton(
///               child: const Text('LISTEN'),
///               onPressed: () { /* ... */ },
///             ),
///           ],
///         ),
///       ),
///     ],
///   ),
/// )
/// ```
///
/// This is what it would look like:
///
/// ![A card with a slight shadow, consisting of two rows, one with an icon and
/// some text describing a musical, and the other with buttons for buying
Ian Hickson's avatar
Ian Hickson committed
51
/// tickets or listening to the show.](https://flutter.github.io/assets-for-api-docs/material/card.png)
52
///
53 54
/// See also:
///
55
///  * [ListTile], to display icons and text in a card.
56
///  * [ButtonBar], to display buttons at the bottom of a card. Typically these
57
///    would be styled using a [ButtonTheme] created with [new ButtonTheme.bar].
58
///  * [showDialog], to display a modal card.
59
///  * <https://material.google.com/components/cards.html>
60
class Card extends StatelessWidget {
61 62 63
  /// Creates a material design card.
  const Card({
    Key key,
64
    this.color,
65
    this.elevation: 2.0,
66
    this.child,
67
  }) : super(key: key);
68

69
  /// The widget below this widget in the tree.
70 71
  ///
  /// {@macro flutter.widgets.child}
72
  final Widget child;
73 74

  /// The color of material used for this card.
75 76
  final Color color;

77 78
  /// The z-coordinate at which to place this card. This controls the size of
  /// the shadow below the card.
79 80
  ///
  /// Defaults to 2, the appropriate elevation for cards.
81
  final double elevation;
82

83
  @override
84
  Widget build(BuildContext context) {
85 86 87 88 89 90 91 92 93 94 95
    return new Semantics(
      container: true,
      child: new Container(
        margin: const EdgeInsets.all(4.0),
        child: new Material(
          color: color,
          type: MaterialType.card,
          elevation: elevation,
          child: child
        )
      ),
96 97 98
    );
  }
}