Tabla de Contenido
Introducción
El widget de Card es uno de los más utilizados en Flutter. Las tarjetas muestran un contenedor con información de un tema en particular, imágenes, texto y acciones.
Widget Card
Las Cards son widgets que nos sirve para agrupar y mostrar información organizada dentro de un contenedor, que a su vez puede ser otro widget. Pueden tener esquinas redondeadas y una sombra de elevación.
Propiedades
elevatedes la propiedad para especificar la elevación que tendrá la Card la cual genera una sombra debajo.keyidentificador del widget dentro del árbol.colorpropiedad para color de fondo de la Card.shadowColorpropiedad para color del sombreado.surfaceTintColoreste color se coloca sobre el color de la propiedadcolor.shapepropiedad para modificar los bordes de la Card.marginpropiedad para la margen de la Card.clipBehaviorel contenido se recortará según la configuración de la propiedad.childpropiedad para colocar el widget hijo de la Card.
Tipos de Cards
Existen tres tipos de Cards:
-
Elevated: Este tipo de Card muestra una elevación pronunciada.Card( color: Colors.amber, shadowColor: Colors.red, surfaceTintColor: Colors.red, elevation: 20, shape: BeveledRectangleBorder(), margin: EdgeInsets.all(30), child: SizedBox( width: 300, height: 100, child: Center( child: Text("Card con elevación y bordes cuadrados"), ), ), )
-
Filled: Este tipo de Card tiene como característica principal su fondo más visible.Card.filled( color: Colors.green, child: SizedBox( width: 350, height: 150, child: Center( child: Text("Card con relleno"), ), ), )
-
Outlined: Este tipo de Card tiene un borde en línea que se puede notar.Card.outlined( color: Colors.white, child: SizedBox( width: 300, height: 100, child: Center( child: Text("Card con borde en línea"), ), ), )
Ejemplo completo
import 'package:flutter/material.dart';
/// Clase Screen para widget card
class CardScreen extends StatelessWidget {
const CardScreen({super.key});
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: const Text('Card Screen'),
),
body: Center(
child: Column(
children: [
const Card(
color: Colors.amber,
shadowColor: Colors.red,
surfaceTintColor: Colors.red,
elevation: 20,
shape: BeveledRectangleBorder(),
margin: EdgeInsets.all(30),
child: SizedBox(
width: 300,
height: 100,
child: Center(
child: Text("Card con elevación y bordes cuadrados"),
),
),
),
const Spacer(),
const Card.filled(
color: Colors.green,
child: SizedBox(
width: 350,
height: 150,
child: Center(
child: Text("Card con relleno"),
),
),
),
const Spacer(),
const Card.outlined(
color: Colors.white,
child: SizedBox(
width: 300,
height: 100,
child: Center(
child: Text("Card con borde en línea"),
),
),
),
const Spacer(),
Card(
child: Padding(
padding: const EdgeInsets.all(10.0),
child: Column(
mainAxisAlignment: MainAxisAlignment.spaceBetween,
children: [
const Text(
"Dolore consequat incididunt aliquip sint Lorem occaecat velit incididunt ullamco fugiat magna nulla voluptate.",
),
const Divider(),
Row(
mainAxisAlignment: MainAxisAlignment.end,
children: [
TextButton(
onPressed: () {},
child: const Text("Cancel"),
),
FilledButton(
onPressed: () {},
child: const Text("Aceptar"),
)
],
)
],
),
),
),
const Spacer(),
],
),
),
);
}
}
Consideraciones
- Se recomienda usar las Cards para contener elementos relacionados.
- Se puede incluir cualquier cosa dentro de las Cards, desde textos, botones, imágenes, etc. Además de otros widgets.
- Son flexibles para el uso de componentes dentro de ellas.
- Utilizarlas para información relevante y útil para el usuario.
Conclusión
En conclusión, las Cards son un widget muy importante y muy usado dentro de la comunidad, son fáciles de usar y se pueden usar casi en cualquier caso para brindar información al usuario final.
¡Gracias por leer!
