Expanded in Flutter

18-Sep-2024

Learn how to create flexible layouts using Expanded to control widget space in Flutter

Expanded widgets are used to expand the children of a row, column, or flex to fill the available space along a particular axis.
This is often used to distribute remaining storage space to the children of a Flex container

Here's a simple example of using a Expanded in Flutter:

File open lib->main.dart file −



import 'package:flutter/material.dart';

void main() {
runApp(
MaterialApp(
home: Scaffold(
appBar: AppBar(
title: Text('Expanded Example'),
),
body: MyApp(),
),
)
);
}

class MyApp extends StatelessWidget {

@override
Widget build(BuildContext context) {
return Column(
children: [
Container(
color: Colors.red,
height: 50,
alignment: Alignment.center,
child: Center(
child: Text("Micro"),
),
),
Expanded(
child:
Container(
alignment: Alignment.center,
color: Colors.blue,
child: Text("Expanded Text"),
)
),

Container(
color: Colors.yellow,
height: 50,
child: Center(
child: Text("Tutorial"),
),
),
],
);
}
}




Open Device Manager, run the emulator, and then run the application. Next, check the working output and check the output you declared in your code.


Output:


Comments