On this page24 sections

Prerequisites
Connection With Previous Lectures
Learning Objectives
1. Container — One Widget, Many Jobs
2. padding vs margin
3. alignment Inside a Container
4. BoxDecoration — Rounded Corners
5. Borders
6. Shadows
7. Gradients
8. Circles
9. TextStyle
10. Long Text: textAlign, maxLines, overflow
11. Colors
12. A Real-World Example
Code Examples
Common Beginner Mistakes
Best Practices
Mini Challenge
Practice Questions
Practice Answers
Quick Revision
Key Takeaways
What's Next?

Lecture 003 — Container & Styling


Category	2 — Layout Widgets
Lecture	003 of 009
Estimated video length	18 min
Target	Flutter 3.44 · Dart 3.12
Level	Beginner

Lecture 002 needed three widgets — Padding, SizedBox and ColoredBox — just to make one colored box. Container does all of that in one widget, and BoxDecoration and TextStyle add what flat boxes could not: rounded corners, borders, shadows, gradients and styled text.

Contents

Prerequisites · Connection · Objectives · Lesson · Code Examples · Common Mistakes · Best Practices · Mini Challenge · Practice Questions · Answers · Takeaways

Every screenshot and error message in this lecture is real. Each app was run on Flutter 3.44, and each error was produced by the code shown.

Prerequisites

Students should already understand, from Lectures 001–002:

MaterialApp, Scaffold, AppBar and a screen as a StatelessWidget
Padding and the EdgeInsets constructors
Align and Alignment
SizedBox, ColoredBox and Colors.x.shadeN

Connection With Previous Lectures

At the end of Lecture 002, Zayan's "bank card" took six nested widgets, and it was still a flat rectangle with plain 14-pixel text. A real banking app has a card with rounded corners, a gradient, a soft shadow and large white text. None of the widgets we know can draw that. This lecture adds the tools to style both boxes and text.

Learning Objectives

By the end of this lecture you will be able to:

Build a box with Container's width, height, color, padding, margin and alignment
Explain the difference between padding and margin
Decorate a Container with BoxDecoration: rounded corners, borders and shadows
Paint a LinearGradient and draw a circle with BoxShape.circle
Style text with TextStyle: size, weight, color, spacing and italics
Control long text with textAlign, maxLines and overflow
Write any color as Color(0xFF…) and make it transparent with withValues(alpha: …)
Recognize the "color and decoration" error

1. `Container` — One Widget, Many Jobs

Container is a single-child widget that can size, color, pad and position its child all at once:

dart

body: Center(
  child: Container(
    width: 200,
    height: 120,
    color: Colors.amber,
    child: const Text('A 200 × 120 Container'),
  ),
),

An amber 200 by 120 box in the center with small text in its top-left corner — Container with width, height and color

Every parameter is optional. Here width and height set the size, color paints it, and the text sits in the top-left corner — a Container does not center its child unless you ask.

Analogy — a Container is a gift box. You choose its size, its wrapping paper (color and decoration), the tissue paper inside (padding), the space you leave around it on the table (margin), and where the gift sits inside (alignment).

2. `padding` vs `margin`

Both add space, but in different places:

padding is space inside the box, between its edge and the child. It is painted with the box's color.
margin is space outside the box, between it and its neighbors. It is never painted.

dart

body: ColoredBox(
  color: Colors.grey.shade300,
  child: Container(
    margin: const EdgeInsets.all(24),
    padding: const EdgeInsets.all(24),
    color: Colors.lightBlue,
    child: const Text('margin is outside the color, padding is inside'),
  ),
),

A blue box inset 24 pixels inside a grey strip, with the text 24 pixels inside the blue — margin (grey) and padding (blue)

The grey ColoredBox behind shows the margin; the blue area around the text is the padding.

3. `alignment` Inside a `Container`

alignment works exactly like the Align widget from Lecture 002, but built in:

dart

body: Container(
  height: 200,
  color: Colors.lightGreen,
  alignment: Alignment.bottomRight,
  padding: const EdgeInsets.all(12),
  child: const Text('Aligned inside the Container'),
),

