Search code examples
flutterdartflutter-layout

Flutter Wrap widget inside Row widget


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. enter image description here

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

Solution

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