Image not covering full device dimensions in flutter

Question

I am trying to add an image covering the device width and height, also this image needs have text over it. At first when adding the image I used fit: BoxFit.fill on the Image.dart file so that the image covers the whole screen and it worked. Then for having the text over the image I added Stack widget wrapping the image and the text, as soon as I did this, the the text was over the image but now the image was not covering the full screen height. Why is this problem happening?

// main.dart
void main() {
  runApp(MaterialApp(home: MyApp()));
}

class MyApp extends StatelessWidget {
  Widget build(BuildContext context) {
    return Scaffold(
      backgroundColor: Colors.white,
      body: ImageContainer(),
    );
  }
}

// ImageContainer.dart
class ImageContainer extends StatelessWidget {
  Widget build(BuildContext context) {
    return Container(
      child: Column(
        mainAxisAlignment: MainAxisAlignment.center,
        children: [
          Stack(
            children: [
              MainImage("assets/images/startwars.jpg"),
              Positioned(
                bottom: 0,
                left: 0, 
                child: Container(
                  child: Text(
                    "someText",
                    style: TextStyle(fontSize: 18, fontWeight: FontWeight.bold, color: Colors.white),
                  )
                ),
              )
            ],
          )
        ],
      ),
    );
  }
}

// Image.dart
class MainImage extends StatelessWidget {
  final String _assetPath;
  MainImage(this._assetPath);
  
  @override
  Widget build(BuildContext context) {
    return Container(
      decoration: BoxDecoration(color: Colors.red,),
      child: Expanded(
        child: Image.asset(
          _assetPath,
          fit: BoxFit.fill,
        ),
      ),
    );
  }
}

If you have any questions please let me know in the comments;)

Answer 1

I fixed this problem by adding constraints to the container in the Image.dart file, all I did was adding this line. After lots and lots of investigation I realized that adding MediaQuery to the height tells the app to cover the screen's height, this can be also done with width.

Widget build(BuildContext context) {
    return Container(
      decoration: BoxDecoration(color: Colors.red,),
      constraints: BoxConstraints.expand(height: MediaQuery.of(context).size.height), // add this line

      child: Expanded(
        child: Image.asset(
          _assetPath,
          fit: BoxFit.fill,
        ),
      ),
    );
  }

Answer 2

You can set Stack fit .. Stack( fit: StackFit.expand, ... ) An also you can add Container ( child:Image( ... ), width: double.infinity, heigh:...)

Answer 3

Set your Stack fit to expand:

Stack(
  fit: StackFit.expand,
  children: [],
);