Reputation: 4293
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.
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
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