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

by
Tiempo de lectura: 1 minuto

Today we are going to learn how to create a Widget that can contain other Widgets and be used as a background in Flutter.

The first thing we are going to do is create our Widget which we will call CustomCard.dart

It contains this code:

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,
    );
  }
}

Once created, we can customize it. The interesting thing about this Widget is that it can contain other Widgets that it receives in final Widget? child;

In this case, it will receive only 1 widget but we can receive a column with several elements:

CustomCard(
  child: Column(
    mainAxisAlignment: MainAxisAlignment.center,
    children: [
      Text(
        'Additional Content',
        style: TextStyle(
          color: Color(0xFF3F4656),
          fontWeight: FontWeight.bold,
          fontSize: 18,
        ),
      ),
      // Add other elements here as needed
    ],
  ),
),

Resulting in:

Post Views: 1

Leave a Comment