flutter container Image not fitting to screen

user1889044 0
Viewed 21

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)],
          ),
        ),
      ),
    ),
flutter-container flutter-layout dart flutter image
1 Answers

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 Perez0
Related