Flutter Container Widget

Container widget is used to contain a child widget with the ability to apply some styling properties. If the Container widget has no child it will automatically fill the given area on the screen, otherwise it will wrap the height & width of the given child element.

Container Widget should not render directly without any parent widget. You can use Center widget, Padding Widget, Column Widget, Row Widget or Scaffold Widget as parent.

This widget can only have one child. To layout multiple children, let this widget’s child be a widget such as Row, Column, or Stack, which have a children property, and then provide the children to that widget.

Example:

import 'package:flutter/material.dart';

void main() {
  runApp(MaterialApp(
    debugShowCheckedModeBanner: false,
    title: "My App",
    home: ContainerWidget(),
    theme: ThemeData(
      primarySwatch: Colors.pink,
    ),
  ));
}

class ContainerWidget extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text("Container Widget Tutorial"),
      ),
      body: Container(

      ),
    );
  }
}

Output:

To change background color we use following code:

body: Container(
  color: Colors.pinkAccent,
),

Output:

If you add any widget then containe take that widget size:

body: Container(
  color: Colors.pinkAccent,
  child: ElevatedButton(
    child: Text("Click Me"),
    onPressed: (){},
  ),
),

Output:

If you want full width of widget then:

body: Container(
  color: Colors.pinkAccent,
  width: MediaQuery.of(context).size.width,
  child: ElevatedButton(
    child: Text("Click Me"),
    onPressed: (){},
  ),

),

Output:

If you want to align the widget in any position in device then:

body: Align(
  alignment: Alignment.bottomCenter,
  child: Container(
    color: Colors.pinkAccent,
    width: MediaQuery.of(context).size.width,
    child: ElevatedButton(
      child: Text("Click Me"),
      onPressed: (){},
    ),

  ),
),

Output:

If you want to give fixed size of your widget then:

body: Align(
  alignment: Alignment.bottomCenter,
  child: Container(
    color: Colors.pinkAccent,
    width: 200,
    child: ElevatedButton(
      child: Text("Click Me"),
      onPressed: (){},
    ),

  ),
),

Output:

If you want to rotate or transform your widget then:

body: Align(
  alignment: Alignment.bottomCenter,
  child: Container(
    color: Colors.pinkAccent,
    width: 200,
    child: ElevatedButton(
      child: Text("Click Me"),
      onPressed: (){},
    ),
transform: Matrix4.rotationZ(0.5),
  ),
),

Output:

If you want to apply the linear gradient in boxdecoration then:

body: Align(
  alignment: Alignment.bottomCenter,
  child: Container(
    color: Colors.pinkAccent,
    width: 200,
    child: ElevatedButton(
      child: Text("Click Me"),
      onPressed: (){},
    ),
decoration: BoxDecoration(
      gradient: LinearGradient(
        colors: [
          Colors.green,Colors.red,Colors.yellowAccent,
        ],
      ),

  ),
),

Output:

If you want to apply the radial gradient in boxdecoration then:

body: Align(
  alignment: Alignment.bottomCenter,
  child: Container(
    color: Colors.pinkAccent,
    width: 200,
    child: ElevatedButton(
      child: Text("Click Me"),
      onPressed: (){},
    ),
decoration: BoxDecoration(
      gradient: RadialGradient(
        colors: [
          Colors.green,Colors.red,Colors.yellowAccent,
        ],
      ),

  ),
),

Output:

If you want to apply the color in boxdecoration then:

body: Align(
  alignment: Alignment.bottomCenter,
  child: Container(
    color: Colors.pinkAccent,
    width: 200,
    child: ElevatedButton(
      child: Text("Click Me"),
      onPressed: (){},
    ),
decoration: BoxDecoration(
      color:Colors.green;
  ),
),

Output:

If you want to apply the image in boxdecoration then:

body: Align(
  alignment: Alignment.center,
  child: Container(
    //color: Colors.pinkAccent,
    width: 200,
    height: 200,
    decoration: BoxDecoration(
      color: Colors.green,
      image: DecorationImage(
        image: NetworkImage("https://www.drivespark.com/images.."),
        
      ),
    ),
  ),
),

Output:

If you want to apply the image in with fit then:

body: Align(
  alignment: Alignment.center,
  child: Container(
    //color: Colors.pinkAccent,
    width: 200,
    height: 200,
    decoration: BoxDecoration(
      color: Colors.green,
      image: DecorationImage(
        image: NetworkImage("https://www.drivespark.com/images.."),
        fit: BoxFit.cover,
      ),
    ),
  ),
),

Output:

If you want to apply the boxshadow and image filter then:

body: Align(
  alignment: Alignment.center,
  child: Container(
    //color: Colors.pinkAccent,
    width: 200,
    height: 200,
    decoration: BoxDecoration(
      color: Colors.green,
      image: DecorationImage(
        image: NetworkImage("https://www.drivespark.com/images.."),
        fit: BoxFit.cover,
        colorFilter: ColorFilter.linearToSrgbGamma(),
      ),
      boxShadow: [
        BoxShadow(color: Colors.grey, offset: Offset(6.0, 6.0),),
      ],
      
    ),
  ),
),

Output:

If you want to apply the boxshadow and image filter with border radius then:

body: Align(
  alignment: Alignment.center,
  child: Container(
    //color: Colors.pinkAccent,
    width: 200,
    height: 200,
    decoration: BoxDecoration(
      color: Colors.green,
      image: DecorationImage(
        image: NetworkImage("https://www.drivespark.com/images.."),
        fit: BoxFit.cover,
        colorFilter: ColorFilter.linearToSrgbGamma(),
      ),
      boxShadow: [
        BoxShadow(color: Colors.grey, offset: Offset(6.0, 6.0),),
      ],
	borderRadius: BorderRadius.circular(8),
    ),
  ),
),

Output:

If you want to apply the boxshadow and image filter with shape and border color then:

body: Align(
  alignment: Alignment.center,
  child: Container(
    //color: Colors.pinkAccent,
    width: 200,
    height: 200,
    decoration: BoxDecoration(
      color: Colors.green,
      image: DecorationImage(
        image: NetworkImage("https://www.drivespark.com/images.."),
        fit: BoxFit.cover,
        colorFilter: ColorFilter.linearToSrgbGamma(),
      ),
      boxShadow: [
        BoxShadow(color: Colors.grey, offset: Offset(6.0, 6.0),),
      ],
      border:Border.all(color: Colors.yellowAccent, width: 4),
	  shape: BoxShape.circle,
    ),
  ),
),

Output: