Card

Card en Flutter: El marco de tus elementos

El widget Card en Flutter es como un marco elegante y versátil que te permite presentar información de manera organizada y visualmente atractiva. Se utiliza para agrupar contenido relacionado y darle un aspecto distintivo dentro de tu interfaz de usuario.

Características principales:

• Versatilidad: Puedes personalizar el color, la forma, la sombra y el contenido interno de la tarjeta.
• Estructura: Generalmente contiene un título, un subtítulo y un cuerpo principal, pero puedes adaptarlo a tus necesidades.
• Interacción: Puedes agregar botones, iconos o cualquier otro widget interactivo dentro de la tarjeta.

Ejemplo básico:

Dart

import 'package:flutter/material.dart';

void main() {
  runApp(const MyApp());
}

class MyApp extends StatelessWidget {
  const MyApp({super.key});

  @override
  Widget build(BuildContext    context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(
          title: const Text('Card    Example'),
        ),
        body: Center(
          child: Card(
            child: Column(
              mainAxisSize: MainAxisSize.min,
              children:    const <Widget>[
                ListTile(
                  leading: Icon(Icons.album),
                  title: Text('The Enchanted Nightingale'),
                  subtitle: Text('And    Other Tales'),
                ),
                Padding(
                  padding: EdgeInsets.only(left: 16.0, right: 16.0, bottom: 16.0),
                  child: Text('A very long description about this album'),
                ),
              ],
            ),
          ),
        ),
      ),
    );
  }
}

Personalización:

• color: Cambia el color de fondo de la tarjeta.
• elevation: Define la altura de la sombra, dando un efecto de profundidad.
• shape: Personaliza la forma de los bordes de la tarjeta.
• margin: Agrega márgenes alrededor de la tarjeta.
• semanticContainer: Habilita la accesibilidad para usuarios con discapacidad visual.

Ejemplo con más personalización:

Dart

Card(
  color: Colors.blueGrey[900],
  shape: RoundedRectangleBorder(
    borderRadius: BorderRadius.circular(15.0),
  ),
  elevation: 5,
  child: Column(
    // ... contenido de la tarjeta
  ),
)

Casos de uso comunes:

• Tarjetas de productos: En tiendas en línea.
• Artículos de noticias: Para mostrar resúmenes de noticias.
• Elementos de una lista: Para agrupar información relacionada en una lista.
• Formularios: Para organizar los campos de un formulario.

En resumen:

Card es un widget fundamental en Flutter que te permite crear interfaces de usuario más organizadas y atractivas. Al combinar Card con otros widgets como ListTile, Text, Image y más, puedes construir componentes personalizados y adaptados a tus necesidades.