Logo

K-Learn

Flutter Flexible Widget

< Previous Next >

The Flexible widget in Flutter is used to create a flexible space in a Row or Column widget. It allows the widget to expand or shrink to fill the available space.

Here's an example of how to use the Flexible widget:

@override
  Widget build(BuildContext context) {
    return Scaffold(
        appBar: AppBar(
          title: const Text('Expanded Column Sample'),
        ),
        body: Center(
          child: Container(
              child: Padding(
            padding: const EdgeInsets.all(14.0),
            child: Column(
              children: [
                Row(
                  children: [
                    Flexible(
                      flex: 1,
                      fit: FlexFit.tight,
                      child: Container(
                        height: 175,
                        decoration: BoxDecoration(
                          borderRadius: BorderRadius.circular(10),
                          color: Colors.red,
                        ), //BoxDecoration
                      ), //Container
                    ), //Flexible
                    SizedBox(
                      width: 20,
                    ), //SizedBox
                    Flexible(
                      flex: 1,
                      fit: FlexFit.loose,
                      child: Container(
                          height: 175,
                          decoration: BoxDecoration(
                            borderRadius: BorderRadius.circular(10),
                            color: Colors.red,
                          ) //BoxDecoration
                          ), //Container
                    ) //Flexible
                  ], //[]
                  mainAxisAlignment: MainAxisAlignment.center,
                ), //Row
                Flexible(
                  flex: 1,
                  fit: FlexFit.loose,
                  child: Container(
                    width: 380,
                    height: 200,
                    decoration: BoxDecoration(
                        borderRadius: BorderRadius.circular(10),
                        color: Colors.blue), //BoxDecoration
                  ), //Container
                ), //Flexible
                Row(
                  children: [
                    Flexible(
                      flex: 2,
                      fit: FlexFit.tight,
                      child: Container(
                        width: 180,
                        height: 300,
                        decoration: BoxDecoration(
                          borderRadius: BorderRadius.circular(10),
                          color: Colors.cyan,
                        ), //BoxDecoration
                      ), //Container
                    ), //Flexible
                    SizedBox(
                      width: 20,
                    ), //SizedBox
                    Flexible(
                        flex: 2,
                        fit: FlexFit.tight,
                        child: Container(
                            width: 180,
                            height: 300,
                            decoration: BoxDecoration(
                              borderRadius: BorderRadius.circular(10),
                              color: Colors.cyan,
                            ) //BoxDecoration
                            ) //Container,
                        ) //Flexible
                  ], //[]
                  mainAxisAlignment: MainAxisAlignment.center,
                ), //Row
              ], //[]
              mainAxisAlignment: MainAxisAlignment.spaceBetween,
              crossAxisAlignment: CrossAxisAlignment.center,
            ), //Column
          ) //Padding
              ), //Container
        ) //Center
        );
  }

Some common properties of the Flexible widget:

child: The child widget to display inside the flexible space.

flex: The flex value of the flexible space. This determines how much space the flexible space should occupy relative to the other flexible spaces in the same Row or Column widget.

fit: The fit of the flexible space. This determines whether the child widget should be resized to fit the available space or not. The default value is FlexFit.loose, which allows the child widget to resize to fit the available space


< Previous Next >