A green full-width box 200 pixels tall with text in its bottom-right corner — alignment: Alignment.bottomRight

With no width, this Container stretched to the full width it was allowed. With alignment set, a Container also grows as big as it can and then places the child inside.

4. `BoxDecoration` — Rounded Corners

For anything beyond a flat color, give the Container a decoration. The color moves into the BoxDecoration:

dart

body: Center(
  child: Container(
    width: 220,
    height: 120,
    alignment: Alignment.center,
    decoration: BoxDecoration(
      color: Colors.teal,
      borderRadius: BorderRadius.circular(20),
    ),
    child: const Text('borderRadius: 20'),
  ),
),

A teal box with rounded corners in the center — BoxDecoration with borderRadius

BorderRadius.circular(20) rounds all four corners with a 20-pixel radius. Use BorderRadius.only(topLeft: …) to round only some of them.

5. Borders

Border.all draws a line around the box. A large radius on a short box makes a "pill" shape:

dart

body: Center(
  child: Container(
    padding: const EdgeInsets.symmetric(horizontal: 24, vertical: 12),
    decoration: BoxDecoration(
      border: Border.all(color: Colors.deepPurple, width: 2),
      borderRadius: BorderRadius.circular(30),
    ),
    child: const Text('Outlined label'),
  ),
),

A pill-shaped purple outline around the words Outlined label — Border.all with a 30-pixel radius

There is no color here, so the inside stays transparent and only the border shows.

6. Shadows

boxShadow takes a list of BoxShadows — you can stack several:

dart

body: Center(
  child: Container(
    width: 220,
    height: 120,
    alignment: Alignment.center,
    decoration: BoxDecoration(
      color: Colors.white,
      borderRadius: BorderRadius.circular(16),
      boxShadow: const [
        BoxShadow(
          color: Colors.black26,
          blurRadius: 12,
          offset: Offset(0, 6),
        ),
      ],
    ),
    child: const Text('A card with a shadow'),
  ),
),

A white card with rounded corners and a soft shadow below it — BoxShadow

color — usually a transparent black. Colors.black26 is black at about 26 % opacity.
blurRadius — how soft the edge is. 0 is a hard shadow.
offset — how far the shadow moves: Offset(0, 6) is 6 pixels down, like light from above.

7. Gradients

A gradient replaces the flat color with a smooth blend:

dart

body: Center(
  child: Container(
    width: 260,
    height: 140,
    decoration: BoxDecoration(
      gradient: const LinearGradient(
        colors: [Colors.indigo, Colors.pink],
        begin: Alignment.topLeft,
        end: Alignment.bottomRight,
      ),
      borderRadius: BorderRadius.circular(16),
    ),
  ),
),

A rounded rectangle blending from indigo at the top-left to pink at the bottom-right — LinearGradient

begin and end use the same Alignment values you already know. Give colors three or more entries and the gradient passes through each of them.

8. Circles

shape: BoxShape.circle turns the box into a circle — perfect for avatars and badges. Make width and height equal:

dart

body: Center(
  child: Container(
    width: 120,
    height: 120,
    alignment: Alignment.center,
    decoration: const BoxDecoration(
      color: Colors.orange,
      shape: BoxShape.circle,
    ),
    child: const Text('Z'),
  ),
),

An orange circle in the center with the letter Z — BoxShape.circle

A circle cannot have a borderRadius — the shape already decides the corners.

9. `TextStyle`

Text has a style parameter that takes a TextStyle:

dart

body: const Padding(
  padding: EdgeInsets.all(24),
  child: Text(
    'Sara Khan',
    style: TextStyle(
      fontSize: 32,
      fontWeight: FontWeight.bold,
      color: Colors.indigo,
      letterSpacing: 1.5,
    ),
  ),
),

Sara Khan in large, bold, indigo letters with wide spacing — TextStyle

