Expanded and Flexible widgets
"Hello World, I'm Vinit Mepani, a coding virtuoso driven by passion, fueled by curiosity, and always poised to conquer challenges. Picture me as a digital explorer, navigating through the vast realms of code, forever in pursuit of innovation.
In the enchanting kingdom of algorithms and syntax, I wield my keyboard as a magical wand, casting spells of logic and crafting solutions to digital enigmas. With each line of code, I embark on an odyssey of learning, embracing the ever-evolving landscape of technology.
Eager to decode the secrets of the programming universe, I see challenges not as obstacles but as thrilling quests, opportunities to push boundaries and uncover new dimensions in the realm of possibilities.
In this symphony of zeros and ones, I am Vinit Mepani, a coder by passion, an adventurer in the digital wilderness, and a seeker of knowledge in the enchanting world of code. Join me on this quest, and let's create digital wonders together!"
In Flutter, both Expanded and Flexible are widgets that help in creating flexible and responsive layouts. They are commonly used within Row, Column, and Flex widgets to control how space is allocated to their children.
1. Expanded Widget:
The Expanded widget is used to make a child of a Row, Column, or Flex widget expand to fill the available space along the main axis. It takes a single child and ensures that it occupies all the remaining space within the parent widget. The Expanded widget must be a direct child of a Flex widget.
Example of using Expanded in a Column:
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 Widget Example'),
),
body: Column(
children: [
Container(
color: Colors.blue,
height: 100.0,
child: Center(child: Text('Header')),
),
Expanded(
child: Container(
color: Colors.green,
child: Center(child: Text('Expanded Content')),
),
),
Container(
color: Colors.blue,
height: 50.0,
child: Center(child: Text('Footer')),
),
],
),
),
);
}
}
2. Flexible Widget:
The Flexible widget is more versatile than Expanded as it allows you to specify a flex factor, determining how space should be allocated among multiple Flexible widgets within a parent Row, Column, or Flex.
Example of using Flexible in a Row:
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('Flexible Widget Example'),
),
body: Row(
children: [
Flexible(
flex: 2,
child: Container(
color: Colors.blue,
height: 100.0,
child: Center(child: Text('Left')),
),
),
Flexible(
flex: 3,
child: Container(
color: Colors.green,
child: Center(child: Text('Right')),
),
),
],
),
),
);
}
}
In this example, the Flexible widgets are used within a Row. The second container (Right) will take up 3 times more horizontal space than the first container (Left) due to the specified flex factors.
Both Expanded and Flexible widgets are crucial for creating dynamic and responsive layouts in Flutter applications. They allow for efficient utilization of available space based on the specified criteria.
