CODEWITHSUNDEEP
flutterdartflutter-layout
DNS
DNS

Reputation: 929

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

Upvotes: 10

Views: 11349

Answers (4)

Yuriy N.
Yuriy N.

Reputation: 6087

I was experimenting with both Flexible and Expanded. They both work, i.e. long Row wrapped.

But in case Row is short they work differently - Expanded takes all available space, but Flexible is not.

Flexible on the left, Expanded on the right:

enter image description here

Upvotes: 1

DJafari
DJafari

Reputation: 13545

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

Upvotes: 7

RaSha
RaSha

Reputation: 1482

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

Upvotes: 14

Ali Rasouli
Ali Rasouli

Reputation: 111

Use

Wrap(
   alignment : WrapAlignment.spaceBetween
)

Upvotes: 0

Related Questions