I am trying to fit an image to the entire space, I am wrapping the Image.asset into an Expanded Widget but the image does not covers the entire space, I have used all the options in BoxFit enum and it doesnt really change the way the application looks. Does any of you has an idea what can be changed?
this is the code of the body inside the Scaffold:
body: Column(
children: [
Container(
width: MediaQuery.of(context).size.width,
color: Colors.brown[200],
padding: const EdgeInsets.all(20),
alignment: Alignment.center,
child: const Text('How I like my coffe...'),
),
Container(
color: Colors.brown[100],
padding: const EdgeInsets.all(20),
child: const CoffeePrefs(),
),
Expanded(
child: Image.asset(
'assets/coffee-beans-bg.jpg',
fit: BoxFit.fill, // Ensures the image fits the full width
),
),
],
And this is how it looks:
I have wraped the image inside a SizedBox, a FittedBox, and change the BoxFit enums.
Yes, the answer was there, after adding the double.infinity for the width and the height, the image was expanded. the final code I used was like this:
Expanded(
child: Image.asset(
'assets/coffee-beans-bg.jpg',
width: double.infinity,
height: double.infinity,
fit: BoxFit.fill, // Ensures the image fits the full width
),
),