Widget Card en Flutter

El widget Card en Flutter es un componente visual que se utiliza para mostrar información en una tarjeta o carta; es una cuadricula generalmente de color blanco con bordes redondeados y un sombreado. Esta tarjeta se puede personalizar con diferentes elementos para resaltar el contenido como imágenes, texto, botones y formularios entre otros. El widget Card se utiliza comúnmente en aplicaciones móviles y web para presentar información de manera clara y organizada.

Los Card en Flutter son otro componente fundamental en cualquier aplicación que trabaje con material Design y esta no es la excepción; los Card View son un componente fundamental ya en Android desde sus inicios que adoptó el Material Design como regla de diseño y que por supuesto lo podemos emplear el Flutter como otro widget más.

Los Card en Flutter son uno de esos widgets que empiezas usando “porque toca”… y terminas usando en todas tus pantallas. Si vienes de Android, como me pasó a mí, reconoces enseguida ese estilo con esquinas redondeadas, sombras sutiles y un contenedor listo para mostrar información limpia y ordenada. Y aunque parecen simples, tienen un potencial enorme cuando sabes combinarlos bien.

Los Card son empleados para mostrar información en una carta o una tarjeta, así de simple; son simplemente componentes contenedores con unas esquinas redondeadas y sombreado; así de simple, en el podemos agregar textos, imágenes o cualquier otro widget contenedor como columnas para agregar múltiples elementos o simplemente o agregar solo un widget; también podemos emplear el widget de tipo Center así como cualquier widgets en general, pero estas podrían ser sus configuraciones más comunes.

En esta guía te enseño qué son, cómo funcionan, cómo personalizarlos y cómo usarlos con ejemplos reales, incluyendo pequeños trucos que aprendí a fuerza de prueba y error (como ese momento en el que descubrí que un Card solo acepta un child y tuve que replantear por completo mi diseño ).

Anteriormente vimos como usar los widgets de tipo botones como el Floating Action Button, Flat Button, Material Button entre otros; vamos ahora con este widget.

Qué es un Card en Flutter y para qué sirve

Un Card es un contenedor de Material Design pensado para mostrar información agrupada dentro de una tarjeta con:

• Bordes ligeramente redondeados
• Sombra o elevación
• Fondo uniforme
• Un área táctil clara

Lo más útil es que te permite construir interfaces limpias, jerárquicas y “con aire”, evitando pantallas donde todo parece apelotonado.

Relación con Material Design

El diseño del Card en Flutter sigue las guías oficiales de Material Design:

• Elevación para indicar importancia
• Sombra para separarlo del fondo
• Esquinas redondeadas para suavizar el look
• Variantes nuevas en Material 3 (elevated, filled, outlined)

Comportamiento, elevación y bordes redondeados

La propiedad elevation crea la sombra y da la sensación de profundidad. En mis pruebas, elevar demasiado un Card (por encima de 10–12) hace que parezca flotando más de la cuenta. Normalmente uso entre 4 y 8, a menos que quiera destacar un componente específico.

Los bordes, por su parte, se controlan con:

shape: RoundedRectangleBorder(
 borderRadius: BorderRadius.circular(20),
)

Un Card nunca viene demás en nuestras apps, en todo tipo de tecnologías tenemos la famosa caja con border redondeados y redondeado para colocar nuestro contenído.

Propiedades principales del widget Card

El Card tiene varias propiedades que conviene conocer si quieres conocerlo para poder adaptarlo a tus necesidades.

• color, elevation y shadowColor
• color: fondo personalizado del Card.
• elevation: cuánta sombra proyecta.
• shadowColor: color de la sombra (por defecto, negro).

Estas son otras propiedades:

• shape y personalización de bordes
  • Aquí decides si quieres:
  • Esquinas cuadradas
  • Bordes circulares
  • Bordes súper redondeados tipo “pill”

Si vienes de Android (como yo originalmente), verás que es casi idéntico al CardView.

• margin, padding y clipBehavior
  • margin: espacio alrededor del Card
  • padding: espacio dentro del Card
  • clipBehavior: controla si los elementos internos pueden desbordarse
  • En mi caso, más de una vez una imagen sobresalió del Card y la solución fue tan simple como añadir:
  • clipBehavior: Clip.antiAlias,

child y cómo organizar varios widgets dentro de un Card

Usualmente dentro del Card, vamos a querer definir varios widgets. La solución, como es usar dentro del Card alguno de estos widgets:

• Un Column
• Un Row
• Un ListTile
• Un Container

Es decir, un widget que pueda contener varios hijos.

Un Card solo acepta un child.

Cómo construir un Card básico paso a paso

Para crear un Card en Flutter, nada más fácil, simplemente tenemos que agregar las siguientes líneas:

Card()

