Flutter Flexible Widget Example with Row

July 11, 2020 by Ajitesh Kumar · Leave a comment
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 Row, Column, 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.

Row Widgets consisting of COntainer Widget to display Text Widget

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.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
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.

Flexible Widget example with Row
FFig 2. Row consisting of 3 Containers
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
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:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
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:

Flutter app with Flexible Widget example with Row
Ajitesh Kumar
Latest posts by Ajitesh Kumar (see all)

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.
Posted in Flutter. Tagged with .