Property	Example	Meaning
`fontSize`	`32`	height of the text in logical pixels (default 14)
`fontWeight`	`FontWeight.bold`, `FontWeight.w600`	thickness, from `w100` (thin) to `w900` (black)
`color`	`Colors.indigo`	text color
`letterSpacing`	`1.5`	extra space between letters
`fontStyle`	`FontStyle.italic`	italic text
`height`	`1.5`	line height, as a multiple of the font size

10. Long Text: `textAlign`, `maxLines`, `overflow`

These three belong to Text itself, not to the TextStyle:

dart

body: const Padding(
  padding: EdgeInsets.all(24),
  child: Text(
    'Flutter draws every pixel itself. That is why the same app looks '
    'the same on Android, iOS and the web. This long paragraph is limited '
    'to two lines.',
    textAlign: TextAlign.center,
    maxLines: 2,
    overflow: TextOverflow.ellipsis,
    style: TextStyle(
      fontSize: 18,
      fontStyle: FontStyle.italic,
      height: 1.5,
    ),
  ),
),

Two centered italic lines ending in an ellipsis — maxLines: 2 with an ellipsis

Two Dart strings written next to each other are joined into one — a neat way to split a long sentence across lines of code.

11. Colors

Colors.indigo and friends are ready-made, but a designer will give you hex codes such as #1565C0. Write them as Color(0xFF1565C0): 0x starts a hexadecimal number, FF means fully opaque, and the last six digits are the red, green and blue values.

dart

body: Container(
  margin: const EdgeInsets.all(24),
  padding: const EdgeInsets.all(24),
  decoration: BoxDecoration(
    color: const Color(0xFF1565C0).withValues(alpha: 0.15),
    border: Border.all(color: const Color(0xFF1565C0)),
    borderRadius: BorderRadius.circular(12),
  ),
  child: const Text(
    'Color(0xFF1565C0) — and the same color at 15% opacity',
    style: TextStyle(color: Color(0xFF1565C0)),
  ),
),

A pale blue box with a dark blue border and dark blue text — Color(0xFF1565C0) and withValues(alpha: 0.15)

withValues(alpha: 0.15) returns the same color at 15 % opacity — 0 is invisible, 1 is solid. It is a method call, so it cannot be const.

12. A Real-World Example

Zayan's bank card again — this time the way a real app draws it:

dart

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(
      debugShowCheckedModeBanner: false,
      theme: ThemeData(colorSchemeSeed: Colors.indigo),
      home: const CardScreen(),
    );
  }
}

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

  @override
  Widget build(BuildContext context) {
    String owner = 'Zayan';
    double balance = 25000;

    return Scaffold(
      appBar: AppBar(title: const Text('Bank Card')),
      body: Center(
        child: Container(
          width: 320,
          height: 190,
          padding: const EdgeInsets.all(24),
          alignment: Alignment.bottomLeft,
          decoration: BoxDecoration(
            gradient: const LinearGradient(
              colors: [Color(0xFF1A237E), Color(0xFF3949AB)],
              begin: Alignment.topLeft,
              end: Alignment.bottomRight,
            ),
            borderRadius: BorderRadius.circular(20),
            boxShadow: const [
              BoxShadow(
                color: Colors.black38,
                blurRadius: 16,
                offset: Offset(0, 8),
              ),
            ],
          ),
          child: Text(
            '$owner\nRs. $balance',
            style: const TextStyle(
              color: Colors.white,
              fontSize: 22,
              fontWeight: FontWeight.w600,
              height: 1.4,
            ),
          ),
        ),
      ),
    );
  }
}

A dark indigo gradient card with rounded corners and a shadow, Zayan and Rs. 25000.0 in white — Zayan's bank card

\n inside the string starts a new line, so one Text shows both lines. In Lecture 004 we will put separate widgets on top of each other with Column instead.

Code Examples

Example 1 — A Square With Centered Text

dart

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(
      debugShowCheckedModeBanner: false,
      theme: ThemeData(colorSchemeSeed: Colors.indigo),
      home: const HomeScreen(),
    );
  }
}

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

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: const Text('Example 1')),
      body: Center(
        child: Container(
          width: 160,
          height: 160,
          color: Colors.purple,
          alignment: Alignment.center,
          child: const Text('Centered', style: TextStyle(color: Colors.white)),
        ),
      ),
    );
  }
}

