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