Episode 8: Mastering Expanded Widget in Flutter: A Complete Guide
Season 1: Exploring Common Widgets #flutterforbeginners
Understanding the Expanded Widget
The Expanded widget serves as a tool to build adaptable layouts in Flutter. It fills the surplus space in the Column, Row, or Flex widget. This widget comes with an attribute called 'flex' that you can modify to determine the space distribution among widgets compared to their sibling widgets.
Take a look at an example of Expanded in action. You'll notice that the Expanded widget lets us allocate space among widgets following a specified ratio, thereby facilitating more efficient and effective space management.
Using the Expanded Widget
To demonstrate the Expanded widget's utility, let's kick off with a straightforward example. After initializing a new Flutter project, we add an Expanded widget to our main.dart file.
import 'package:flutter/material.dart';
void main() {
runApp(MyApp());
}
class MyApp extends StatelessWidget {
@override
Widget build(BuildContext context) {
return MaterialApp(
home: Scaffold(
appBar: AppBar(
title: Text('Mastering Expanded in Flutter'),
),
body: Row(
children: <Widget>[
Expanded(
child: Container(
color: Colors.red,
),
),
Container(
width: 50,
color: Colors.green,
),
Expanded(
child: Container(
color: Colors.blue,
),
),
],
),
),
);
}
}
This code generates a Row with three widgets: two Expanded widgets (with containers as children) and a Container widget with a fixed width. The two Expanded widgets fill the residual space in the row, splitting it equally between them.
Understanding the Flex Factor
An essential property of the Expanded widget is 'flex.' The flex factor decides the space the Expanded widget should occupy relative to other Expanded widgets within the same Column, Row, or Flex. The flex factor's default value is 1.
Let's now tweak the flex factor of our Expanded widgets to see the resultant change:
Row(
children: <Widget>[
Expanded(
flex: 2,
child: Container(
color: Colors.red,
),
),
Container(
width: 50,
color: Colors.green,
),
Expanded(
flex: 1,
child: Container(
color: Colors.blue,
),
),
],
)
In this code, we've assigned a flex factor of 2 to the first Expanded widget, and a factor of 1 to the second. This implies that the first Expanded widget will occupy twice the space as the second.
Practical Usage of Expanded
The Expanded widget proves invaluable when you want a widget to fill up all the leftover space in a Column or Row, a key feature for creating responsive layouts compatible with any screen size.
Consider an example where we're using Expanded to ensure our content always consumes the entire screen height, regardless of the device size:
Column(
children: <Widget>[
Container(
height: 60,
color: Colors.red,
),
Expanded(
child: Container(
color: Colors.green,
),
),
Container(
height: 60,
color: Colors.blue,
),
],
)
In this code, we have a Column with three widgets. Two Container widgets, each with a fixed height of 60, are at the top and bottom, and an Expanded widget in the middle fills all the remaining space.
Conclusion
And that brings us to the end of our discussion on the Expanded widget in Flutter. As you can see, it's a potent tool for designing responsive layouts. By governing how widgets expand and shrink in relation to their siblings, you can ensure your apps appear great on all screen sizes.
Thank you for joining our tutorial on the Expanded widget. If this video has been of help to you, we'd appreciate a thumbs up and don't forget to subscribe for more Flutter-related content. Do drop a comment if you have any questions, and we'll be glad to assist you. Until next time!