skip to Main Content

I want to have a glass look background for my cards. When I pass the container in the card widget, the image is in the middle and too small.

Example:
Example of how it looks

image

My build method:

final width = MediaQuery.of(context).size.width;
final height = MediaQuery.of(context).size.height;
return Card(
  elevation: 6,
  color: backgroundColor,
  shape: RoundedRectangleBorder(
    borderRadius: BorderRadius.circular(14),
  ),
  child: InkWell(
    onTap: () {},
    child: Container(
      width: width / 1.6,
      height: height / 4,
      decoration: const BoxDecoration(
        image: DecorationImage(
          image: AssetImage('assets/images/card/test.png'),
          fit: BoxFit.fitWidth,
          alignment: Alignment.topCenter,
        ),
      ),
      child: Padding(
        padding: const EdgeInsets.only(left: 16.0, right: 16.0, top: 15, bottom: 0),
        child: Column(
          crossAxisAlignment: CrossAxisAlignment.start,
          mainAxisAlignment: MainAxisAlignment.spaceBetween,
          children: [
            Text(groupData.name, overflow: TextOverflow.ellipsis,),
            Text(groupData.moduleId, overflow: TextOverflow.ellipsis,), 
            Row(
              crossAxisAlignment: CrossAxisAlignment.center,
              mainAxisAlignment: MainAxisAlignment.spaceBetween,
              children: [
                Expanded(child: Text(moduleData.name, overflow: TextOverflow.ellipsis,)),
                Image.asset('assets/images/card/group_card_icon.png', height: 60, width: 60, fit: BoxFit.cover,)
              ],
            )
          ],
        ),
      ),
    ),
  ),
);

2

Answers


  1. Maybe it’s not a code problem and your test.png image has empty transparent space surrounding the actual glass-like background, i just copy pasted your code but changed the fit to BoxFit.fill in your DecorationImage and it works well:

    My code result

    Login or Signup to reply.
  2. When you want to fill the image in a complete area you need to use fill, replace this with your decoration part of the decoration.

     decoration: const BoxDecoration(
            image: DecorationImage(
              image: AssetImage('assets/images/card/test.png'),
              fit: BoxFit.fill,
              alignment: Alignment.topCenter,
            ),
          ),
    
    Login or Signup to reply.
Please signup or login to give your own answer.
Back To Top
Search