A purple square with white Centered text — Example 1

Example 2 — Margin and Padding Together

With no width, the Container fills the width — minus its margin.

dart

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(
      debugShowCheckedModeBanner: false,
      theme: ThemeData(colorSchemeSeed: Colors.indigo),
      home: const HomeScreen(),
    );
  }
}

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

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: const Text('Example 2')),
      body: Container(
        margin: const EdgeInsets.symmetric(horizontal: 16, vertical: 32),
        padding: const EdgeInsets.all(16),
        color: Colors.amber.shade200,
        child: const Text('16 inside, 16 from the sides, 32 from the top.'),
      ),
    );
  }
}

A pale amber strip near the top with a 16-pixel margin at the sides — Example 2

Example 3 — A Status Chip

dart

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(
      debugShowCheckedModeBanner: false,
      theme: ThemeData(colorSchemeSeed: Colors.indigo),
      home: const HomeScreen(),
    );
  }
}

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

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: const Text('Example 3')),
      body: Center(
        child: Container(
          padding: const EdgeInsets.symmetric(horizontal: 14, vertical: 6),
          decoration: BoxDecoration(
            color: Colors.green.shade50,
            border: Border.all(color: Colors.green),
            borderRadius: BorderRadius.circular(20),
          ),
          child: const Text(
            'In stock',
            style: TextStyle(color: Colors.green, fontWeight: FontWeight.w600),
          ),
        ),
      ),
    );
  }
}

A small green pill with the text In stock — Example 3

Example 4 — Student Report Card

dart

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(
      debugShowCheckedModeBanner: false,
      theme: ThemeData(colorSchemeSeed: Colors.blue),
      home: const ReportScreen(),
    );
  }
}

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

  @override
  Widget build(BuildContext context) {
    String name = 'Ali';
    int total = 240;
    double percentage = total / 300 * 100;

    return Scaffold(
      appBar: AppBar(title: const Text('Student Report')),
      body: Center(
        child: Container(
          width: 280,
          padding: const EdgeInsets.all(24),
          decoration: BoxDecoration(
            color: Colors.white,
            borderRadius: BorderRadius.circular(16),
            boxShadow: const [
              BoxShadow(
                color: Colors.black12,
                blurRadius: 10,
                offset: Offset(0, 4),
              ),
            ],
          ),
          child: Text(
            '$name\n$total / 300 · $percentage%',
            textAlign: TextAlign.center,
            style: const TextStyle(fontSize: 20, height: 1.5),
          ),
        ),
      ),
    );
  }
}

A white card with a soft shadow showing Ali and 240 / 300 · 80.0% — Example 4

Example 5 — Sale Price Tag

~/ is integer division from the Dart course: 2000 ~/ 2 is 1000.

dart

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(
      debugShowCheckedModeBanner: false,
      theme: ThemeData(colorSchemeSeed: Colors.pink),
      home: const ShopScreen(),
    );
  }
}

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

  @override
  Widget build(BuildContext context) {
    int price = 2000;
    int salePrice = price ~/ 2;

    return Scaffold(
      appBar: AppBar(title: const Text('Sale')),
      body: Center(
        child: Container(
          padding: const EdgeInsets.symmetric(horizontal: 32, vertical: 20),
          decoration: BoxDecoration(
            gradient: const LinearGradient(
              colors: [Colors.pink, Colors.orange],
            ),
            borderRadius: BorderRadius.circular(12),
          ),
          child: Text(
            'SALE  Rs. $salePrice',
            style: const TextStyle(
              color: Colors.white,
              fontSize: 26,
              fontWeight: FontWeight.w900,
              letterSpacing: 2,
            ),
          ),
        ),
      ),
    );
  }
}

A pink-to-orange tag reading SALE Rs. 1000 in heavy white letters — Example 5

Example 6 — A Progress Ring

A circle with only a border becomes a ring.

