Expanded and Flexible are important Flutter layout widgets used with Row, Column, and Flex. They help distribute available space between children and make layouts more adaptive.
The main difference is that Expanded forces its child to fill the space allocated to it, while Flexible allows its child to use the allocated space without requiring it to fill all of it. Flutter's official documentation defines Expanded as using a tight fit and Flexible as using a loose fit by default. Read the official Expanded documentation and read the official Flexible documentation.
These widgets are useful when building responsive UI layouts such as dashboards, product cards, login screens, navigation areas, profile sections, and mobile application interfaces. Explore JustAcademy's Flutter Training Course.
Expanded is a Flutter widget that makes its child expand to fill the available space along the main axis of a Row, Column, or Flex.
For a Row, the main axis is horizontal. For a Column, the main axis is vertical.
Expanded(
child: Widget(),
)Row(
children: [
Expanded(
child: Container(
color: Colors.blue,
height: 100,
),
),
],
)The Container expands to occupy the available horizontal space.
Flexible allows a child of Row, Column, or Flex to participate in flexible space allocation without forcing the child to fill all of the allocated space.
Flexible(
child: Widget(),
)Row(
children: [
Flexible(
child: Text(
"This is flexible content.",
),
),
],
)The child can use available space but does not have to fill all of the space assigned to it.
Flutter layouts need to work with different screen sizes. Hard-coded widths and heights can cause overflow or poor spacing.
For example, this layout can become problematic on a smaller screen:
Row(
children: [
Container(
width: 250,
child: Text("Long Product Name"),
),
Container(
width: 250,
child: Text("₹999"),
),
],
)Instead of depending entirely on fixed widths, Expanded and Flexible can divide and adapt to the available space.
Expanded is commonly used to divide horizontal space between multiple children.
Row(
children: [
Expanded(
child: Container(
height: 100,
color: Colors.red,
),
),
Expanded(
child: Container(
height: 100,
color: Colors.blue,
),
),
],
)The two Expanded widgets share the available horizontal space.
Expanded can also divide vertical space inside a Column.
Column(
children: [
Expanded(
child: Container(
color: Colors.red,
),
),
Expanded(
child: Container(
color: Colors.blue,
),
),
],
)The two containers divide the available vertical space.
Expanded has a flex property. It determines how much of the remaining available space each flexible child receives relative to the others.
Expanded(
flex: 1,
child: Widget(),
)Row(
children: [
Expanded(
flex: 1,
child: Container(
height: 100,
color: Colors.red,
),
),
Expanded(
flex: 2,
child: Container(
height: 100,
color: Colors.blue,
),
),
],
)The second child receives twice the flexible share of the first child.
Suppose a Row has three Expanded children:
Row(
children: [
Expanded(
flex: 1,
child: Container(color: Colors.red),
),
Expanded(
flex: 2,
child: Container(color: Colors.green),
),
Expanded(
flex: 1,
child: Container(color: Colors.blue),
),
],
)The total flex is:
1 + 2 + 1 = 4The available flexible space is divided into four proportional parts:
Therefore, the second child receives approximately twice the space of each of the other children.
Internally, Expanded is equivalent to using a Flexible widget with FlexFit.tight. This means the child is required to fill the space allocated to it.
Expanded(
flex: 1,
child: Container(),
)Conceptually, this behaves like:
Flexible(
flex: 1,
fit: FlexFit.tight,
child: Container(),
)This tight behavior is the main reason Expanded fills its allocated space.
Flexible uses FlexFit.loose by default.
Flexible(
flex: 1,
fit: FlexFit.loose,
child: Text("Flexible Text"),
)With loose fit, the child can be smaller than the maximum space allocated to it.
| Feature | Expanded | Flexible |
|---|---|---|
| Purpose | Forces child to fill allocated space | Allows child to use available space without forcing full occupation |
| Default Fit | FlexFit.tight | FlexFit.loose |
| flex Property | Yes | Yes |
| Parent | Row, Column, or Flex | Row, Column, or Flex |
| Best For | Equal or proportional sections | Content that should remain flexible |
| Child Must Fill Allocation? | Yes | No |
Row(
children: [
Expanded(
child: Container(
height: 80,
color: Colors.blue,
child: Center(
child: Text("Left"),
),
),
),
Expanded(
child: Container(
height: 80,
color: Colors.green,
child: Center(
child: Text("Right"),
),
),
),
],
)Both sections receive an equal portion of the available width.
Row(
children: [
Flexible(
child: Container(
padding: EdgeInsets.all(16),
color: Colors.blue,
child: Text("Flexible Content"),
),
),
Icon(Icons.arrow_forward),
],
)The text area can adapt to the available width while the icon keeps its required size.
Expanded is frequently used when a Text widget needs to share space with another widget.
Row(
children: [
Expanded(
child: Text(
"This is a long product title that should adapt to the available screen width.",
),
),
SizedBox(width: 10),
Icon(Icons.shopping_cart),
],
)Without a flexible widget, long text combined with other fixed-width widgets can cause a Row overflow.
Row(
children: [
Flexible(
child: Text(
"This is a long description that should not force the Row beyond the available screen width.",
),
),
Icon(Icons.info),
],
)Flexible allows the text to adapt to the available width.
Expanded can be combined with SizedBox to create flexible sections with fixed spacing.
Row(
children: [
Expanded(
child: Container(
height: 100,
color: Colors.orange,
),
),
SizedBox(width: 16),
Expanded(
child: Container(
height: 100,
color: Colors.purple,
),
),
],
)Row(
children: [
Expanded(
child: Padding(
padding: EdgeInsets.all(10),
child: Container(
height: 100,
color: Colors.blue,
),
),
),
Expanded(
child: Padding(
padding: EdgeInsets.all(10),
child: Container(
height: 100,
color: Colors.green,
),
),
),
],
)Row(
children: [
Expanded(
child: Container(
height: 100,
color: Colors.red,
),
),
Expanded(
child: Container(
height: 100,
color: Colors.green,
),
),
Expanded(
child: Container(
height: 100,
color: Colors.blue,
),
),
],
)All three sections receive equal flexible space because each has the default flex value of 1.
Row(
children: [
Expanded(
flex: 1,
child: Container(
height: 100,
color: Colors.red,
),
),
Expanded(
flex: 3,
child: Container(
height: 100,
color: Colors.green,
),
),
Expanded(
flex: 2,
child: Container(
height: 100,
color: Colors.blue,
),
),
],
)The space is distributed in the ratio 1:3:2.
Row(
children: [
Flexible(
flex: 1,
child: Container(
padding: EdgeInsets.all(16),
child: Text("Small"),
),
),
Flexible(
flex: 2,
child: Container(
padding: EdgeInsets.all(16),
child: Text(
"This section has a larger flexible allocation.",
),
),
),
],
)Row(
children: [
Container(
width: 200,
child: Text("Fixed Width"),
),
Icon(Icons.arrow_forward),
],
)Row(
children: [
Expanded(
child: Text("Flexible Width"),
),
Icon(Icons.arrow_forward),
],
)The Expanded version adapts to the available space instead of always requiring a fixed width.
Card(
child: Padding(
padding: EdgeInsets.all(16),
child: Row(
children: [
Container(
width: 80,
height: 80,
color: Colors.grey.shade300,
child: Icon(Icons.image),
),
SizedBox(width: 16),
Expanded(
child: Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: [
Text(
"Flutter Course",
style: TextStyle(
fontSize: 18,
fontWeight: FontWeight.bold,
),
),
SizedBox(height: 6),
Text(
"Complete Flutter development course.",
),
SizedBox(height: 8),
Text(
"₹9,999",
style: TextStyle(
fontWeight: FontWeight.bold,
),
),
],
),
),
Icon(Icons.arrow_forward_ios),
],
),
),
)Here, Expanded allows the product information to use the space between the fixed image and trailing icon.
Column(
children: [
Expanded(
child: Row(
children: [
Expanded(
child: Card(
child: Center(
child: Text("Users"),
),
),
),
Expanded(
child: Card(
child: Center(
child: Text("Orders"),
),
),
),
],
),
),
Expanded(
child: Row(
children: [
Expanded(
child: Card(
child: Center(
child: Text("Revenue"),
),
),
),
Expanded(
child: Card(
child: Center(
child: Text("Pending"),
),
),
),
],
),
),
],
)This creates a flexible dashboard structure where both rows and their cards share available space.
Column(
children: [
Expanded(
child: Center(
child: Icon(
Icons.lock,
size: 80,
),
),
),
Padding(
padding: EdgeInsets.all(20),
child: Column(
children: [
TextField(
decoration: InputDecoration(
labelText: "Email",
border: OutlineInputBorder(),
),
),
SizedBox(height: 16),
TextField(
obscureText: true,
decoration: InputDecoration(
labelText: "Password",
border: OutlineInputBorder(),
),
),
SizedBox(height: 20),
SizedBox(
width: double.infinity,
child: ElevatedButton(
onPressed: () {},
child: Text("Login"),
),
),
],
),
),
],
)The Expanded area allows the top section to occupy remaining vertical space.
Row(
children: [
Icon(Icons.menu),
SizedBox(width: 12),
Expanded(
child: Text(
"My Application",
style: TextStyle(
fontSize: 20,
fontWeight: FontWeight.bold,
),
),
),
Icon(Icons.notifications),
],
)The title expands into the available space while the menu and notification icons retain their required sizes.
Row(
children: [
Icon(Icons.shopping_bag),
SizedBox(width: 10),
Flexible(
child: Text(
"Very Long Product Name That May Not Fit on Smaller Screens",
),
),
SizedBox(width: 10),
Text("₹1,999"),
],
)Flexible is useful when the text length is unpredictable and other widgets also need to retain their space.
Expanded controls how flexible children receive space, while MainAxisAlignment controls how remaining free space is distributed after flex allocation.
Row(
mainAxisAlignment: MainAxisAlignment.spaceBetween,
children: [
Expanded(
child: Text("Left Content"),
),
Expanded(
child: Text(
"Right Content",
textAlign: TextAlign.end,
),
),
],
)Spacer is another flexible layout widget. It creates empty space according to its flex value.
Row(
children: [
Text("Logo"),
Spacer(),
Icon(Icons.search),
Icon(Icons.person),
],
)This is useful when you want to push widgets apart without creating an additional Expanded child.
| Widget | Purpose |
|---|---|
| Expanded | Expands a child to fill allocated flexible space. |
| Flexible | Allows a child to use flexible space without requiring it to fill the allocation. |
| Spacer | Creates flexible empty space. |
Although Flexible uses loose fit by default, you can explicitly set its fit to FlexFit.tight.
Flexible(
flex: 1,
fit: FlexFit.tight,
child: Container(
color: Colors.blue,
),
)This makes Flexible behave similarly to Expanded for its child.
Flexible(
flex: 1,
fit: FlexFit.loose,
child: Container(
width: 100,
height: 100,
color: Colors.blue,
),
)The child can remain smaller than the maximum flexible space allocated to it.
| Property | FlexFit.tight | FlexFit.loose |
|---|---|---|
| Child behavior | Must fill allocated space | Can be smaller than allocated space |
| Used by | Expanded | Flexible by default |
| Best for | Full flexible sections | Content-driven flexible sections |
Expanded and Flexible are designed to be descendants of Row, Column, or Flex.
Row(
children: [
Expanded(
child: Container(),
),
],
)Container(
child: Expanded(
child: Text("Invalid Layout"),
),
)Expanded and Flexible should not be placed arbitrarily inside widgets that are not providing Flex layout information.
When a Column has a finite height, Expanded can be used to make one child occupy the remaining vertical space.
Column(
children: [
Text("Header"),
Expanded(
child: Container(
color: Colors.blue,
child: Center(
child: Text("Remaining Space"),
),
),
),
Text("Footer"),
],
)The middle Container receives the remaining vertical space after the Header and Footer are laid out.
Row(
children: [
Icon(Icons.menu),
Expanded(
child: Container(
margin: EdgeInsets.symmetric(horizontal: 10),
child: TextField(
decoration: InputDecoration(
hintText: "Search",
border: OutlineInputBorder(),
),
),
),
),
Icon(Icons.person),
],
)This is a common search-bar layout.
Expanded can be nested when the parent layout provides the appropriate finite constraints.
Column(
children: [
Expanded(
child: Row(
children: [
Expanded(
child: Container(
color: Colors.red,
),
),
Expanded(
child: Container(
color: Colors.blue,
),
),
],
),
),
],
)The outer Expanded allocates vertical space to the Row, while the inner Expanded widgets divide the Row's horizontal space.
Row(
children: [
CircleAvatar(
radius: 35,
child: Icon(Icons.person),
),
SizedBox(width: 16),
Expanded(
child: Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: [
Text(
"John Doe",
style: TextStyle(
fontSize: 18,
fontWeight: FontWeight.bold,
),
),
SizedBox(height: 5),
Flexible(
child: Text(
"Flutter Developer and Mobile Application Developer",
),
),
],
),
),
Icon(Icons.more_vert),
],
)Row(
children: [
Expanded(
flex: 2,
child: Image.network(
"https://picsum.photos/300",
height: 150,
fit: BoxFit.cover,
),
),
SizedBox(width: 16),
Flexible(
flex: 3,
child: Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: [
Text(
"Product",
style: TextStyle(
fontSize: 20,
fontWeight: FontWeight.bold,
),
),
SizedBox(height: 8),
Text(
"Product description that can adapt to available space.",
),
],
),
),
],
)Row(
children: [
Expanded(
child: ElevatedButton(
onPressed: () {},
child: Text("Cancel"),
),
),
SizedBox(width: 12),
Expanded(
child: ElevatedButton(
onPressed: () {},
child: Text("Save"),
),
),
],
)Both buttons receive equal width, while SizedBox creates a fixed gap between them.
Row(
children: [
Expanded(
child: Card(
child: Padding(
padding: EdgeInsets.all(16),
child: Column(
children: [
Icon(Icons.people),
SizedBox(height: 8),
Text("Users"),
Text("1,250"),
],
),
),
),
),
SizedBox(width: 12),
Expanded(
child: Card(
child: Padding(
padding: EdgeInsets.all(16),
child: Column(
children: [
Icon(Icons.shopping_cart),
SizedBox(height: 8),
Text("Orders"),
Text("540"),
],
),
),
),
),
],
)Expanded can be combined with responsive widgets to distribute available space.
LayoutBuilder(
builder: (context, constraints) {
if (constraints.maxWidth >= 600) {
return Row(
children: [
Expanded(
child: Container(
height: 200,
color: Colors.blue,
),
),
SizedBox(width: 20),
Expanded(
child: Container(
height: 200,
color: Colors.green,
),
),
],
);
}
return Column(
children: [
Container(
height: 150,
color: Colors.blue,
),
SizedBox(height: 20),
Container(
height: 150,
color: Colors.green,
),
],
);
},
)Care must be taken when using Expanded or Flexible inside scrolling widgets. A vertical scroll view can provide unbounded vertical space, which means there may be no finite remaining height for an Expanded or Flexible child to occupy.
For example, this pattern can cause a layout exception:
SingleChildScrollView(
child: Column(
children: [
Expanded(
child: Container(),
),
],
),
)When the content needs to scroll, determine whether the child really needs flexible space. Often, the correct solution is to remove Expanded or Flexible from the scrolling Column. Flutter's documentation specifically notes that Expanded and Flexible are generally not useful inside a SingleChildScrollView when the main-axis space is unbounded. Read the SingleChildScrollView documentation.
A common error occurs when Expanded is used in a Column that receives unbounded height.
For example:
ListView(
children: [
Column(
children: [
Expanded(
child: Text("Content"),
),
],
),
],
)The Column inside a vertical ListView does not receive a finite maximum height in the scrolling direction, so Expanded has no finite remaining height to fill.
A common solution is to remove Expanded when the content does not actually need to fill remaining height.
| Situation | Recommended Widget |
|---|---|
| Text should occupy all remaining width | Expanded |
| Text should adapt but may remain smaller | Flexible |
| Equal-width cards | Expanded |
| Variable-length content | Flexible |
| Two equally sized buttons | Expanded |
| Long title beside fixed icon | Expanded or Flexible depending on desired behavior |
Row(
children: [
Expanded(
child: Container(
color: Colors.blue,
child: Text("Expanded"),
),
),
Icon(Icons.star),
],
)The Expanded child fills the available flexible width.
Row(
children: [
Flexible(
child: Container(
color: Colors.blue,
child: Text("Flexible"),
),
),
Icon(Icons.star),
],
)The Flexible child can use the available space but does not have to fill all of its allocation.
Expanded must participate in a Flex layout such as Row, Column, or Flex.
Expanded needs a finite amount of available space along the main axis.
Fixed widths can cause overflow on smaller screens. Consider Expanded or Flexible when appropriate.
Flexible uses FlexFit.loose by default, so its child is allowed to be smaller than the allocated space.
Long text should be handled with appropriate flexible layout, maxLines, overflow behavior, or a different responsive structure.
Row, Column, and Flex use a flex layout system. In simplified terms, Flutter first lays out children without a non-zero flex factor, then distributes remaining main-axis space among children with flex factors according to their flex values. Flexible children are then laid out according to their fit. Finally, the framework positions children according to alignment properties.
For example:
Row(
children: [
Text("Fixed"),
Expanded(
flex: 2,
child: Container(),
),
Flexible(
flex: 1,
child: Container(),
),
],
)The non-flex child is considered first. The remaining space is then distributed between the flex children according to their flex values and fit.
Flex is the underlying one-dimensional layout concept used by Row and Column. Row is a horizontal Flex and Column is a vertical Flex.
Flex(
direction: Axis.horizontal,
children: [
Expanded(
child: Container(
color: Colors.blue,
),
),
Flexible(
child: Container(
color: Colors.green,
),
),
],
)For most common layouts, Row and Column are more readable because their direction is already known.
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(
appBar: AppBar(
title: const Text("Expanded Example"),
),
body: Padding(
padding: const EdgeInsets.all(16),
child: Column(
children: [
const Text(
"Dashboard",
style: TextStyle(
fontSize: 26,
fontWeight: FontWeight.bold,
),
),
const SizedBox(height: 20),
Expanded(
child: Row(
children: [
Expanded(
flex: 1,
child: Card(
child: Center(
child: Text("Users"),
),
),
),
const SizedBox(width: 12),
Expanded(
flex: 2,
child: Card(
child: Center(
child: Text("Orders"),
),
),
),
],
),
),
],
),
),
),
);
}
}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(
appBar: AppBar(
title: const Text("Flexible Example"),
),
body: Padding(
padding: const EdgeInsets.all(16),
child: Row(
children: [
const Icon(Icons.shopping_bag),
const SizedBox(width: 12),
Flexible(
child: Column(
crossAxisAlignment: CrossAxisAlignment.start,
mainAxisSize: MainAxisSize.min,
children: const [
Text(
"Flutter Development Course",
style: TextStyle(
fontSize: 18,
fontWeight: FontWeight.bold,
),
),
SizedBox(height: 6),
Text(
"Learn Flutter and Dart development with practical projects.",
),
],
),
),
const SizedBox(width: 12),
const Icon(Icons.arrow_forward_ios),
],
),
),
),
);
}
}| Concept | Key Point |
|---|---|
| Expanded | Forces the child to fill its allocated flexible space. |
| Flexible | Allows the child to use flexible space without forcing it to fill the allocation. |
| flex | Controls proportional space allocation. |
| FlexFit.tight | Child must fill allocated space. |
| FlexFit.loose | Child may be smaller than allocated space. |
| Row | Uses horizontal main axis. |
| Column | Uses vertical main axis. |
| Spacer | Creates flexible empty space. |
| SizedBox | Creates fixed spacing or dimensions. |
| Flexible Layout | Helps content adapt to available space. |
Create a Row containing three containers using Expanded so that all three have equal width.
Create three Expanded widgets with flex values 1, 2, and 3.
Create a product card containing an image, product information, price, and action icon. Use Expanded for the product information.
Create a Row containing an icon, long text, and another icon. Use Flexible so the text adapts to the available width.
Create a login screen where the top logo section expands to use remaining vertical space.
Create a dashboard with two rows of cards. Use Expanded to distribute the available space.
For structured Flutter learning and UI development topics, visit the JustAcademy Flutter Training Course.
To explore the available course demonstration option, visit JustAcademy Course Demo Registration.
For official Flutter documentation, see the Expanded API documentation and Flexible API documentation.
Expanded and Flexible are essential widgets for creating adaptable Flutter layouts. Both work with Row, Column, and Flex and use the flex property to participate in proportional space allocation.
The key difference is simple: Expanded forces its child to fill the space allocated to it, while Flexible allows its child to be smaller than that allocation. Expanded is commonly used for equal-width cards, buttons, dashboard sections, and areas that should occupy all remaining space. Flexible is especially useful for variable-length content such as text.
Understanding Expanded, Flexible, flex factors, FlexFit.tight, FlexFit.loose, and the constraints provided by Row and Column is essential for creating responsive and professional Flutter interfaces.
For additional Flutter training resources, visit JustAcademy's Flutter Training Course and register for a course demo.
