Home > Software engineering >  Image height is not changing
Image height is not changing

Time:11-03

I'm trying to change the image height but it's not changing.

here is my code

 ListTile(
     
          leading: ClipRRect(
            borderRadius: BorderRadius.circular(10.0),
            child: Image.network(
              book.urlImage,
              fit: BoxFit.cover,
              width: 55,
              height: 90,
            ),
          ),

CodePudding user response:

By default the ListTile's maximum leading widget height would be 56px.

This is the source code of ListTile,

final Offset baseDensity = visualDensity.baseSizeAdjustment;
if (isOneLine)
  return (isDense ? 48.0 : 56.0)   baseDensity.dy;
if (isTwoLine)
  return (isDense ? 64.0 : 72.0)   baseDensity.dy;
return (isDense ? 76.0 : 88.0)   baseDensity.dy;

You can see the maximum height of leading widget for each condition. 90px wouldn't be possible. If 90px is what you want then consider making your own ListTile with Row and Column.

CodePudding user response:

Have you tried putting the Listtile in a container?

In this way -->

Container(
        width: 100,
        height: 100,
        decoration: BoxDecoration(
          image: DecorationImage(
            image: AssetImage(
             'assets/horoscopes/${horoscope.toLowerCase()}.png'),
          ),
          borderRadius: const BorderRadius.all(
            Radius.circular(25.0),
          ),
        ),
      ),

CodePudding user response:

Set your image in SizedBox child

SizedBox(
  width: 50,
  height: 90,
  child: Image.network( 
     book.urlImage, 
     fit: BoxFit.cover,
  ),
)

CodePudding user response:

Try below code hope its help to you.

 ListTile(
            leading: Container(
              width: 150.0,
              height: 100.0,
              decoration: BoxDecoration(
                border: Border.all(
                  color: Colors.grey.shade500,
                ),
                image: DecorationImage(
                  image: NetworkImage(
                    'https://tech.pelmorex.com/wp-content/uploads/2020/10/flutter.png',
                  ),
                ),
                //shape: BoxShape.circle,
              ),
            ),
          ),

Your Result Screen-> image

  • Related