Flutter Container Widget

Do you have a widget that needs

  • some background style, maybe a background color
  • shape
  • or some size constraints?

Try wrapping it in a Container Widget. It helps you compose, decorate and position child widgets.

Color

If you wrap your widget in a container widget without any other parameters, you won’t notice any difference in appearance but if you add the color parameter, your child widget will get a background color.

Container(
   child: Text('Container Widget'),
   color: Colors.blue
);

Without anything else, the container sizes itself to its child.

Container Widget Color

Padding

Use the container’s padding property to add empty space between the child widget and the container boundary.

Container(
   child: Text('Container Widget'),
   color: Colors.blue,
   padding: EdgeInsets.all(20.0),
);
Container Padding

Margin

Use the margin property to add empty space that surrounds the widget.

Container(
   child: Text('Container Widget'),
   color: Colors.blue,
   padding: EdgeInsets.all(20.0),
   margin: EdgeInsets.all(20.0),
);

Lets remove the Center widget that wrapped the container widget so that you can get a better idea of the container’s margin property.

Center Widget Removed
Container Margin

Decoration

Use the decoration property to add a shape to your container like a circle.

Container(
   child: Text('Container Widget'),
   decoration: BoxDecoration(
      shape: BoxShape.circle,
      color: Colors.blue,
   ),
   padding: EdgeInsets.all(50.0),
   margin: EdgeInsets.all(25.0),
);

The decoration is by default sized to the container’s child. In this case, the container fits the circle decoration to the narrowest parameter, the text widget’s height. You can style the decoration with margin and padding, just like before.

Container Shape

Alignment, Width & Height

Use the alignment property to align the child within the container (The text within the text box in this case). Once you set alignment, the container will expand to fill its parent’s width and height. You can override this by setting the container’s width and height properties.

Container(
   child: Text('Container Widget'),
   color: Colors.blue,
   alignment: Alignment.center,
   width: 200,
   height: 100,
);
Container Alignment, Width & Height

Transform

The transform applies a slight rotation to the entire contraption to complete the effect. Let us rotate our container to add more flavor to this design.

Container(
   child: Text('Container Widget'),
   color: Colors.blue,
   width: 200.0,
   height: 200.0,
   transform: Matrix4.rotationZ(0.05),
);
Container Transform

Let us use some more properties to decorate our container widget.

import 'package:flutter/material.dart';

void main() => runApp(const HomePage());

class HomePage extends StatelessWidget {
  const HomePage({super.key});

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: "Material App Title",
      home: Scaffold(
        appBar: AppBar(
          title: const Text("Awesome App Title"),
        ),
        body: Center(
          child: Container(
            padding: const EdgeInsets.all(8),
            alignment: Alignment.center,
            width: 150,
            height: 100,
            transform: Matrix4.rotationZ(0.05),
            decoration: BoxDecoration(
                //shape: BoxShape.circle,
                borderRadius: BorderRadius.circular(10),
                boxShadow: const [
                  BoxShadow(
                      color: Colors.blueGrey,
                      blurRadius: 5,
                      offset: Offset(2.0, 5.0)),
                ],
                color: Colors.teal,
                gradient:
                    const LinearGradient(colors: [Colors.yellow, Colors.pink])),
            child: const Text(
              "Container Widget",
              textAlign: TextAlign.center,
              style: TextStyle(
                color: Colors.white,
                fontWeight: FontWeight.bold,
                fontSize: 20,
              ),
            ),
          ),
        ),
      ),
    );
  } //build
} //HomePage
Container Final App

Comments

comments

no responses for Flutter Container Widget

    Leave a Reply

    Your email address will not be published.