dart

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(
      debugShowCheckedModeBanner: false,
      theme: ThemeData(colorSchemeSeed: Colors.indigo),
      home: const HomeScreen(),
    );
  }
}

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

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: const Text('Example 6')),
      body: Center(
        child: Container(
          width: 200,
          height: 200,
          alignment: Alignment.center,
          decoration: BoxDecoration(
            shape: BoxShape.circle,
            border: Border.all(color: Colors.teal, width: 6),
          ),
          child: const Text(
            '75%',
            style: TextStyle(fontSize: 44, fontWeight: FontWeight.bold),
          ),
        ),
      ),
    );
  }
}

A teal ring with 75% in large bold text inside it — Example 6

Common Beginner Mistakes

1. Giving a Container both color and decoration

dart

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(
      debugShowCheckedModeBanner: false,
      theme: ThemeData(colorSchemeSeed: Colors.indigo),
      home: const HomeScreen(),
    );
  }
}

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

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: const Text('Oops')),
      body: Center(
        child: Container(
          width: 200,
          height: 100,
          color: Colors.teal,
          decoration: BoxDecoration(borderRadius: BorderRadius.circular(16)),
        ),
      ),
    );
  }
}

A dark red screen full of yellow error text — The red error screen in debug mode

output

══╡ EXCEPTION CAUGHT BY WIDGETS LIBRARY ╞════════════════════════
The following assertion was thrown building HomeScreen(dirty):
Cannot provide both a color and a decoration.
The color argument is just a shorthand for "decoration:
BoxDecoration(color: color)".
To use both a color and other decoration properties, set the
color in the BoxDecoration instead.
'package:flutter/src/widgets/container.dart':
Failed assertion: line 277 pos 10: 'color == null || decoration
== null'

This one is not caught by the editor — the app starts and shows a red error screen. When you use a decoration, move the color inside it: BoxDecoration(color: Colors.teal, …).

2. A hex color without the alpha part

dart

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(
      debugShowCheckedModeBanner: false,
      theme: ThemeData(colorSchemeSeed: Colors.indigo),
      home: const HomeScreen(),
    );
  }
}

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

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: const Text('Invisible')),
      body: Center(
        child: Container(
          width: 200,
          height: 100,
          color: const Color(0x002196f3),
          child: const Text('Where is my blue?'),
        ),
      ),
    );
  }
}

An empty screen with only the text Where is my blue? — The box is there — fully transparent

0x2196F3 has only six digits, so the alpha is 00: fully transparent. No error, just nothing to see. Always write eight digits: Color(0xFF2196F3).

3. A number as borderRadius

dart

import 'package:flutter/material.dart';

void main() {
  runApp(
    MaterialApp(
      home: Scaffold(
        body: Container(
          decoration: BoxDecoration(color: Colors.teal, borderRadius: 16),
        ),
      ),
    ),
  );
}

output

error • The argument type 'int' can't be assigned to the parameter type 'BorderRadiusGeometry?'.  • lib/main.dart:8:71 • argument_type_not_assignable

Write BorderRadius.circular(16).

4. A string as fontWeight

dart

import 'package:flutter/material.dart';

void main() {
  runApp(
    const MaterialApp(
      home: Scaffold(
        body: Text('Ali', style: TextStyle(fontWeight: 'bold')),
      ),
    ),
  );
}

output

error • A value of type 'String' can't be assigned to a parameter of type 'FontWeight?' in a const constructor. Try using a subtype, or removing the keyword 'const' • lib/main.dart:7:44 • const_constructor_param_type_mismatch
error • The argument type 'String' can't be assigned to the parameter type 'FontWeight?'.  • lib/main.dart:7:56 • argument_type_not_assignable

Use the constants: FontWeight.bold or FontWeight.w700.

5. Putting style values on Text directly

dart

import 'package:flutter/material.dart';

void main() {
  runApp(
    const MaterialApp(
      home: Scaffold(
        body: Text('Ali', fontSize: 24),
      ),
    ),
  );
}

output

error • The named parameter 'fontSize' isn't defined. Try correcting the name to an existing named parameter's name, or defining a named parameter with the name 'fontSize' • lib/main.dart:7:27 • undefined_named_parameter

