Menu
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,
),
],
),
);
}
473
A Wrap lays out each child and attempts to place the child adjacent to the previous child in the main axis, given by direction, leaving spacing space in between. If there is not enough space to fit the child, Wrap creates a new run adjacent to the existing children in the cross axis.
In Flutter, the overlay lets you print visual elements on top of other widgets by inserting them into the overlay's stack. You insert a widget into the overlay using an OverlayEntry and you use Positioned and AnimatedPositioned to choose where the entry is positioned within the overlay.
Wrap widgets can support both Horizontal alignment and Vertical Alignment like Row and Column widgets in flutter. Using the Wrap widget we can adjust multiple widgets at once without disturbing each other. 1.
Wrap widgets automatically align the Widgets items one by one and if the Row is filled then it will move row content automatically to next line in flutter. Wrap widgets can support both Horizontal alignment and Vertical Alignment like Row and Column widgets in flutter.
To understand how Flutter places the children of a Row widget, you need to understand the layout algorithm. Layout each child a null or zero flex factor with unbounded horizontal constraints and the incoming vertical constraints.
The wrap widget is similar to Row or a Column widget with an added advantage that it can adjust its children according to the space available to it on the Screen. The default arrangement is horizontal (like a row) but you can make it vertical (like a column) as well by changing its direction property.
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'),
],
),
),
...
wrap your Wrap Widget with Expanded widget :
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),
Expanded(
child: 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,
),
],
),
);
}
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