Pero con esto como puedes suponer no tenemos prácticamente nada, necesitamos más elementos, más widgets con los cuales podemos sacarle provecho a los Card de Flutter.

Un ejemplo más completo:

Card(
 child: Center(
   child: Text("Hola Card"),
 ),
)

Añadir Column o Row para múltiples elementos

Cuando necesitas colocar imagen, texto y un botón (que es lo más común), una Column es tu mejor amiga. Lo uso casi siempre:

Card(
 child: Column(
   children: [
     Image.asset('assets/codeigniter.png'),
     Text("Curso en CodeIgniter"),
     IconButton(
       icon: Icon(Icons.access_alarms),
       onPressed: () {},
     )
   ],
 ),
)

Errores comunes al trabajar con Cards

• Crear un Card vacío y pensar que “no funciona”.
  • A mí me pasó: sin contenido, no verás nada.
• Usar demasiada elevación.
  • Queda artificial.
• No usar padding dentro del Card.
  • El contenido queda pegado y se ve poco profesional.
• Meter widgets que sobrepasan los bordes sin clipBehavior.

Definir imágenes en nuestros Card widget

Aunque con esto tenemos prácticamente nada, ya que un contenedor vacío no nos sirve de nada; podemos agregar todos los elementos que queramos, o cualquier otro widget mediante la propiedad child, pero SOLO podemos agregar UN WIDGET, y nada más:

Card(
  child: Center(
	child: MaterialButton(
  	minWidth: 200.0,
  	height: 40.0,
  	onPressed: () {},
  	color: Colors.lightBlue,
  	child: Text('Material Button',
      	style: TextStyle(color: Colors.white)),
	),
  ),
),

Como puedes ver, aquí tenemos varias propiedades importante, para indicar el tamaño mediante los width y el height además de que estamos agregando un botón con un texto tal cual vimos en la entrada anterior de Los widgets de los botones en Flutter: Raised, Flat, Material, Icon y Floating Action

Aunque podemos agregar cualquier tipo de widget, y hay algunos realmente que nos vienen estupendos al momento de trabajar con los Card en Flutter.

Cómo ves, algo bastante aburrido y pobre, pero por supuesto podemos usar cualquier otro widget y existen widgets que nos ayudarán en esta tarea, por ejemplo uno de tipo columna con el cual podemos agregar muchos otros widgets:

body: Card(
  child: Center(
	child: Column(
  	children: <Widget>[
    	Image.asset('assets/codeigniter.png'),
    	Text("Curso en CodeIgniter"),
    	IconButton(
      	icon: Icon(Icons.access_alarms),
      	tooltip: "Mensaje",
    	),
  	],
	),
  ),
),

Como puedes apreciar en este ejemplo, lo ideal es combinar widgets; tomar las características de un widget y de esta manera sumarlas en conjunto; como te indicamos antes, los Card en Flutter solo pueden contener un widgets; por lo tanto es casi obligatorio emplear otro widgets como el de Column que nos permite agregar los elementos que queramos.

https://kodestat.gitbook.io/flutter/37-flutter-using-cards

Padding y márgenes en los Card de Flutter

Por supuesto, como cualquier contenedor o layout que nosotros empleamos en nuestras aplicaciones, necesita un margen; también existen propiedades para tal motivo, para eso podemos emplear la propiedad padding como te mostramos a continuación:

Container(
 padding: new EdgeInsets.all(32.0),
 height: 350,
 child: Card(
   color: Color.fromRGBO(84, 197, 248, 1),
   child: Center(
     child: Column(
       children: <Widget>[
         Image.asset('assets/codeigniter.png'),
         Text("Curso en CodeIgniter"),
         IconButton(
           icon: Icon(Icons.access_alarms),
           tooltip: "Mensaje",
         ),
       ],
     ),
   ),
 ),
)

Aquí en esta oportunidad variamos algunas cosas; primero definimos otro tipo de layout, que viene siendo el container que como puedes suponer de su nombre, permite contener un elemento mediante su atributo child; entre esos elementos colocamos nuestro Card; y no solo eso, en este mismo container definimos nuestro espaciado interno mediante la propiedad padding; también aprovechamos y definimos el height para que no ocupe toda la pantalla:

Bordes redondeados para los Card

Si vienes del desarrollo nativo en Android, sabrás que uno de los principales elementos característicos del CardView es precisamente que cuentan con los border redondeados por defecto; aquí también podemos crear nuestros bordes redondeados sobre nuestros Card mediante la propiedad shape:

Container(
 padding: new EdgeInsets.all(32.0),
 height: 350,
 child: Card(
   shape: RoundedRectangleBorder(
   borderRadius: BorderRadius.circular(20.0),
 ),
   color: Color.fromRGBO(84, 197, 248, 1),
   child: Center(
     child: Column(
       children: <Widget>[
         Image.asset('assets/codeigniter.png'),
         Text("Curso en CodeIgniter"),
         IconButton(
           icon: Icon(Icons.access_alarms),
           tooltip: "Mensaje",
         ),
       ],
     ),
   ),
 ),
),