Size, weight and color go inside style: TextStyle(...). Only layout options such as textAlign and maxLines belong to Text itself.

Best Practices

Use Padding, SizedBox or Align when you need only one job done; use Container when you need several.
Keep shadows subtle: a light color (Colors.black12–black26), a blur of 8–16 and a small downward offset.
Reuse the same corner radius (for example 12 or 16) across a whole app.
Always write colors with eight hex digits: Color(0xFF……).
Use maxLines and TextOverflow.ellipsis for text that could be long — names, titles, addresses.

Mini Challenge

Build a temperature badge. Store celsius = 30. In the center of the screen draw a 180 × 180 circle with a gradient from Colors.orange (top) to Colors.red (bottom) and a soft shadow, and show 30°C inside it in 40-pixel, bold, white text.

Try it yourself before opening the solution.

Show solution

dart

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(
      debugShowCheckedModeBanner: false,
      theme: ThemeData(colorSchemeSeed: Colors.deepOrange),
      home: const WeatherScreen(),
    );
  }
}

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

  @override
  Widget build(BuildContext context) {
    int celsius = 30;

    return Scaffold(
      appBar: AppBar(title: const Text('Weather')),
      body: Center(
        child: Container(
          width: 180,
          height: 180,
          alignment: Alignment.center,
          decoration: const BoxDecoration(
            shape: BoxShape.circle,
            gradient: LinearGradient(
              colors: [Colors.orange, Colors.red],
              begin: Alignment.topCenter,
              end: Alignment.bottomCenter,
            ),
            boxShadow: [
              BoxShadow(
                color: Colors.black26,
                blurRadius: 12,
                offset: Offset(0, 6),
              ),
            ],
          ),
          child: Text(
            '$celsius°C',
            style: const TextStyle(
              color: Colors.white,
              fontSize: 40,
              fontWeight: FontWeight.bold,
            ),
          ),
        ),
      ),
    );
  }
}

An orange-to-red circle with a shadow and 30°C in large white text — Mini challenge solution

How it works

Equal width and height plus BoxShape.circle make the circle.
begin: Alignment.topCenter and end: Alignment.bottomCenter run the gradient top to bottom.
alignment: Alignment.center centers the text inside the circle.
The whole BoxDecoration uses only fixed values, so it can be const.

Practice Questions

Beginner

Show a purple 200 × 200 Container in the center of the screen.
Show an amber Container with a margin of 32, a padding of 16 and the text Margin 32, padding 16.
Make a 240 × 100 teal box with a corner radius of 20 and the white text Hello, Sara centered inside.

Application

Draw an empty 200 × 100 box with only a red border, 3 pixels thick.
Draw an 80 × 80 indigo circle with a white S (32 pixels) in the middle — Sara's avatar.
Show Ali in 28-pixel, bold, blue text with a letter spacing of 2.
Make a SALE 50% tag: a pink-to-orange gradient, a radius of 12, a shadow, and bold white 24-pixel text.

Challenge

Ali has 5000 and deposits 1500. Build a 300-wide card with a teal-to-green diagonal gradient, a radius of 20 and a shadow, showing Ali and Rs. 6500 on two lines in bold white 24-pixel text. Calculate the new balance inside the string.

Practice Answers

Question 1 — Solution

dart

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(
      debugShowCheckedModeBanner: false,
      theme: ThemeData(colorSchemeSeed: Colors.indigo),
      home: const HomeScreen(),
    );
  }
}

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

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: const Text('Question 1')),
      body: Center(
        child: Container(width: 200, height: 200, color: Colors.purple),
      ),
    );
  }
}

A purple square in the center — Question 1

Question 2 — Solution

dart

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(
      debugShowCheckedModeBanner: false,
      theme: ThemeData(colorSchemeSeed: Colors.indigo),
      home: const HomeScreen(),
    );
  }
}

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

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: const Text('Question 2')),
      body: Container(
        margin: const EdgeInsets.all(32),
        padding: const EdgeInsets.all(16),
        color: Colors.amber,
        child: const Text('Margin 32, padding 16'),
      ),
    );
  }
}

