// 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. import 'package:flutter/material.dart'; /// Flutter code sample for [Card]. 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: const Column( children: <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')), ), ), ); } }