Finalmente te dejo por aquí el código completo de nuestra aplicación así como el enlace a la documentación oficial:

import 'package:flutter/material.dart';
void main() => runApp(MyApp());
class MyApp extends StatelessWidget {
 @override
 Widget build(BuildContext context) {
   // TODO: implement build
   return MaterialApp(
     home: Scaffold(
       //  backgroundColor: Color.fromRGBO(84, 197, 248, 1),
       appBar: AppBar(
         title: Text('Card'),
       ),
       body: Container(
         padding: new EdgeInsets.all(32.0),
         height: 350,
         child: Card(
           shape: RoundedRectangleBorder(
           borderRadius: BorderRadius.circular(20.0),
         ),
           color: Color.fromRGBO(84, 197, 248, 1),
           child: Center(
             child: Column(
               children: <Widget>[
                 Image.asset('assets/codeigniter.png'),
                 Text("Curso en CodeIgniter"),
                 IconButton(
                   icon: Icon(Icons.access_alarms),
                   tooltip: "Mensaje",
                 ),
               ],
             ),
           ),
         ),
       ),
     ),
   );
 }
}

Crear nuestra primera tarjeta o Card en Flutter

Las Card en Flutter, que las puedes traducir algo así como tarjetas, son un elemento fundamental en el Material Design y nos permiten crear aplicaciones con un muy buen estilo, las Cards son unos de los elementos más llamativos en el Material Design y su uso es muy sencillo, permite adaptar o colocar dentro de la misma cualquier tipo de Widgets y en esta entrada te daremos varios ejemplos de cómo podemos emplearla.

Queremos hacer una tarjeta clásica, una imagen, un bloque de texto y una imagen; la típica que empleamos para el Material Design:

Nada raro por los momentos; vamos a ir comenzando poco a poco y vamos desde lo más básico hasta llegar a lo que queremos conseguir; para lograr este objetivo tenemos que emplear un tipo de widget conocido como Card y lo primero que necesitamos es una carta para eso la clase widget en Flutter llamada Card:

Card()

Pero así no más no nos va a funcionar, necesitamos definir una propiedad llamada child que como ocurre con muchos otros tipos de widgets contenedores, debemos de indicarle el contenido; así que de momento quiero una tarjeta con un texto, así de simple:

return Card(child: Text("Hola Mundo"));

Obtenemos:

Agregando Texto e imágenes en el Widget Card

Pero cómo ver ahora no podemos agregar nuestra imagen promocional, porqué la propiedad child solamente acepta un y solo un Widget; en estos casos tenemos que aplicar otro tipo de contenedor que acepte una lista de widgets; el Colunm nos viene perfectamente en esta labor, dicho widget también lo tocamos en entradas anteriores; ahora nuestro código queda de la siguiente forma; de tal forma, que ahora sí podemos agregar nuestra imagen:

Card(
       child: Column(
     children: <Widget>[
       Image.asset('assets/curso.png'),
       Text("Hola Mundo"),
     ],
   ));

Obtenemos:

Y por esto les comentaba anteriormente, que dentro del Card o tarjeta podemos agregar lo que queramos, ya que es un simple contenedor con un diseño predefinidos.

Ok vamos mucho mejor, ya agregando un par de widgets más, un contenedor en donde colocamos una lista de widgets y pasamos nuestra imagen que está guardada en la carpeta assets y un texto, logramos la presentación anterior; pero todavía podemos sacarle más el jugo a nuestra tarjeta; como ves, nuestro texto está muy pegado al contenedor y no se ve del todo bien; y ahora nuestro contenedor perdió las esquinas redondeadas:

Card(
       child: Column(
     children: <Widget>[
       Image.asset('assets/curso.png'),
       Container(
         padding: EdgeInsets.all(10),
         child: Text("Hola Mundo"),
       )
     ],
   ));

Cambiar los border de los Card en Flutter

Ya con esto logramos que nuestro texto tenga más espacio en el texto; para eso empleamos un widget contenedor y a posterior aplicamos un margen interno o padding, ahora vamos a solucionar el problema de las esquinas puntiagudas; básicamente tenemos que emplear clipBehavior: Clip.antiAlias, en nuestra tarjeta, de tal manera que estamos configurando para que nuestra tarjeta o carta elimine todo lo que sobresale de la misma:

   return Card(
       clipBehavior: Clip.antiAlias,
       child: Column(
         children: <Widget>[
           Image.asset('assets/curso.png'),
           Container(
             padding: EdgeInsets.all(10),
             child: Text("Hola Mundo"),
           )
         ],
       ));

Para variar la redondez de las esquinas, puedes hacer lo siguiente:

