Expanded and Flexible in Flutter - Cheat Sheet & Quick Revision

Recall & Review

beginner

What does the Expanded widget do in Flutter?

The Expanded widget tells its child to fill the available space in the main axis of a Row, Column, or Flex. It expands the child to use all leftover space.

intermediate

How does the Flexible widget differ from Expanded?

Flexible lets its child be smaller than the available space if it wants, while Expanded forces the child to fill all the available space. Flexible gives more control over child's size.

beginner

What is the role of the flex property in Expanded and Flexible?

The flex property is a number that tells how much space this widget should take relative to its siblings. For example, flex: 2 means twice as much space as flex: 1.

intermediate

Can Flexible widget shrink its child smaller than its intrinsic size?

Yes, Flexible can shrink its child smaller than its intrinsic size if the child allows it. This helps when you want flexible but not forced expansion.

beginner

Why use Expanded or Flexible inside a Row or Column?

They help control how children share space. Without them, children take only the space they need. With them, you can make children grow or shrink to fill or share leftover space nicely.

What happens if you wrap a widget with Expanded inside a Row?

A The widget fills all remaining horizontal space.

B The widget shrinks to its minimum size.

C The widget disappears.

D The widget fills all vertical space.

Expanded makes the child fill all leftover space along the main axis, which is horizontal in a Row.

Which widget allows its child to be smaller than the available space if it wants?

A Flexible

B Expanded

C Container

D SizedBox

Flexible lets the child be smaller or bigger, depending on child's size and constraints.

If two Expanded widgets have flex values 1 and 3, how is space divided?

A 3/4 for first, 1/4 for second

B Equal space for both

C 1/4 for first, 3/4 for second

D Only the first gets space

The space is divided in ratio 1:3, so first gets 1/4 and second gets 3/4 of leftover space.

Which widget forces its child to fill all available space?

A Flexible

B Expanded

C Padding

D Align

Expanded forces the child to fill all available space along the main axis.

What is the main axis in a Column?

A Horizontal

B Diagonal

C None

D Vertical

The main axis of a Column is vertical, so Expanded expands vertically.

Explain the difference between Expanded and Flexible widgets in Flutter.

Think about how much space the child widget takes inside a Row or Column.

Describe a real-life scenario where you would use Expanded inside a Row.

Imagine a toolbar with a search box that should grow to fill space.