An amber strip inset 32 pixels with text inside — Question 2

Question 3 — Solution

dart

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(
      debugShowCheckedModeBanner: false,
      theme: ThemeData(colorSchemeSeed: Colors.indigo),
      home: const HomeScreen(),
    );
  }
}

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

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: const Text('Question 3')),
      body: Center(
        child: Container(
          width: 240,
          height: 100,
          alignment: Alignment.center,
          decoration: BoxDecoration(
            color: Colors.teal,
            borderRadius: BorderRadius.circular(20),
          ),
          child: const Text(
            'Hello, Sara',
            style: TextStyle(color: Colors.white),
          ),
        ),
      ),
    );
  }
}

A rounded teal box with Hello, Sara in white — Question 3

Question 4 — Solution

dart

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(
      debugShowCheckedModeBanner: false,
      theme: ThemeData(colorSchemeSeed: Colors.indigo),
      home: const HomeScreen(),
    );
  }
}

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

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: const Text('Question 4')),
      body: Center(
        child: Container(
          width: 200,
          height: 100,
          decoration: BoxDecoration(
            border: Border.all(color: Colors.red, width: 3),
          ),
        ),
      ),
    );
  }
}

Question 5 — Solution

dart

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(
      debugShowCheckedModeBanner: false,
      theme: ThemeData(colorSchemeSeed: Colors.indigo),
      home: const HomeScreen(),
    );
  }
}

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

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: const Text('Question 5')),
      body: Center(
        child: Container(
          width: 80,
          height: 80,
          alignment: Alignment.center,
          decoration: const BoxDecoration(
            color: Colors.indigo,
            shape: BoxShape.circle,
          ),
          child: const Text(
            'S',
            style: TextStyle(color: Colors.white, fontSize: 32),
          ),
        ),
      ),
    );
  }
}

An indigo circle with a white S — Question 5

Question 6 — Solution

dart

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(
      debugShowCheckedModeBanner: false,
      theme: ThemeData(colorSchemeSeed: Colors.indigo),
      home: const HomeScreen(),
    );
  }
}

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

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: const Text('Question 6')),
      body: const Center(
        child: Text(
          'Ali',
          style: TextStyle(
            fontSize: 28,
            fontWeight: FontWeight.bold,
            color: Colors.blue,
            letterSpacing: 2,
          ),
        ),
      ),
    );
  }
}

Ali in bold blue spaced letters — Question 6

Question 7 — Solution

dart

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(
      debugShowCheckedModeBanner: false,
      theme: ThemeData(colorSchemeSeed: Colors.indigo),
      home: const HomeScreen(),
    );
  }
}

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

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: const Text('Question 7')),
      body: Center(
        child: Container(
          padding: const EdgeInsets.all(20),
          decoration: BoxDecoration(
            gradient: const LinearGradient(
              colors: [Colors.pink, Colors.orange],
            ),
            borderRadius: BorderRadius.circular(12),
            boxShadow: const [
              BoxShadow(
                color: Colors.black26,
                blurRadius: 8,
                offset: Offset(0, 4),
              ),
            ],
          ),
          child: const Text(
            'SALE 50%',
            style: TextStyle(
              color: Colors.white,
              fontSize: 24,
              fontWeight: FontWeight.bold,
            ),
          ),
        ),
      ),
    );
  }
}

A pink-to-orange SALE 50% tag with a shadow — Question 7

Question 8 — Solution

${balance + deposit} — curly braces let you put a whole expression inside a string.

