I want to achieve this behavior. I have 4 items in a Row but I want two texts in the middle act like the yare in a Wrap widget and text2
moves to next line if text1
is long and fill all spaces.
Here is my code but it overflows instead of wrapping texts in two lines
Widget _buildItem(String name, String status) {
return Container(
padding: const EdgeInsets.all(Dimens.unitX2),
child: Row(
mainAxisAlignment: MainAxisAlignment.end,
children: <Widget>[
Container(
width: Dimens.unitX5,
height: Dimens.unitX5,
color: Colors.blue,
),
SizedBox(width: Dimens.unitX1),
Wrap(
crossAxisAlignment: WrapCrossAlignment.center,
alignment: WrapAlignment.spaceBetween,
spacing: Dimens.unitX1,
direction: Axis.horizontal,
children: [
Text(name),
Text(status),
],
),
SizedBox(width: Dimens.unitX1),
Container(
color: Colors.red,
width: Dimens.unitX5,
height: Dimens.unitX5,
),
],
),
);
}
Wrap the Wrap
widget in a Flexible
:
...
Flexible(
child: Wrap(
crossAxisAlignment: WrapCrossAlignment.center,
alignment: WrapAlignment.spaceBetween,
spacing: 30,
direction: Axis.horizontal,
children: [
Text('Text1'),
Text('Text2 is a long text'),
],
),
),
...