Container widget in Flutter - Mini App: Build & Ship

Build: Simple Container Screen

This screen shows a centered Container with a colored background, fixed size, and rounded corners.

Target UI

-----------------------
|                     |
|                     |
|       _______       |
|      |       |      |
|      |       |      |
|      |       |      |
|      |_______|      |
|                     |
|                     |
-----------------------

Add a Container widget centered on the screen

Set the Container width to 200 and height to 150

Give the Container a blue background color

Add rounded corners with a radius of 20

Place a Text widget inside the Container that says 'Hello Container!' centered

Starter Code

Flutter

import 'package:flutter/material.dart';

void main() {
  runApp(const MyApp());
}

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

  @override
  Widget build(BuildContext context) {
    return const MaterialApp(
      home: Scaffold(
        body: Center(
          // TODO: Add your Container widget here
        ),
      ),
    );
  }
}

Task 1

Task 2

Task 3

Solution

Flutter

import 'package:flutter/material.dart';

void main() {
  runApp(const MyApp());
}

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

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        body: Center(
          child: Container(
            width: 200,
            height: 150,
            decoration: BoxDecoration(
              color: Colors.blue,
              borderRadius: BorderRadius.circular(20),
            ),
            alignment: Alignment.center,
            child: const Text(
              'Hello Container!',
              style: TextStyle(color: Colors.white, fontSize: 18),
            ),
          ),
        ),
      ),
    );
  }
}

We used a Container widget inside a Center widget to place it in the middle of the screen. The container has a fixed width and height to control its size. We used BoxDecoration to set a blue background color and rounded corners with borderRadius. The alignment property centers the Text inside the container. The text color is white so it is easy to read on the blue background.

Final Result

Completed Screen

-----------------------
|                     |
|                     |
|    +-------------+  |
|    | Hello       |  |
|    | Container!  |  |
|    +-------------+  |
|                     |
|                     |
-----------------------

The screen shows a blue rounded rectangle in the center with the text 'Hello Container!'

No buttons or gestures are active on this screen

Stretch Goal

Add a shadow effect to the Container to make it look raised

💡 Hint

Use the BoxDecoration's boxShadow property with BoxShadow color, blurRadius, and offset

Practice

1. What is the primary purpose of the Container widget in Flutter?

easy

A. To manage app navigation between screens

B. To handle user input events like taps and swipes

C. To fetch data from the internet

D. To hold and style a single child widget with size, color, and padding

Solution

1. Step 1: Understand Container's role

   The Container widget is designed to hold one child widget and apply styling like size, color, padding, and margin.

2. Step 2: Compare with other options

   Navigation, data fetching, and input handling are done by other widgets or classes, not Container.

3. Final Answer:

   To hold and style a single child widget with size, color, and padding -> Option D

4. Quick Check:

   Container = styling box for one child [OK]

Hint: Container styles one child widget visually [OK]

Common Mistakes:

• Confusing Container with navigation widgets
• Thinking Container handles user input
• Assuming Container manages data fetching

2. Which of the following is the correct way to set a fixed width and height of 100 pixels for a Container?

easy

A. Container(constraints: BoxConstraints(width: 100, height: 100))

B. Container(size: Size(100, 100))

C. Container(width: 100.0, height: 100.0)

D. Container(dimensions: {width: 100, height: 100})

Solution

1. Step 1: Recall Container size properties

   Container uses width and height properties inside a BoxConstraints via constraints or directly in width and height parameters.

2. Step 2: Check syntax correctness

   Width and height expect double values, so 100.0 is correct. Other options use invalid syntax: no size property, constraints: BoxConstraints(width: 100, height: 100) is wrong as BoxConstraints uses minWidth/maxWidth, no dimensions.

3. Final Answer:

   Container(width: 100.0, height: 100.0) -> Option C

4. Quick Check:

   Width and height use double values [OK]

Hint: Use width and height as doubles for Container size [OK]

Common Mistakes:

• Using non-existent 'size' or 'dimensions' properties
• Using BoxConstraints with invalid 'width'/'height' parameters
• Confusing Container size with padding

3. What will be the background color of this Container?

Container(
  width: 100.0,
  height: 100.0,
  color: Colors.blue,
  child: Container(
    color: Colors.red,
    width: 50,
    height: 50,
  ),
)

medium

A. Blue background with a smaller red box inside

B. Red background with a smaller blue box inside

C. Only blue background visible, red ignored

D. Only red background visible, blue ignored

Solution

