Flutter Container and Decoration

Container is the most commonly used general-purpose container Widget in Flutter, providing capabilities such as setting size, background, border, and shadow.

Container Overview

Container is a composite Widget that internally encapsulates functionality such as Padding, ColoredBox, SizedBox, and DecoratedBox.

Example: Basic Usage of Container

// The 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 can add richer decoration effects, such as background, border, shadow, rounded corners, etc.

Background color

Example: Background Color Setting

// Solid color background
Container(
  decoration: BoxDecoration(
    color: Colors.blue,
  ),
  child: const Text('Blue background'),
)

// Use 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 Setting

// 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'),
)

// Circular 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'),
)

Border Radius

Example: Rounded Corner Setting

// Uniform border radius
Container(
  width: 100,
  height: 100,
  decoration: BoxDecoration(
    color: Colors.blue,
    borderRadius: BorderRadius.circular(20),  // Border radius 20
  ),
)

// Different border radii
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 Setting

// 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 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[400]!, Colors.blue[700]!],
          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,
            ),
          ),
        ],
      ),
    );
  }
}
other extensions