Exploring Decorated Containers in Flutter: Adding Style to Your Widgets

In this article post, we'll explore various ways to add style to your Flutter widgets using Decorated Containers. From adding padding and margins to applying gradients and box shadows, we'll cover a range of techniques to enhance the visual appeal of your UI.

We'll also demonstrate how to use Decorated Containers with images and text to create visually striking UIs.

Learn how to enhance the visual appeal of your Flutter widgets using Decorated Containers. Explore various properties and examples with code snippets.

Container widget with blue background color and text


Container(
  width: 200,
  height: 80,
  color: Colors.blue,
  child: const Text(
      'Here is a basic example of using the Container widget'),
),

Properties:

width: The width of the container.
height: The height of the container.
color: The background color of the container.
child: The child widget that is displayed inside the container, in this case a text widget that displays a message.

Creating a Container Widget with Padding and Margin Properties


Container(
            padding: const EdgeInsets.all(10),
            margin: const EdgeInsets.all(10),
            width: 100,
            height: 100,
            color: Colors.blue,
            child: const Text('Adding Padding and Margin'),
          ),

Properties:

padding: EdgeInsets class - used to add padding to the widget
margin: EdgeInsets class - used to add margin to the widget
width: double - sets the width of the widget
height: double - sets the height of the widget
color: Color class - sets the background color of the widget
child: Widget class - the child widget to be displayed inside the container widget.

Setting a gradient background


Container(
            width: 100,
            height: 100,
            decoration: const BoxDecoration(
                gradient: LinearGradient(
                    begin: Alignment.bottomRight,
                    end: Alignment.bottomLeft,
                    colors: [Colors.lightBlueAccent, Colors.lime])),
            child: const Text('Setting a Gradient Background'),
          ),

Properties:

width property sets the width of the container to 100.
height property sets the height of the container to 100.
decoration property sets the decoration of the container to a gradient background using BoxDecoration().
gradient property sets the gradient of the background to transition from Colors.lightBlueAccent at the bottom right to Colors.lime at the bottom left using LinearGradient().
begin property of LinearGradient() specifies the starting point of the gradient to be at the bottom right using Alignment.bottomRight.
end property of LinearGradient() specifies the ending point of the gradient to be at the bottom left using Alignment.bottomLeft.
child property sets the child widget to display inside the container, which is a Text() widget displaying the text "Setting a Gradient Background".

Adding a border


Container(
            width: 100,
            height: 100,
            decoration: BoxDecoration(
                border: Border.all(width: 3, color: Colors.redAccent)),
            child: const Text(
              'Adding a Border',
            ),
          ),

Properties:

width property sets the width of the container to 100.
height property sets the height of the container to 100.
decoration property sets the decoration of the container to include a border using BoxDecoration().
border property of BoxDecoration() sets the border of the container with a width of 3 and a color of Colors.redAccent using Border.all().
width property of Border.all() specifies the width of the border to be 3.
color property of Border.all() specifies the color of the border to be Colors.redAccent.
child property sets the child widget to display inside the container, which is a Text() widget displaying the text "Adding a Border".

Adding rounded corners


Container(
            width: 100,
            height: 100,
            decoration: BoxDecoration(
                color: Colors.lightBlue,
                borderRadius: BorderRadius.circular(10)),
            child: const Text(
              'Adding Rounded Corners',
              style: TextStyle(fontSize: 12, fontWeight: FontWeight.bold),
            ),
          ),

Properties:

width property sets the width of the container to 100.
height property sets the height of the container to 100.
decoration property sets the decoration of the container to include a background color and rounded corners using BoxDecoration().
color property of BoxDecoration() sets the background color of the container to Colors.lightBlue.
borderRadius property of BoxDecoration() sets the radius of the container's corners to be 10 using BorderRadius.circular().
child property sets the child widget to display inside the container, which is a Text() widget displaying the text "Adding Rounded Corners".
style property of the Text() widget sets the style of the text to have a font size of 12 and a bold font weight using TextStyle().

Using a network image as a background


Container(
            width: 200,
            height: 200,
            decoration: const BoxDecoration(
              image: DecorationImage(
                image: NetworkImage('https://raw.githubusercontent.com/BoltUIX/FlutterBlog/main/blog/raw/bg.webp'),
                fit: BoxFit.cover,
              ),
            ),
            child: const Text('Using a Network Image:'),
          ),

Properties:

width property sets the width of the container to 200.
height property sets the height of the container to 200.
decoration property sets the decoration of the container to include an image as the background using BoxDecoration().
image property of DecorationImage() sets the image to be displayed as the background of the container, using a NetworkImage() to fetch the image from the specified URL 'https://picsum.photos/200'.
fit property of DecorationImage() specifies how to fit the image within the container, in this case, it's set to BoxFit.cover, which scales the image to fill the container while maintaining its aspect ratio.
child property sets the child widget to display inside the container, which is a Text() widget displaying the text "Using a Network Image:".

