Today we are going to learn how to create a Widget that can contain other Widgets and be used as a background in Flutter.
![](https://i0.wp.com/images.pexels.com/photos/209096/pexels-photo-209096.jpeg?w=1200&ssl=1)
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:
![](https://i0.wp.com/devcodelight.com/wp-content/uploads/2024/01/imagen-59.png?resize=362%2C187&ssl=1)
![](https://i0.wp.com/devcodelight.com/wp-content/uploads/2023/07/cropped-light_logo-5.png?resize=100%2C100&ssl=1)