How Can I resize image widget relatively? - flutter

Question

I want my image resize relatively from parent Containerwidget and defined scale: 0.8,//here in AssetImage() but it doesn't work ? How Can I fix this ?
Container(
margin: const EdgeInsets.only(top: 30),
alignment: Alignment.centerLeft,
child: Wrap(
children: [
GestureDetector(
onTap: () {
print("test");
},
child: Container(
width: 50,
height: 50,
// color: Colors.green,
decoration: const BoxDecoration(
color: Colors.blue,
shape: BoxShape.circle,
image:
DecorationImage(
fit: BoxFit.fill,
image: AssetImage('images/prop/lock.png'),
scale: 0.8,//here
),
),
),
),
],
),
),
Additional comment
I think LayoutBuilder() doesn't work appropriately.
Container(
margin: const EdgeInsets.only(top: 30),
alignment: Alignment.centerLeft,
child: Wrap(
children: [
GestureDetector(
onTap: () {
print("test");
},
child: Container(
width: 50,
height: 50,
// color: Colors.green,
decoration: const BoxDecoration(
color: Colors.blue,
shape: BoxShape.circle,
),
child: LayoutBuilder(
builder: (context, constraints) {
return Image.asset(
'images/prop/lock.png',
fit: BoxFit.none,
height: constraints.maxHeight * 0.1,
width: constraints.maxWidth * 0.1,
);
},
),
),
),
],
),
),

Answer 1

You can use LayoutBuilder like this:
Container(
margin: const EdgeInsets.only(top: 30),
alignment: Alignment.centerLeft,
child: Wrap(
children: [
GestureDetector(
onTap: () {
print("test");
},
child: Container(
width: 50,
height: 50,
alignment: Alignment.center,// important part
decoration: const BoxDecoration(
color: Colors.blue,
shape: BoxShape.circle,
),
child: LayoutBuilder(
builder: (context, constraints) {
return Image.asset(
'images/prop/lock.png',
fit: BoxFit.contain,
height: constraints.maxHeight * 0.3,
width: constraints.maxWidth * 0.3,
);
},
),
),
),
],
),
)

Answer 2

You can Use AspectRatio Class for that use, like this
final double size = MediaQuery.of(context).size.aspectRatio;

Answer 3

You must change fit type to BoxFit.none, like this:
Container(
margin: const EdgeInsets.only(top: 30),
alignment: Alignment.centerLeft,
child: Wrap(
children: [
GestureDetector(
onTap: () {
print("test");
},
child: Container(
width: 100,
height: 100,
// color: Colors.green,
decoration: const BoxDecoration(
color: Colors.blue,
shape: BoxShape.circle,
image: DecorationImage(
fit: BoxFit.none, // change this line
image: AssetImage('images/prop/lock.png'),
scale: 0.8,
),
),
),
),
],
),
)