Flutter

Flutter Flexible Widget Example with Row

In this post, you will learn about how to use Flexible Widget to ensure equal spacing for children of Row. 

Flexible is a widget that controls how a child of a RowColumn, or Flex flexes. In this post, we will see how to use a Flexible widget to control the width of the children’s widget contained in the Row widget. Look at each of the rows in the app below consisting of 4 letters of the English Alphabet.

In case we don’t use a Flexible widget, we may have to assign the width of each of the containers (represented using commented cell width in the code below. However, using a Flexible widget, there is no need for the cell width of each Container represented using a Container widget. As the width of each of the container widgets is the same, one may not be required to use flex property. Alternatively, one could use flex:1 as well. You could get to see the full code in the earlier post, Flutter Row Concepts with Code Example.

Row(
          children: List.generate(alphabets[6].length, (index) {
            return Flexible(
              child: Container(
                  height: cellheight,
                 //width: cellwidth
                  alignment: cellalignment,
                  decoration: const BoxDecoration(
                      color:  Color(0xFFFFEE58),
                      border: Border(
                        right: BorderSide(width: 1.0, color: Color(0xFFFF000000)),
                        bottom: BorderSide(width: 1.0, color: Color(0xFFFF000000)),
                      )),
                  child: Text(
                    alphabets[6][index],
                    textScaleFactor: tsFactor,
                  )),
            );
          }),
        ),

More Flexible Widget Example with Row Widget

For the row that looks like the following, the code will look such as the following. Make a note of how flex: 2 for third container widget consisting of C as Text Widget. The first two Flexible widgets has the value of flex property as 1.

FFig 2. Row consisting of 3 Containers
Row(children: [
      Flexible(
        flex: 1,
        child: Container(
            height: 100,
            alignment: Alignment.center,
            decoration: const BoxDecoration(
                color: Color(0xFFFFEE58),
                border: Border(
                  right: BorderSide(
                      width: 1.0, color: Color(0xFFFF000000)),
                  bottom: BorderSide(
                      width: 1.0, color: Color(0xFFFF000000)),
                )),
            child: Text('A', textScaleFactor: 3.0)),
      ),
      Flexible(
        flex: 1,
        child: Container(
            height: 100,
            alignment: Alignment.center,
            decoration: const BoxDecoration(
                color: Color(0xFFFFEE58),
                border: Border(
                  right: BorderSide(
                      width: 1.0, color: Color(0xFFFF000000)),
                  bottom: BorderSide(
                      width: 1.0, color: Color(0xFFFF000000)),
                )),
            child: Text('B', textScaleFactor: 3.0)),
      ),
      Flexible(
        flex: 2,
        child: Container(
            height: 100,
            alignment: Alignment.center,
            decoration: const BoxDecoration(
                color: Color(0xFFFFEE58),
                border: Border(
                  right: BorderSide(
                      width: 1.0, color: Color(0xFFFF000000)),
                  bottom: BorderSide(
                      width: 1.0, color: Color(0xFFFF000000)),
                )),
            child: Text('C', textScaleFactor: 3.0)),
      ),
    ]);

The entire code of the app would look like the following:

void main() {
  runApp(MyApp());
}

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
        title: 'Learn English',
        home: Scaffold(
          appBar: AppBar(
            title: Text('Toddler\s English'),
          ),
          body: Center(
            child: AlphabetWidget(),
          ),
        ));
  }
}

class AlphabetWidget extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Row(children: [
      Flexible(
        flex: 1,
        child: Container(
            height: 100,
            alignment: Alignment.center,
            decoration: const BoxDecoration(
                color: Color(0xFFFFEE58),
                border: Border(
                  right: BorderSide(
                      width: 1.0, color: Color(0xFFFF000000)),
                  bottom: BorderSide(
                      width: 1.0, color: Color(0xFFFF000000)),
                )),
            child: Text('A', textScaleFactor: 3.0)),
      ),
      Flexible(
        flex: 1,
        child: Container(
            height: 100,
            alignment: Alignment.center,
            decoration: const BoxDecoration(
                color: Color(0xFFFFEE58),
                border: Border(
                  right: BorderSide(
                      width: 1.0, color: Color(0xFFFF000000)),
                  bottom: BorderSide(
                      width: 1.0, color: Color(0xFFFF000000)),
                )),
            child: Text('B', textScaleFactor: 3.0)),
      ),
      Flexible(
        flex: 2,
        child: Container(
            height: 100,
            alignment: Alignment.center,
            decoration: const BoxDecoration(
                color: Color(0xFFFFEE58),
                border: Border(
                  right: BorderSide(
                      width: 1.0, color: Color(0xFFFF000000)),
                  bottom: BorderSide(
                      width: 1.0, color: Color(0xFFFF000000)),
                )),
            child: Text('C', textScaleFactor: 3.0)),
      ),
    ]);
  }
}

When deployed on iOS phone simulator, the above code would get displayed as the following:

Ajitesh Kumar

I have been recently working in the area of Data analytics including Data Science and Machine Learning / Deep Learning. I am also passionate about different technologies including programming languages such as Java/JEE, Javascript, Python, R, Julia, etc, and technologies such as Blockchain, mobile computing, cloud-native technologies, application security, cloud computing platforms, big data, etc. I would love to connect with you on Linkedin. Check out my latest book titled as First Principles Thinking: Building winning products using first principles thinking.

Share
Published by
Ajitesh Kumar
Tags: flutter

Recent Posts

Agentic Reasoning Design Patterns in AI: Examples

In recent years, artificial intelligence (AI) has evolved to include more sophisticated and capable agents,…

3 weeks ago

LLMs for Adaptive Learning & Personalized Education

Adaptive learning helps in tailoring learning experiences to fit the unique needs of each student.…

4 weeks ago

Sparse Mixture of Experts (MoE) Models: Examples

With the increasing demand for more powerful machine learning (ML) systems that can handle diverse…

1 month ago

Anxiety Disorder Detection & Machine Learning Techniques

Anxiety is a common mental health condition that affects millions of people around the world.…

1 month ago

Confounder Features & Machine Learning Models: Examples

In machine learning, confounder features or variables can significantly affect the accuracy and validity of…

1 month ago

Credit Card Fraud Detection & Machine Learning

Last updated: 26 Sept, 2024 Credit card fraud detection is a major concern for credit…

1 month ago