The Expanded widget in Flutter is used within a Row, Column, or Flex widget to give a child widget the flexibility to expand and occupy the available space along the main axis (horizontal in a Row and vertical in a Column). It allows the child widget to take up as much space as possible within its parent.
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('Expanded Example'),
),
body: Column(
children: [
Container(
color: Colors.blue,
height: 100,
width: double.infinity, // Container takes full width of the screen
child: Center(
child: Text(
'Top Container',
style: TextStyle(color: Colors.white),
),
),
),
Expanded(
// Expanded widget fills available space
child: Container(
color: Colors.green,
child: Center(
child: Text(
'Expanded Container',
style: TextStyle(color: Colors.white),
),
),
),
),
Container(
color: Colors.blue,
height: 100,
width: double.infinity, // Container takes full width of the screen
child: Center(
child: Text(
'Bottom Container',
style: TextStyle(color: Colors.white),
),
),
),
],
),
),
);
}
}