Crear un widget que pueda contener a otros widgets (ejemplo de custom card) con Flutter

Tiempo de lectura: < 1 minuto

Hoy vamos a aprender cómo podemos generar un Widget que sea capaz de contener otros Widgets y usarse de fondo en Flutter.

Lo primero que vamos a hacer es crear nuestro Widget al que llamaremos CustomCard.dart

Contiene este código:

import 'package:flutter/material.dart';

class CustomCard extends StatelessWidget {
  final Widget? child;

  const CustomCard({Key? key, this.child}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return Container(
      padding: EdgeInsets.symmetric(vertical: 10, horizontal: 20),
      decoration: BoxDecoration(
        borderRadius: BorderRadius.circular(12),
        color: Color(0xFFF2EFE2),
        boxShadow: [
          BoxShadow(
            color: Color(0xFFddd9cd),
            blurRadius: 0,
            offset: Offset(0, 10),
          ),
          BoxShadow(
            color: Color(0x423F4656),
            blurRadius: 20,
            offset: Offset(-5, -5),
            spreadRadius: 1,
          ),
        ],
      ),
      child: child,
    );
  }
}

Una vez creado, podemos personalizarlo, lo interesante de este Widget es que puede contener a otros Widgets que recibe en final Widget? child;

En este caso recibirá 1 solo widget pero podemos recibir una columna con varios elementos:

                        CustomCard(
                            child: Column(
                              mainAxisAlignment: MainAxisAlignment.center,
                              children: [
                                Text(
                                  'Contenido Adicional',
                                  style: TextStyle(
                                    color: Color(0xFF3F4656),
                                    fontWeight: FontWeight.bold,
                                    fontSize: 18,
                                  ),
                                ),
                                // Agrega otros elementos aquí según tus necesidades
                              ],
                            ),
                          ),

Siendo este nuestro resultado: