Height adjustment of an Image in a row inside a Card

user_14020539 0
Viewed 469

my idea is to create a card widget that has an image on the left and corresponding text data on the right side. The picture should always take the full height and 1/3 of the width (I used expanded with flex to get this. Not sure if this is the best way). The image should be placed in a stack in order to stack further widgets.

My problem is that I am not able to place the image in the stack without specifying a fixed height. I tried Positoned.fill but this did not work for me.

This is my code so far for the card:

Widget build(BuildContext context) {
    return Card(
      elevation: 5,
      shape: RoundedRectangleBorder(
        borderRadius: BorderRadius.circular(15.0),
      ),
      child: Row(
        children: [
          Expanded(
            child: Stack(
              children: [
                Container(
                    // child: Positioned.fill(
                    //   child: ClipRRect(
                    //     borderRadius: BorderRadius.circular(15.0),
                    //     child: Image(
                    //       image: AssetImage("assets/eyes.jpg"),
                    //       fit: BoxFit.cover,
                    //     ),
                    //   ),
                    // ),
                    ),
              ],
            ),
          ),
          Expanded(
            flex: 2,
            child: Container(
              color: Colors.grey,
              child: Padding(
                padding:
                    const EdgeInsets.symmetric(horizontal: 15.0, vertical: 10),
                child: Column(
                  crossAxisAlignment: CrossAxisAlignment.start,
                  children: [
                    Text("This is a test"),
                    SizedBox(height: 10),
                    Text("This is a test test"),
                    SizedBox(height: 10),
                    Text("This is a test test test"),
                    SizedBox(height: 10),
                    Text("This is a test test"),
                    SizedBox(height: 10),
                    Text("This is a test"),
                  ],
                ),
              ),
            ),
          ),
        ],
      ),
    );
  }

Here is a picture of the current state. The image should take up the entire white area on the left side of the card.

enter image description here

flutter-layout dart flutter
1 Answers

Instead of adding a child image widget inside your container, you can add a decoration image to the container itself. Here's how you do it:

Container(
      decoration: BoxDecoration(
        image: DecorationImage(
          fit: BoxFit.cover,
          image: AssetImage("url"),
        ),
      ),
    ),
user_150890120
Related