CODEWITHSUNDEEP
flutterflutter-layout
Oo_oO
Oo_oO

Reputation: 138

Expanded and Flexible work not fine toghter in one Row

You Can look this demo in DartPad

Pseudo Code:

 Column(
              children: [
                Row(children: [
                  fleWid(1),
                  expWid(1),
                ]),
                Row(children: [
                  expWid(1),
                  expWid(1),
                ]),
                Row(children: [
                  fleWid(1),
                  fleWid(1),
                ]),

Screen: enter image description here

Repeat：You Can look this demo in DartPad

The problemm is the Row1,why Expanded cannot expand the full rest space ?

Upvotes: 1

Views: 293

Answers (2)

Dung Ngo
Dung Ngo

Reputation: 1452

Expanded will take the whole available space, while Flexible only take needed space. In your case, inside Flexible is a Text widget with a default fontSize of 14, so Flexible, will only wrap around Text.

Using a Flexible widget gives a child of a Row, Column, or Flex the flexibility to expand to fill the available space in the main axis (e.g., horizontally for a Row or vertically for a Column), but, unlike Expanded, Flexible does not require the child to fill the available space.

You can check the docs

Upvotes: 0

Pieter van Loon
Pieter van Loon

Reputation: 5648

Both the expanded and the flexible have a flex of 1 so they both get to layout in 1 / (1+1) so half the width.

However, the flexible has a flexfit that allows it to be smaller than the maximum of half the width.

If you want the expanded to use the full width you should remove the flexible around the smaller part

Upvotes: 1

Related Questions