CODEWITHSUNDEEP
flutterflutter-layout
frozzyk
frozzyk

Reputation: 475

Constraint widget by other widget

I'm trying to make a widget like this:

But the problem I've faced with is that if title is too long it pushes the icon (triangle) out of the bounds of card.

What I want to have is the icon should always be at top right corner of the card and title to take all the available space between image and triangle, but not more. If title is too long it should just take new line.

But it should be like this:

Card(
      clipBehavior: Clip.antiAlias,
      shape: RoundedRectangleBorder(borderRadius: BorderRadius.zero),
      child: Container(
        height: 130,
        child: Row(
          children: <Widget>[
            Image(
              image: NetworkImage(product.primaryImage.url),
              height: 130,
              width: 60,
            ),
            SizedBox(width: 8),
            Column(
              crossAxisAlignment: CrossAxisAlignment.start,
              mainAxisSize: MainAxisSize.min,
              children: <Widget>[
                Row(
                  children: <Widget>[
                    Text(
                      product.name,
                      maxLines: 2,
                      style: TextStyle(fontWeight: FontWeight.bold),
                    ),
                    SizedBox(height: 8),
                    IconButton(
                      padding: EdgeInsets.zero,
                      iconSize: 24,
                      icon: Icon(Icons.remove_circle_outline),
                      onPressed: () => onRemove(product),
                    )
                  ],
                ),
                SizedBox(height: 8),
                Text("$quantityInCart x \$$price"),
              ],
            ),
          ],
        ),
      ),
    );
  }

Wrapping title in Expanded doesn't work because parent Row gives it infinite width constraint.

Upvotes: 0

Views: 526

Answers (1)

J. S.
J. S.

Reputation: 9635

You need to use two Expanded like this:

Row(
  crossAxisAlignment: CrossAxisAlignment.start,
  children: <Widget>[
    Container(
      height: 300,
      width: 100,
      color: Colors.blue,
    ),
    Expanded(
      child: Column(
        children: <Widget>[
          Row(
            children: <Widget>[
              Expanded(
                child: Text('This is quite a loooooo ooooooooo ooooooo ooooong title',
                  softWrap: true,
                  maxLines: 2,
                ),
              ),
              Icon(Icons.add_alert)
            ],
          ),
          Text('This is a normal description')
        ],
      ),
    )
  ],
)

Upvotes: 2

Related Questions