dart

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(
      debugShowCheckedModeBanner: false,
      theme: ThemeData(colorSchemeSeed: Colors.teal),
      home: const BalanceScreen(),
    );
  }
}

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

  @override
  Widget build(BuildContext context) {
    String owner = 'Ali';
    int balance = 5000;
    int deposit = 1500;

    return Scaffold(
      appBar: AppBar(title: const Text('Question 8')),
      body: Center(
        child: Container(
          width: 300,
          padding: const EdgeInsets.all(24),
          margin: const EdgeInsets.all(16),
          decoration: BoxDecoration(
            gradient: const LinearGradient(
              colors: [Colors.teal, Colors.green],
              begin: Alignment.topLeft,
              end: Alignment.bottomRight,
            ),
            borderRadius: BorderRadius.circular(20),
            boxShadow: const [
              BoxShadow(
                color: Colors.black26,
                blurRadius: 12,
                offset: Offset(0, 6),
              ),
            ],
          ),
          child: Text(
            '$owner\nRs. ${balance + deposit}',
            style: const TextStyle(
              color: Colors.white,
              fontSize: 24,
              fontWeight: FontWeight.bold,
              height: 1.4,
            ),
          ),
        ),
      ),
    );
  }
}

A teal-to-green card with Ali and Rs. 6500 in white — Question 8

Quick Revision

Name four things a single Container can do.
Which is painted with the box color: padding or margin?
Where does the color go when a Container has a decoration?
Which class makes rounded corners?
What do blurRadius and offset control in a BoxShadow?
How do you draw a circle with a Container?
Which TextStyle property makes text thicker?
Why is Color(0x2196F3) invisible?

Key Takeaways

Container combines size, color, padding, margin and alignment in one widget.
padding is inside the box; margin is outside it.
BoxDecoration adds borderRadius, border, boxShadow, gradient and shape.
color and decoration cannot both be set — put the color in the decoration.
TextStyle styles text: fontSize, fontWeight, color, letterSpacing, fontStyle, height.
Colors are Color(0xAARRGGBB); withValues(alpha: …) makes them transparent.

What's Next?

Lecture 004 — Row & Column. Every screen so far showed one thing. Next we put widgets side by side with Row and on top of each other with Column, control how they share the space with Expanded and Spacer, and meet Flutter's most famous error: the overflow stripes.

← Lecture 002 — Single-Child Layout Widgets · Course Index · Lecture 004 — Row & Column →

#Lecture 003 — Container & Styling

#Prerequisites

#Connection With Previous Lectures

#Learning Objectives

#1. Container — One Widget, Many Jobs

#2. padding vs margin

#3. alignment Inside a Container

#4. BoxDecoration — Rounded Corners

#5. Borders

#6. Shadows

#7. Gradients

#8. Circles

#9. TextStyle

#10. Long Text: textAlign, maxLines, overflow

#11. Colors

#12. A Real-World Example

#Code Examples

#Example 1 — A Square With Centered Text

#Example 2 — Margin and Padding Together

#Example 3 — A Status Chip

#Example 4 — Student Report Card

#Example 5 — Sale Price Tag

#Example 6 — A Progress Ring

#Common Beginner Mistakes

#Best Practices

#Mini Challenge

#Practice Questions

#Practice Answers

#Question 1 — Solution

#Question 2 — Solution

#Question 3 — Solution

#Question 4 — Solution

#Question 5 — Solution

#Question 6 — Solution

#Question 7 — Solution

#Question 8 — Solution

#Quick Revision

#Key Takeaways

#What's Next?

Lecture 003 — Container & Styling

Prerequisites

Connection With Previous Lectures

Learning Objectives

1. `Container` — One Widget, Many Jobs

2. `padding` vs `margin`

3. `alignment` Inside a `Container`

4. `BoxDecoration` — Rounded Corners

5. Borders

6. Shadows

7. Gradients

8. Circles

9. `TextStyle`

10. Long Text: `textAlign`, `maxLines`, `overflow`

11. Colors

12. A Real-World Example

Code Examples

Example 1 — A Square With Centered Text

Example 2 — Margin and Padding Together

Example 3 — A Status Chip

Example 4 — Student Report Card

Example 5 — Sale Price Tag

Example 6 — A Progress Ring

Common Beginner Mistakes

Best Practices

Mini Challenge

Practice Questions

Practice Answers

Question 1 — Solution

Question 2 — Solution

Question 3 — Solution

Question 4 — Solution

Question 5 — Solution

Question 6 — Solution

Question 7 — Solution

Question 8 — Solution

Quick Revision

Key Takeaways

What's Next?