What is a Flexible widget in Flutter?

• General

Flexible is a built-in widget in flutter which controls how a child flexes widgets. So, in this article, we will see what is a Flexible widget in Flutter is.

What is a Flexible widget in Flutter?

The Expanded widget in flutter is shorthand of Flexible with the default fit of FlexFit.tight. A Flexible widget plays a very important part in making a responsive app. This will make the app looks and feels the same across multiple device sizes. But if one wants just basic filling up of spaces by widgets, then you can use Expanded.

The constructor of Flexible Class:

const Flexible(
{Key key,
int flex: 1,
FlexFit fit: FlexFit.loose,
@required Widget child}
)

Properties of Flexible Widget:

• debugTypicalAncestorWidgetClass: This property takes Type as a parameter to set the ParentData for error messages.
• fit: This property takes the FlexFit value as a parameter. So, it decides how a Flexible child widget will fill the space available to it. A child widget can choose to take the maximum area with FlexFit.tight value or it can choose a minimum area with FlexFit.loose value. Or we can assign it FlexFit.values.
• flex: This property takes an integer as a parameter. It decides the size of the child widget along the main-axis (for Row it is horizontal and vertical for Column) with respect to other children’s widgets.

Example:

import 'package:flutter/material.dart';

void main() {
 runApp(MaterialApp(
  home: Scaffold(
   appBar: AppBar(
    title: const Text('BOSC Tech Labs'),
    backgroundColor: Colors.red[400],
    leading: IconButton(
     icon: const Icon(Icons.menu),
     onPressed: () {},
     tooltip: 'Menu',
    ) //IconButton
    ), //AppBar
  body: Center(
   child: Padding(
    padding: const EdgeInsets.all(14.0),
     child: Column(
      children: <Widget>[
       Flexible(
        flex: 1,
        fit: FlexFit.tight,
        child: Row(
        children: <Widget>[
         Flexible(
         flex: 1,
         fit: FlexFit.tight,
         child: Container(
          decoration: BoxDecoration(
           borderRadius: BorderRadius.circular(10),
           color: Colors.green,
         ), //BoxDecoration
        ), //Container
       ), //Flexible
       const SizedBox(
        width: 20,
       ), //SizedBox
       Flexible(
        flex: 1,
        fit: FlexFit.tight,
        child: Container(
         decoration: BoxDecoration(
         borderRadius: BorderRadius.circular(10),
         color: Colors.green,
        ) //BoxDecoration
          ), //Container
       ) //Flexible
      ], //<Widget>[]
      mainAxisAlignment: MainAxisAlignment.center,
      ), //Row
     ), //Flexible
     const SizedBox(
     height: 20,
      ), //SixedBox
       Flexible(
        flex: 1,
        fit: FlexFit.tight,
        child: Container(
         width: 380,
         height: 200,
         decoration: BoxDecoration(
          borderRadius: BorderRadius.circular(10),
          color: Colors.black), //BoxDecoration
         ), //Container
        ), //Flexible
        const SizedBox(
         height: 20,
        ), //SixedBox
        Flexible(
         flex: 2,
         fit: FlexFit.tight,
         child: Row(
          children: <Widget>[
           Flexible(
            flex: 2,
            fit: FlexFit.tight,
             child: Container(
             width: 180,
             height: 300,
             decoration: BoxDecoration(
              borderRadius: BorderRadius.circular(10),
              color: Colors.yellow,
             ), //BoxDecoration
            ), //Container
           ), //Flexible
           const SizedBox(
            width: 20,
           ), //SizedBox
           Flexible(
            flex: 2,
            fit: FlexFit.tight,
            child: Container(
            width: 180,
            height: 300,
            decoration: BoxDecoration(
             borderRadius: BorderRadius.circular(10),
             color: Colors.yellow,
            ) //BoxDecoration
            ), //Container
           ) //Flexible
           ], //<Widget>[]
           mainAxisAlignment: MainAxisAlignment.center,
         ), //Row
        ), //Flexible
       ], //<Widget>[]
       mainAxisAlignment: MainAxisAlignment.spaceBetween,
       crossAxisAlignment: CrossAxisAlignment.center,
      ), //Column
    ) //Padding
  //Container
 ) //Container
), //Scaffold

debugShowCheckedModeBanner: false,
)); //MaterialApp
}

Now, in this app, we have wrapped the top and bottom Row widgets with Flexible widgets with each having a flex value of 1. All the fit properties in this app are changes to FlexFit.tight to force child widgets to take all the space available to them. There is also an addition of two SizeBox widgets, one on the top of the blue Container and one below that.

Again taking a look at the app we can see that when screen size changes in the vertical direction the height of all the containers also change according to that, but when screen size changes in the horizontal direction, except the blue container width of all the containers changes also. This is due to the reason the blue Container is just a direct child of the Column widget which allows it to change direction in the only vertical direction. Though we can also make the blue Container responsive by rapping it with a Row widget, which will give it the ability to adjust its size in the horizontal direction as well when wrapped with Flexible.

Conclusion:

Thanks for being with us on a Flutter Journey!

So, in this article, we have seen what is a Flexible widget in Flutter. Also, feel free to comment and provide any other suggestions regarding Flutter.

Flutter Agency is our portal Platform dedicated to Flutter Technology and Flutter Developers. Also, the portal is full of cool resources from Flutter like Flutter Widget Guide, Flutter Projects, Code libs and etc.

Flutter Agency is one of the most popular online portals dedicated to Flutter Technology. Daily thousands of unique visitors come to this portal to enhance their knowledge of Flutter.

Written by Nirali Patel

Nirali Patel is a dedicated Flutter developer with over two years of experience, specializing in creating seamless mobile applications using Dart. With a passion for crafting user-centric solutions, Nirali combines technical proficiency with innovative thinking to push the boundaries of mobile app development.