Tiempo de lectura: 1 minutoToday 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 {
const CustomCard({Key? key, this.child}) : super(key: key);
Widget build(BuildContext context) {
padding: EdgeInsets.symmetric(vertical: 10, horizontal: 20),
decoration: BoxDecoration(
borderRadius: BorderRadius.circular(12),
color: Color(0xFFF2EFE2),
color: Color(0xFFddd9cd),
color: Color(0x423F4656),
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,
);
}
}
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:
mainAxisAlignment: MainAxisAlignment.center,
color: Color(0xFF3F4656),
fontWeight: FontWeight.bold,
// Add other elements here as needed
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
],
),
),
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
Related