How to use the Flexible widget in Flutter
Flexible widgets in Flutter are powerful for creating responsive and flexible layouts. They allow us to allocate available space between parent and child widgets based on specific ratios or proportions. This makes creating adaptive UIs that adjust to different screen sizes and orientations easier. In this Answer, we'll walk through the steps of effectively using the Flexible widget.
Constructor and parameters
The Flexible widget provides a constructor with various parameters to customize its behavior and layout.
const Flexible({
Key? key,
int flex = 1,
FlexFit fit = FlexFit.loose,
required Widget child
})
Let's take a closer look at each parameter and its purpose:
key: An optional key to uniquely identify theFlexiblewidget.flex: A numeric value representing the flex factor to determine the relative amount of space the widget should occupy.fit: Defines how the widget should adjust its size within the available space.child: The required child widget that is placed within the flexible space.
Importing necessary libraries
Before using the Flexible widget, make sure to import the required libraries in our Dart file:
import 'package:flutter/material.dart';
Basic syntax
The Flexible widget is often used as a child within a Row, Column, or Flex widget. Here's the basic syntax of the Flexible widget:
Flexible(flex: <flexValue>,child: <childWidget>,)
Using flex Factors
Flex factors represent the proportional distribution of available space among child widgets. Higher flex values receive more space compared to lower ones. For example:
Row(children: [Flexible(flex: 2,child: Container(color: Colors.blue),),Flexible(flex: 3,child: Container(color: Colors.green),),],)
After running the above code, we can see the following output:
Using the FlexFit Property
The FlexFit property within the Flexible widget controls how the child widget should behave within the allocated space. It has two possible values:
FlexFit.tight: The child widget should expand to fill the available space.FlexFit.loose: The child widget should only occupy the space it needs without expansion.
Row(children: [Flexible(fit: FlexFit.tight,child: Container(color: Colors.red),),Flexible(fit: FlexFit.loose,child: Container(color: Colors.yellow),),],)
After running the above code, we can see the following output:
Code example
We get the following output by putting together the code explained above.
import 'package:flutter/material.dart';
import 'dart:math' as math;
void main() {
runApp(MyApp());
}
class MyApp extends StatelessWidget {
@override
Widget build(BuildContext context) {
return MaterialApp(
title: 'Transform Widget Example',
home: TransformExample(),
);
}
}
class TransformExample extends StatelessWidget {
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(title: Text('Educative Scaling Answet')),
body: Column(
children: [
Flexible(
flex: 2,
child: Container(color: Colors.orange),
),
Flexible(
flex: 3,
child: Row(
children: [
Flexible(
flex: 2,
child: Container(color: Colors.purple),
),
Flexible(
flex: 3,
child: Container(color: Colors.pink),
),
],
),
),
],
),
);
}
}
Conclusion
Flexible widgets are fundamental to creating dynamic and responsive layouts in Flutter. We can design UIs that adapt gracefully to different screen sizes and orientations by utilizing flex values and the property. Experiment with different combinations of Flexible widgets to achieve the desired layout for our Flutter app.
Additional resources
You can learn about other Flutter widgets from the following resources:
Free Resources
