Flutter Wrap widget inside Row widget

user_3177054 0
Viewed 4158

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,
          ),
        ],
      ),
    );
  }
flutter-layout dart flutter
3 Answers

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

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

Use

Wrap(
   alignment : WrapAlignment.spaceBetween
)
user_157049440
Related