Card(
       clipBehavior: Clip.antiAlias,
       shape: RoundedRectangleBorder(borderRadius: BorderRadius.circular(20.0)),
       child: Column(
         children: <Widget>[
           Image.asset('assets/curso.png'),
           Container(
             padding: EdgeInsets.all(10),
             child: Text("Hola Mundo"),
           )
         ],
       ));

Cartas con botones

Aunque vamos a mostrarte también aquí que puedes hacer; para este ejemplo empleamos unos cuantos widgets más como el de ListTile que nos permite crear un item de lista, ideal para mostrar información con el estilo presentado para esta imagen; además de que empleamos el elevation para variar la sombra; en definitiva, lo importante, para colocar botones, empleamos los Row para colocar botones uno del lado del otro y todo esto en una columna, para mostrar en una columna todo el contenido u otros widgets:

Card(
     elevation: 5,
     shape: RoundedRectangleBorder(borderRadius: BorderRadius.circular(5.0)),
     child: Column(
       children: <Widget>[
         ListTile(
          // leading: Icon(Icons.photo_album, color: Colors.blue),
           title: Text("Título"),
           subtitle: Text(
               " aqui estamos trabajando en la tarjeta de flutter y bla bla"),
         ),
         Row(
           mainAxisAlignment: MainAxisAlignment.end,
           children: <Widget>[
             FlatButton(
                 child: Text("Ok"),
                 onPressed: () {
                   Text("Ok");
                 }),
             FlatButton(
                 child: Text("Cancelar"),
                 onPressed: () {
                   Text("Cancelar");
                 })
           ],
         )
       ],
     ),
   );

Card con imagen, texto y botón

Un diseño típico para un artículo, un perfil o un producto:

Card(
 elevation: 8,
 shadowColor: Colors.black54,
 child: Padding(
   padding: EdgeInsets.all(16),
   child: Column(
     children: [
       Image.asset('assets/card-sample.png'),
       SizedBox(height: 12),
       Text("Ejemplo de Card Completo"),
       ElevatedButton(
         onPressed: () {},
         child: Text("Acción"),
       )
     ],
   ),
 ),
)

Card tipo ListTile (estilo Material.io)

Práctico para notificaciones, configuraciones o listas:

Card(
 child: ListTile(
   leading: Icon(Icons.info),
   title: Text("Título del Card"),
   subtitle: Text("Texto secundario"),
 ),
)

Cards táctiles: InkWell y acciones al presionar

Para pantallas de catálogo o navegación:

Card(
 child: InkWell(
   onTap: () {},
   child: Padding(
     padding: EdgeInsets.all(16),
     child: Text("Tócame"),
   ),
 ),
)

Variantes actuales del Card en Material 3

Ideal para bloques de contenido con fondo sólido.

Card.filled(
 child: Padding(
   padding: EdgeInsets.all(16),
   child: Text("Filled Card"),
 ),
)

Outlined Card

Perfecto para tarjetas minimalistas sin sombra.

Card.outlined(
 child: Padding(
   padding: EdgeInsets.all(16),
   child: Text("Outlined Card"),
 ),
)

Buenas prácticas para diseñar tarjetas limpias y profesionales

Organización del contenido

Una buena jerarquía para nuestro contenido:

Imagen → Título → Descripción → Acción.

Jerarquía visual

• Usa sombras suaves.
• No mezcles demasiados estilos de texto.
• Espaciado generoso: mínimo 16px de padding interno.

Sombra, contraste y accesibilidad

• Revisa el contraste entre texto y fondo.
• Evita sombras muy densas.
• Usa bordes redondeados consistentes.

Preguntas frecuentes sobre los Card en Flutter

• ❓ ¿Cómo agrego varios widgets dentro de un Card?
  • Con un Column, Row, ListTile o Container.
• ❓ ¿Cómo hago un Card táctil?
  • Rodealo con InkWell o GestureDetector.
• ❓ ¿Qué diferencia hay entre Card, Card.filled y Card.outlined?
  • La sombra y el estilo visual: elevated, lleno o delineado.
• ❓ ¿Cómo cambio la forma del Card?
  • Con shape: RoundedRectangleBorder(...).

Conclusión

El Card en Flutter es un widget extremadamente versátil: puedes usarlo para listas, formularios, productos, perfiles, configuraciones y prácticamente cualquier bloque de contenido. Con solo dominar sus propiedades (color, shape, elevation, clipBehavior) y combinarlo con columnas, imágenes y botones, puedes construir interfaces limpias y profesionales.

Y lo mejor: su comportamiento es consistente en Android, iOS y web.

Lo único que necesitas es saber organizar el contenido y aprovechar sus variantes de Material 3 para lograr diseños más modernos.

Siguiente widget, el widget Slider para definir rangos en Flutter.