Swapnil Kadam
Swapnil Kadam

Reputation: 4293

Image width, height not adjusting to the params in flutter

I am trying to scale down the image a bit so that it won't be cropped in grid item element. Actual image size is 300x300. grid view item image

below is my code where I am explicitly trying to reduce the image width and height, I have also attempted many combinations with the fit type. I do not see any visible impact though. Can you let me know how should I achieve this? Thank you for your patience.

    @override
  Widget build(BuildContext context) {
    return Scaffold(
        body: GridView.count(
      padding: const EdgeInsets.fromLTRB(0, 10, 0, 0),
      childAspectRatio: 1.5,
      crossAxisCount: 2,
      children: List.generate(
        8,
        (index) {
          return Center(
              child: Column(
            children: [
              Padding(
                  padding: const EdgeInsets.all(5),
                  child: CircleAvatar(
                    backgroundImage: Image.asset(
                      'assets/icons/antenna_icon.png',
                      height: 30,
                      width: 30,
                      fit: BoxFit.fitWidth,
                    ).image,
                    backgroundColor: Colors.grey.shade300,
                    radius: 50,
                  )),
              Text(
                "Evve",
                style: GoogleFonts.roboto(color: Colors.black87, fontSize: 15),
              ),
            ],
          ));
        },
      ),
    ));
  }

Upvotes: 1

Views: 879

Answers (1)

Mobina
Mobina

Reputation: 7109

You can use Transform.scale as the child of the CircleAvatar and set the image as the child of the Transform.scale:

CircleAvatar(
                    child: Transform.scale(
                      scale: 0.8,
                      child: Image.asset(
                        'assets/icons/antenna_icon.png',
                        height: 30,
                        width: 30,
                        fit: BoxFit.fitWidth,
                      ),
                    ),
                    backgroundColor: Colors.grey.shade300,
                    radius: 50,
                  )

Upvotes: 1

Related Questions