1. Step 1: Understand nested Containers

   The outer Container has a blue color and contains a smaller inner Container colored red with fixed size 50x50.

2. Step 2: Visualize layering

   The outer Container's blue color fills its area. The inner Container is smaller and red, so it appears as a red box inside the blue background.

3. Final Answer:

   Blue background with a smaller red box inside -> Option A

4. Quick Check:

   Outer color shows behind inner smaller Container [OK]

Hint: Inner Container overlays outer Container color [OK]

Common Mistakes:

• Thinking inner Container replaces outer color
• Assuming colors blend automatically
• Ignoring size difference between Containers

4. Identify the error in this Container code:

Container(
  padding: EdgeInsets.all(10),
  margin: EdgeInsets.symmetric(horizontal: 20),
  color: Colors.green,
  child: Text('Hello'),
  width: 100,
  height: 50,
  decoration: BoxDecoration(borderRadius: BorderRadius.circular(8)),
)

medium

A. EdgeInsets.symmetric requires vertical parameter

B. Cannot use both color and decoration properties together

C. Text widget cannot be child of Container

D. width and height must be inside decoration

Solution

1. Step 1: Check Container property rules

   Container's color and decoration cannot be used together because color should be inside BoxDecoration if decoration is used.

2. Step 2: Verify other properties

   EdgeInsets.symmetric with only horizontal is valid, Text can be child, width and height are direct Container properties, not inside decoration.

3. Final Answer:

   Cannot use both color and decoration properties together -> Option B

4. Quick Check:

   color and decoration are mutually exclusive [OK]

Hint: Use color inside decoration or alone, not both [OK]

Common Mistakes:

• Using color and decoration simultaneously
• Misunderstanding EdgeInsets.symmetric usage
• Placing width/height inside decoration

5. You want to create a Container with a red border of 3 pixels, rounded corners of 12 pixels, padding of 16 pixels inside, and a fixed size of 150x150. Which code snippet correctly achieves this?

hard

A. Container(
width: 150,
height: 150,
padding: EdgeInsets.all(16),
decoration: BoxDecoration(
border: Border.all(color: Colors.red, width: 3),
borderRadius: BorderRadius.circular(12),
),
child: Text('Styled Box'),
)

B. Container(
width: 150,
height: 150,
margin: EdgeInsets.all(16),
decoration: BoxDecoration(
border: Border.all(color: Colors.red, width: 3),
borderRadius: BorderRadius.circular(12),
),
child: Text('Styled Box'),
)

C. Container(
width: 150,
height: 150,
padding: EdgeInsets.all(16),
color: Colors.red,
borderRadius: BorderRadius.circular(12),
child: Text('Styled Box'),
)

D. Container(
width: 150,
height: 150,
padding: EdgeInsets.all(16),
decoration: BoxDecoration(
border: Border.all(color: Colors.red),
borderRadius: BorderRadius.circular(12),
),
child: Text('Styled Box'),
)

Solution

1. Step 1: Set fixed size and padding

   Width and height are set directly on Container. Padding is set with EdgeInsets.all(16) to add space inside the border.

2. Step 2: Define border and rounded corners in decoration

   Use BoxDecoration with border: Border.all(color: Colors.red, width: 3) for red border 3 pixels thick, and borderRadius.circular(12) for rounded corners.

3. Step 3: Check other options

   Container( width: 150, height: 150, margin: EdgeInsets.all(16), decoration: BoxDecoration( border: Border.all(color: Colors.red, width: 3), borderRadius: BorderRadius.circular(12), ), child: Text('Styled Box'), ) uses margin instead of padding, which adds space outside border. Container( width: 150, height: 150, padding: EdgeInsets.all(16), color: Colors.red, borderRadius: BorderRadius.circular(12), child: Text('Styled Box'), ) incorrectly uses color and borderRadius outside decoration. Container( width: 150, height: 150, padding: EdgeInsets.all(16), decoration: BoxDecoration( border: Border.all(color: Colors.red), borderRadius: BorderRadius.circular(12), ), child: Text('Styled Box'), ) misses border width, default is 1 pixel.

4. Final Answer:

   Container with width, height, padding, and BoxDecoration with red border 3px and 12px radius -> Option A

5. Quick Check:

   Border and radius go inside decoration; padding adds inner space [OK]

Hint: Put border and radius inside decoration, padding outside [OK]

Common Mistakes:

• Using margin instead of padding for inner space
• Setting color and borderRadius outside decoration
• Forgetting border width in Border.all