0

I am trying to fit image to the whole screen. I am using media query to fill the image for the whole screen, but the problem is image is scrolling when using media query full height. Is it possible to show image without scrolling to fill the whole screen.

return Stack(
  children: [
    Container(
      height: MediaQuery.of(context).size.height,
      decoration: BoxDecoration(
        image: DecorationImage(image: AssetImage('assets/welcome_screen.png'),fit:BoxFit.fill),
      ),
    ),
    Align(
      alignment: Alignment.bottomCenter,
      child: Container(
        height: 50,
        width: double.infinity,
        decoration: BoxDecoration(
          gradient: LinearGradient(
            end: const Alignment(0.0, -1),
            begin: const Alignment(0.0, 0.4),
            colors: <Color>[const Color(0x8A000000), Colors.black12.withOpacity(0.0)],
          ),
        ),
      ),
    ),
fazilSizzlers
  • 195
  • 10
  • See my answer [here](https://stackoverflow.com/questions/71894292/get-size-of-screen-without-bottom-navigation-bar-height/71895304#71895304), you have to deduct from the total height. – Peter Koltai Sep 05 '22 at 19:53

1 Answers1

0

You can try this:

 return Stack(
  children: [
    Column(
     children: [
        Expanded(
         child: Container(
         //height: MediaQuery.of(context).size.height,
         decoration: BoxDecoration(
         image: DecorationImage(image: AssetImage('assets/welcome_screen.png'),fit:BoxFit.fill),
            ),
          ),
        ),
      ]
    ),
    Align(
      alignment: Alignment.bottomCenter,
      child: Container(
        height: 50,
        width: double.infinity,
        decoration: BoxDecoration(
          gradient: LinearGradient(
            end: const Alignment(0.0, -1),
            begin: const Alignment(0.0, 0.4),
            colors: <Color>[const Color(0x8A000000), Colors.black12.withOpacity(0.0)],
          ),
        ),
      ),
    ),
Jonathan Perez
  • 254
  • 1
  • 7