How can I make a card type layout for a pinterest type masonry layout that has a card that looks like this

user_1276115 0
Viewed 143

I am working on a flutter/dart rescue cat adoption app and I have a Pintrest style masonry grid layout of the cats available. I have a rough draft of a card which shows a photo of the cat and below that basic info like name and breed and characteristics and location. I would like to have a card layout that looks like the following but not sure how to round off the top and bottom of the card and have a variable height image. For the image I want it to have a set width but a variable height which will be high enough to not cut off either the sides or top or bottom of the image. The images come in a wide variety of widths and heights. The white text part should be fixed both in height and width. The card should look like this:

Cat Card flutter layout

I am pretty new to Flutter so would really like it if someone could please tell me how something like this card layout can be done. Thanks

flutter-card flutter-layout flutter mobile
1 Answers

Try below code.

Card(
  elevation: 5,
  shadowColor: Colors.grey,
  shape: RoundedRectangleBorder(
    borderRadius: BorderRadius.circular(
      20,
    ),
  ),
  margin: EdgeInsets.all(5),
  child: Container(
    height: 300,
    width: 200,
    child: Column(
      crossAxisAlignment: CrossAxisAlignment.stretch,
      children: [
        Expanded(
          child: Container(
            decoration: BoxDecoration(
              borderRadius: BorderRadius.only(
                topLeft: Radius.circular(
                  10,
                ),
                topRight: Radius.circular(
                  10,
                ),
              ),
              image: DecorationImage(
                fit: BoxFit.fill,
                image: NetworkImage(
                  'https://cdn.pixabay.com/photo/2022/03/27/11/23/cat-7094808__340.jpg',
                ),
              ),
            ),
          ),
        ),
        Container(
          height: 2,
          color: Colors.black,
        ),
        Container(
          height: 130,
          padding: const EdgeInsets.all(8.0),
          decoration: BoxDecoration(
            color: Colors.white,
            borderRadius: BorderRadius.only(
              bottomLeft: Radius.circular(20.0),
              bottomRight: Radius.circular(20.0),
            ),
          ),
          child: Column(
            crossAxisAlignment: CrossAxisAlignment.start,
            children: [
              Text(
                'Jake',
                style: TextStyle(
                  color: Colors.black,
                  fontWeight: FontWeight.bold,
                  fontSize: 15,
                ),
              ),
              SizedBox(
                height: 5,
              ),
              Text(
                'Domestic Short Hair',
                style: TextStyle(
                  color: Colors.black,
                  fontWeight: FontWeight.w500,
                  fontSize: 12,
                ),
              ),
              SizedBox(
                height: 5,
              ),
              Text(
                'Available | Kitchen | Male | Small Pale - 3.99 Mile',
                style: TextStyle(
                  color: Colors.black,
                  fontSize: 12,
                ),
              ),
            ],
          ),
        ),
      ],
    ),
  ),
),

Result Image-> image

user_139972100
Related