4 min read

Flutter Container

Updated: Aug 2

The container in Flutter is a parent widget that can hold multiple child widgets and manage them with properties like width, height, padding, and background color. It handles the painting, positioning, and sizing of its children. It acts like a box to store and position widgets on the screen. Users can decorate its child widgets with attributes like margin to separate them from other contents. It is also a class to store one or more widgets and position them on the screen according to our needs.

It can contain child widgets and apply properties like padding, margin, color, border, and more. It's one of the most versatile and commonly used widgets in Flutter for layout and styling purposes.

Learn Flutter Container — Flutter Container

Constructor

Container(

{Key? key,

AlignmentGeometry? alignment,

EdgeInsetsGeometry? padding,

Color? color,

Decoration? decoration,

Decoration? foregroundDecoration,

double? width,

double? height,

BoxConstraints? constraints,

EdgeInsetsGeometry? margin,

Matrix4? transform,

AlignmentGeometry? transformAlignment,

Widget? child,

Clip clipBehavior = Clip.none}

)

Properties of Flutter Container widget

child

The container's child widget is stored in this property. Take a Text widget as an example, which can be seen in the following example:

Container(  
    child: Text("Text inside container widget", style: TextStyle(fontSize: 18)),  
)

height and width

color

padding

margin

alignment

decoration

Practice with container widget

Container Example 1

Flutter Container UI — Flutter Container Example 1



class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      debugShowCheckedModeBanner: false,
      home: ContainerExample1(),
    );
  }
}

class ContainerExample1 extends StatelessWidget {
  
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        backgroundColor: Color(0xff3555c0),
        leading: SvgPicture.asset(
          'assets/image/code_cap.svg',
          fit: BoxFit.fitWidth,
        ),//Comment this line
        title: Text('Code Cappuccino', style: TextStyle(color: Colors.white)),
      ),
      body: Center(
        child: Container(
          width: 200,
          height: 200,
          margin: EdgeInsets.all(20),
          padding: EdgeInsets.all(10),
          decoration: BoxDecoration(
            color: Colors.blue,
            borderRadius: BorderRadius.circular(20),
            boxShadow: [
              BoxShadow(
                color: Colors.grey.withOpacity(0.5),
                spreadRadius: 5,
                blurRadius: 7,
                offset: Offset(0, 3),
              ),
            ],
            gradient: const LinearGradient(
              begin: Alignment.topLeft,
              end: Alignment.bottomRight,
              colors: [Colors.blue, Colors.lightBlue],
            ),
          ),
          child: const Column(
            mainAxisAlignment: MainAxisAlignment.center,
            children: [
              Text(
                'Container Example 1',
                style: TextStyle(
                  color: Colors.white,
                  fontSize: 18,
                  fontWeight: FontWeight.bold,
                ),
              ),
              SizedBox(height: 10),
              Text(
                'This is a container widget with various properties.',
                style: TextStyle(
                  color: Colors.white,
                ),
              ),
            ],
          ),
        ),
      ),
    );
  }
}