Flutter 在 Row 小部件内包裹小部件

Question

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,
          ),
        ],
      ),
    );
  }

Answer 1

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'),
     ],
   ),
 ),
...

Answer 2

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,
                ),
            ],
        ),
    );
}

Answer 3

Use

Wrap(
   alignment : WrapAlignment.spaceBetween
)