CODEWITHSUNDEEP
flutterwidget
Christopher
Christopher

Reputation: 10279

Flutter make container height match_parent

I have to build the following widget, which will be placed inside a ListView as parent element.

Desgin

I have a problem with the green rectangle on the left side. Basically I have structured my widget like that:

-> Card
   -> Stack
      -> Container for the "right" side (Tire ID, icon, temperature, pressure info)           
      -> Container for green rectangle,
      -> Container with boxed decoration for green circle
      -> Text with "5LO"

But this is how it looks like right now:

no green rectangle

Basically the Container for the rectangle on the left side is not stretching it's height to full height of the parent stack. How can I do this?

Code:

class TireListItem extends StatelessWidget {
  static const _circleSize = 36.0;

  const TireListItem({Key key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return Card(
        margin: EdgeInsets.zero,
        key: Key('cardTire'),
        child: Stack(
          alignment: AlignmentDirectional.centerStart,
          children: [
            _TireContentInfoWidget(),
            _buildTireIndicationRectangle(), // This should build the rectangle on the left side.
            _buildTirePositionCircle(),
            _buildTirePositionTextView(context)
          ],
        ));
  }

  Widget _buildTireIndicationRectangle() {
    return Container(
      width: _marginLeft,
      decoration: BoxDecoration(
          color: AppColor.green,
          shape: BoxShape.rectangle,
          borderRadius: BorderRadiusDirectional.horizontal(
              start: Radius.circular(Dimens.cardCornerRadius))),
    );
  }

  Container _buildTirePositionCircle() {
    return Container(
      width: _circleSize,
      height: _circleSize,
      decoration: BoxDecoration(color: AppColor.green, shape: BoxShape.circle),
    );
  }

  Container _buildTirePositionTextView(BuildContext context) {
    return Container(
        margin: EdgeInsets.only(left: Dimens.spacingXs),
        child: Text(
          "2RO",
          style:
              Theme.of(context).textTheme.button.apply(color: AppColor.white),
        ));
  }
}

If I set a fixed height to the rectangle container, it would basically work out, but I want that the text information area is defining the full height of the widget:

 Widget _buildTireIndicationRectangle() {
    return Container(
      width: _marginLeft,
      height: 150,
      decoration: BoxDecoration(
          color: AppColor.green,
          shape: BoxShape.rectangle,
          borderRadius: BorderRadiusDirectional.horizontal(
              start: Radius.circular(Dimens.cardCornerRadius))),
    );
  }

Upvotes: 2

Views: 2133

Answers (1)

BlackBear
BlackBear

Reputation: 66

You can solve this problem by using IntrinsicHeight class. If you wrapping Stack with InstrinctHeight, Stack's height is fixed by parent's height. Please look IntrinsicHeight document.

https://api.flutter.dev/flutter/widgets/IntrinsicHeight-class.html

@override
  Widget build(BuildContext context) {
    return Card(
        margin: EdgeInsets.zero,
        key: Key('cardTire'),
        child: IntrinsicHeight(child: Stack(
          alignment: AlignmentDirectional.centerStart,
          children: [
            _TireContentInfoWidget(),
            _buildTireIndicationRectangle(), // This should build the rectangle on the left side.
            _buildTirePositionCircle(),
            _buildTirePositionTextView(context)
          ],
        ),
      ),
    );
  }

Upvotes: 4

Related Questions