| // Copyright 2014 The Flutter Authors. All rights reserved. |
| // Use of this source code is governed by a BSD-style license that can be |
| // found in the LICENSE file. |
| |
| // Flutter code sample for Card |
| |
| import 'package:flutter/material.dart'; |
| |
| void main() { runApp(const CardExamplesApp()); } |
| |
| class CardExamplesApp extends StatelessWidget { |
| const CardExamplesApp({super.key}); |
| |
| @override |
| Widget build(BuildContext context) { |
| return MaterialApp( |
| theme: ThemeData(colorSchemeSeed: const Color(0xff6750a4), useMaterial3: true), |
| home: Scaffold( |
| appBar: AppBar(title: const Text('Card Examples')), |
| body: Column( |
| children: const <Widget>[ |
| Spacer(), |
| ElevatedCardExample(), |
| FilledCardExample(), |
| OutlinedCardExample(), |
| Spacer(), |
| ], |
| ), |
| ), |
| ); |
| } |
| } |
| |
| /// An example of the elevated card type. |
| /// |
| /// The default settings for [Card] will provide an elevated |
| /// card matching the spec: |
| /// |
| /// https://m3.material.io/components/cards/specs#a012d40d-7a5c-4b07-8740-491dec79d58b |
| class ElevatedCardExample extends StatelessWidget { |
| const ElevatedCardExample({ super.key }); |
| |
| @override |
| Widget build(BuildContext context) { |
| return const Center( |
| child: Card( |
| child: SizedBox( |
| width: 300, |
| height: 100, |
| child: Center(child: Text('Elevated Card')), |
| ), |
| ), |
| ); |
| } |
| } |
| |
| /// An example of the filled card type. |
| /// |
| /// To make a [Card] match the filled type, the default elevation and color |
| /// need to be changed to the values from the spec: |
| /// |
| /// https://m3.material.io/components/cards/specs#0f55bf62-edf2-4619-b00d-b9ed462f2c5a |
| class FilledCardExample extends StatelessWidget { |
| const FilledCardExample({ super.key }); |
| |
| @override |
| Widget build(BuildContext context) { |
| return Center( |
| child: Card( |
| elevation: 0, |
| color: Theme.of(context).colorScheme.surfaceVariant, |
| child: const SizedBox( |
| width: 300, |
| height: 100, |
| child: Center(child: Text('Filled Card')), |
| ), |
| ), |
| ); |
| } |
| } |
| |
| /// An example of the outlined card type. |
| /// |
| /// To make a [Card] match the outlined type, the default elevation and shape |
| /// need to be changed to the values from the spec: |
| /// |
| /// https://m3.material.io/components/cards/specs#0f55bf62-edf2-4619-b00d-b9ed462f2c5a |
| class OutlinedCardExample extends StatelessWidget { |
| const OutlinedCardExample({ super.key }); |
| |
| @override |
| Widget build(BuildContext context) { |
| return Center( |
| child: Card( |
| elevation: 0, |
| shape: RoundedRectangleBorder( |
| side: BorderSide( |
| color: Theme.of(context).colorScheme.outline, |
| ), |
| borderRadius: const BorderRadius.all(Radius.circular(12)), |
| ), |
| child: const SizedBox( |
| width: 300, |
| height: 100, |
| child: Center(child: Text('Outlined Card')), |
| ), |
| ), |
| ); |
| } |
| } |