Adding a box shadow


Container(
            width: 200,
            height: 200,
            decoration: BoxDecoration(
              color: Colors.blue,
              boxShadow: [
                BoxShadow(
                  color: Colors.black.withOpacity(0.3),
                  blurRadius: 5,
                  spreadRadius: 2,
                  offset: const Offset(2, 2),
                ),
              ],
            ),
            child: const Text('Using a Box Shadow'),
          ),

Creating a Container with Transformation, Styling, and Layout Properties


Container(
            width: 200,
            height: 200,
            alignment: Alignment.center,
            margin: const EdgeInsets.all(16),
            decoration: BoxDecoration(
              color: Colors.blue,
              borderRadius: BorderRadius.circular(20),
              boxShadow: [
                BoxShadow(
                  color: Colors.black.withOpacity(0.3),
                  blurRadius: 5,
                  spreadRadius: 2,
                  offset: const Offset(2, 2),
                ),
              ],
            ),
            transform: Matrix4.rotationZ(0.1),
            child: const Text(
              'Transform',
              style: TextStyle(fontSize: 20, color: Colors.white),
            ),
          ),

Properties:

width property sets the width of the container to 200.
height property sets the height of the container to 200.
alignment property sets the alignment of the child widget to the center of the container, using Alignment.center.
margin property sets the margin of the container to 16 pixels on all sides, using EdgeInsets.all(16).
decoration property sets the decoration of the container to include a background color, rounded corners, and a box shadow using BoxDecoration().
color property of BoxDecoration() sets the background color of the container to Colors.blue.
borderRadius property of BoxDecoration() sets the radius of the container's corners to 20 pixels, using BorderRadius.circular(20).
boxShadow property of BoxDecoration() sets the box shadow of the container using a list of BoxShadow() objects.
color property of BoxShadow() specifies the color of the shadow to be black with 30% opacity, using Colors.black.withOpacity(0.3).
blurRadius property of BoxShadow() specifies the radius of the shadow's blur using a value of 5.
spreadRadius property of BoxShadow() specifies the distance the shadow should spread from the container's edges using a value of 2.
offset property of BoxShadow() specifies the position of the shadow relative to the container using an Offset() object with horizontal and vertical offsets of 2 pixels.
transform property applies a 3D transformation to the container using a Matrix4() object with a rotation of 0.1 radians around the Z-axis, using Matrix4.rotationZ(0.1).
child property sets the child widget to display inside the container, which is a Text() widget displaying the text "Transform" with a font size of 20 and white text color.

A Decorated Container with Image and Text


Container(
            width: double.infinity,
            height: 200,
            margin: const EdgeInsets.symmetric(vertical: 16, horizontal: 24),
            decoration: BoxDecoration(
              borderRadius: BorderRadius.circular(12),
              boxShadow: [
                BoxShadow(
                  color: Colors.black.withOpacity(0.1),
                  blurRadius: 10,
                  spreadRadius: 5,
                  offset: const Offset(0, 5),
                ),
              ],
              image: const DecorationImage(
                image: AssetImage('assets/images/bg.webp'),
                fit: BoxFit.cover,
              ),
            ),
            child: Column(
              mainAxisAlignment: MainAxisAlignment.center,
              children: [
                const Text(
                  'Welcome to my App',
                  style: TextStyle(
                    fontSize: 24,
                    fontWeight: FontWeight.bold,
                    color: Colors.white,
                  ),
                ),
                const SizedBox(height: 16),
                ElevatedButton(
                  onPressed: () {},
                  child: const Text('Get Started'),
                ),
              ],
            ),
          ),

Properties:

width: the width of the container set to the maximum possible (double.infinity)
height: the height of the container set to 200 pixels
margin: the outer margin of the container set to 16 pixels vertically and 24 pixels horizontally
decoration: a decoration object that defines the container's appearance:
borderRadius: the corners of the container are rounded with a 12 pixels radius
boxShadow: a box shadow with a black color and a low opacity, a blur radius of 10, a spread radius of 5, and an offset of 0 on the x-axis and 5 on the y-axis
image: a decoration image that covers the entire container and uses an image asset (bg.webp) from the app's assets/images folder
child: a Column widget that is centered inside the container and contains:
a Text widget that displays "Welcome to my App" with a white color and a bold font style
a SizedBox widget with a height of 16 pixels
an ElevatedButton widget with the label "Get Started"

Search This Blog

Bolt UiX

Exploring Decorated Containers in Flutter: Adding Style to Your Widgets

Comments

Post a Comment