YouTipFlutter Container
Container is the most commonly used general-purpose container Widget in Flutter, providing capabilities for setting size, background, border, shadow, and more.
* * *
## Container Overview
Container is a composite Widget that internally encapsulates functionalities such as Padding, ColoredBox, SizedBox, and DecoratedBox.
## Example: Basic Container Usage
// Simplest Container
Container(
child: Text('Hello'),
)
// Container with size
Container(
width:200,
height:100,
child: Text('Fixed size'),
)
// Container with color
Container(
width:200,
height:100,
color: Colors.blue,
child: Text('Blue background', style: TextStyle(color: Colors.white)),
)
* * *
## BoxDecoration - Decorative Effects
Using BoxDecoration allows you to add richer decorative effects, such as background, border, shadow, rounded corners, etc.
### Background Color
## Example: Background Color Settings
// Solid color background
Container(
decoration: BoxDecoration(
color: Colors.blue,
),
child:const Text('Blue background'),
)
// Using gradient background
Container(
decoration: BoxDecoration(
gradient: LinearGradient(
colors:[Colors.blue, Colors.green],
begin: Alignment.topLeft,
end: Alignment.bottomRight,
),
),
child:const Text('Gradient background'),
)
// Radial gradient
Container(
decoration: BoxDecoration(
gradient: RadialGradient(
colors:[Colors.yellow, Colors.orange],
),
),
child:const Text('Radial gradient'),
)
### Border
## Example: Border Settings
// Simple border
Container(
decoration: BoxDecoration(
border: Border.all(color: Colors.black, width:2),
),
child:const Text('Black border'),
)
// Different borders on each side
Container(
decoration: BoxDecoration(
border: Border(
top: BorderSide(color: Colors.red, width:2),
bottom: BorderSide(color: Colors.blue, width:2),
left: BorderSide(color: Colors.green, width:2),
right: BorderSide(color: Colors.orange, width:2),
),
),
child:const Text('Different borders on each side'),
)
// Rounded border
Container(
decoration: BoxDecoration(
border: Border.all(color: Colors.purple, width:3),
borderRadius: BorderRadius.circular(10),
),
padding:const EdgeInsets.all(16),
child:const Text('Rounded border'),
)
### Rounded Corners
## Example: Rounded Corner Settings
// Uniform rounded corners
Container(
width:100,
height:100,
decoration: BoxDecoration(
color: Colors.blue,
borderRadius: BorderRadius.circular(20),// corner radius 20
),
)
// Different rounded corners
Container(
width:100,
height:100,
decoration: BoxDecoration(
color: Colors.green,
borderRadius: BorderRadius.only(
topLeft: Radius.circular(20),
topRight: Radius.circular(10),
bottomLeft: Radius.circular(10),
bottomRight: Radius.circular(20),
),
),
)
// Circle
Container(
width:100,
height:100,
decoration: BoxDecoration(
color: Colors.red,
shape: BoxShape.circle,
),
)
### Shadow
## Example: Shadow Settings
// Simple shadow
Container(
width:100,
height:100,
decoration: BoxDecoration(
color: Colors.white,
boxShadow:[
BoxShadow(
color: Colors.black.withOpacity(0.3),
blurRadius:10,// blur radius
offset: Offset(5,5),// offset
),
],
),
)
// Multiple shadows
Container(
width:100,
height:100,
decoration: BoxDecoration(
color: Colors.white,
boxShadow:[
BoxShadow(
color: Colors.red.withOpacity(0.3),
blurRadius:5,
offset: Offset(-3,-3),
),
BoxShadow(
color: Colors.blue.withOpacity(0.3),
blurRadius:5,
offset: Offset(3,3),
),
],
),
)
// Card shadow (using elevation)
Card(
elevation:8,
child: Container(
width:100,
height:100,
child:const Center(child: Text('Card')),
),
)
* * *
## Clip - Clipping
Using the Clip class, you can clip the display area of child Widgets.
## Example: Clipping Usage
// Circular clipping
ClipOval(
child: Image.network(
'https://example.com/avatar.jpg',
width:100,
height:100,
fit: BoxFit.cover,
),
)
// Rounded rectangle clipping
ClipRRect(
borderRadius: BorderRadius.circular(20),
child: Image.network(
'https://example.com/image.jpg',
width:200,
height:150,
fit: BoxFit.cover,
),
)
// Custom path clipping
ClipPath(
clipper: TriangleClipper(),
child: Image.network(
'https://example.com/image.jpg',
width:200,
height:200,
),
)
* * *
## Comprehensive Example
## Example: Comprehensive Usage Example
// Card with gradient, rounded corners, and shadow
class MyCard extends StatelessWidget {
final String title;
final String description;
final IconData icon;
const MyCard({
super.key,
required this.title,
required this.description,
required this.icon,
});
@override
Widget build(BuildContext context){
return Container(
width:280,
padding:const EdgeInsets.all(20),
decoration: BoxDecoration(
// Gradient background
gradient: LinearGradient(
colors:[Colors.blue!, Colors.blue!],
begin: Alignment.topLeft,
end: Alignment.bottomRight,
),
// Rounded corners
borderRadius: BorderRadius.circular(16),
// Shadow
boxShadow:[
BoxShadow(
color: Colors.blue.withOpacity(0.4),
blurRadius:12,
offset:const Offset(0,6),
),
],
),
child: Column(
crossAxisAlignment: CrossAxisAlignment.start,
mainAxisSize: MainAxisSize.min,
children:[
// Icon
Container(
padding:const EdgeInsets.all(12),
decoration: BoxDecoration(
color: Colors.white.withOpacity(0.2),
borderRadius: BorderRadius.circular(12),
),
child: Icon(icon, color: Colors.white, size:32),
),
const SizedBox(height:16),
// Title
Text(
title,
style:const TextStyle(
color: Colors.white,
fontSize:22,
fontWeight: FontWeight.bold,
),
),
const SizedBox(height:8),
// Description
Text(
description,
style: TextStyle(
color: Colors.white.withOpacity(0.9),
fontSize:14,
),
),
],
),
);
}
}