How to expand Container widget 'Vertically' in Row widget

Question

I want the Container to take the height of the Card.

I have tried many Widgets but failed to fulfill my order,

I tried to use Flexible as a parent for the container but to no avail.

I have this code:

                    Card(
                        color: Color(0xff8c6ac9),
                        shape: RoundedRectangleBorder(
                            borderRadius: BorderRadius.circular(10)),
                        child: Row(
                          children: <Widget>[
                            Expanded(
                              child: Column(
                                children: <Widget>[
                                  Padding(
                                    padding: const EdgeInsets.all(8.0),
                                    child: Text('Text2'),
                                  ),
                                  Padding(
                                    padding: const EdgeInsets.all(8.0),
                                    child: Text('Text3'),
                                  ),
                                  Padding(
                                    padding: const EdgeInsets.all(8.0),
                                    child: Text('Text4'),
                                  ),
                                  Padding(
                                    padding: const EdgeInsets.all(8.0),
                                    child: Text('Text5'),
                                  ),
                                  Padding(
                                    padding: const EdgeInsets.all(8.0),
                                    child: Text('Text6'),
                                  ),
                                ],
                              ),
                            ),
                            Container(
                              decoration: BoxDecoration(
                                  color: Color(0xff9778ce),
                                  borderRadius: BorderRadius.only(
                                      bottomRight: Radius.circular(10),
                                      topRight: Radius.circular(10))),
                              child: Column(
                                children: <Widget>[
                                  Icon(
                                    Icons.delete,
                                    color: Colors.white,
                                  ),
                                  Icon(
                                    Icons.edit,
                                    color: Colors.white,
                                  ),
                                ],
                                mainAxisAlignment:
                                    MainAxisAlignment.spaceAround,
                              ),
                              width: 40,
                            ),
                          ],
                        ),
                      )

The output of this code is:

And what I want is:

Edit: The Card widget it is an item in ListView widget.

Thanks...

Answer 1

You can use the IntrinsicHeight widget since your Card doesn't have a predefined height.

A widget that sizes its child to the child's intrinsic height. This class is useful, for example, when unlimited height is available and you would like a child that would otherwise attempt to expand infinitely to instead size itself to a more reasonable height.

Note: This class is relatively expensive, because it adds a speculative layout pass before the final layout phase. Avoid using it where possible. In the worst case, this widget can result in a layout that is O(N²) in the depth of the tree.

ListView.builder(
        itemBuilder: (context, index) {
          // wrapped the card widget with an intrinsic height
          return IntrinsicHeight(
            child: Card(
              color: Color(0xff8c6ac9),
              shape: RoundedRectangleBorder(
                  borderRadius: BorderRadius.circular(10)),
              child: Row(
                children: <Widget>[
                  Expanded(
                    child: Column(
                      children: <Widget>[
                        Padding(
                          padding: const EdgeInsets.all(8.0),
                          child: Text('Text2'),
                        ),
                        Padding(
                          padding: const EdgeInsets.all(8.0),
                          child: Text('Text3'),
                        ),
                        Padding(
                          padding: const EdgeInsets.all(8.0),
                          child: Text('Text4'),
                        ),
                        Padding(
                          padding: const EdgeInsets.all(8.0),
                          child: Text('Text5'),
                        ),
                        Padding(
                          padding: const EdgeInsets.all(8.0),
                          child: Text('Text6'),
                        ),
                      ],
                    ),
                  ),
                  Container(
                    decoration: BoxDecoration(
                        color: Color(0xff9778ce),
                        borderRadius: BorderRadius.only(
                            bottomRight: Radius.circular(10),
                            topRight: Radius.circular(10))),
                    child: Column(
                      mainAxisSize: MainAxisSize.max,
                      children: <Widget>[
                        Icon(
                          Icons.delete,
                          color: Colors.white,
                        ),
                        Icon(
                          Icons.edit,
                          color: Colors.white,
                        ),
                      ],
                      mainAxisAlignment: MainAxisAlignment.spaceAround,
                    ),
                    width: 40,
                  ),
                ],
              ),
            ),
          );
        },
      ),

OUTPUT:

Answer 2

You're almost there... wrap your row with an IntrinsicHeight widget

Card(
  color: Color(0xff8c6ac9),
  shape: RoundedRectangleBorder(
      borderRadius: BorderRadius.circular(10)),
  child: IntrinsicHeight(
    child: Row(
      crossAxisAlignment: CrossAxisAlignment.stretch,
      children: <Widget>[
        Expanded(
          child: Column(
            children: <Widget>[
              Padding(
                padding: const EdgeInsets.all(8.0),
                child: Text('Text2'),
              ),
              Padding(
                padding: const EdgeInsets.all(8.0),
                child: Text('Text3'),
              ),
              Padding(
                padding: const EdgeInsets.all(8.0),
                child: Text('Text4'),
              ),
              Padding(
                padding: const EdgeInsets.all(8.0),
                child: Text('Text5'),
              ),
              Padding(
                padding: const EdgeInsets.all(8.0),
                child: Text('Text6'),
              ),
            ],
          ),
        ),
        Container(
          decoration: BoxDecoration(
              color: Color(0xff9778ce),
              borderRadius: BorderRadius.only(
                  bottomRight: Radius.circular(10),
                  topRight: Radius.circular(10))),
          child: Column(
            children: <Widget>[
              Icon(
                Icons.delete,
                color: Colors.white,
              ),
              Icon(
                Icons.edit,
                color: Colors.white,
              ),
            ],
            mainAxisAlignment:
            MainAxisAlignment.spaceAround,
          ),
          width: 40,
        ),
      ],
    ),
  ),
),