Flutter - Image taking the whole screen width

user_3897426 0
Viewed 4918

In a Detail page, I'd like an image to take the whole width available, on the very top. This is my code:

@override
  Widget build(BuildContext context) {
    return Scaffold(
      body: Stack(
        children: <Widget>[

          Container(
           child: Column(
            children: <Widget>[
              Container(
                width: double.infinity,
                child: Image.asset(
                  this.imageLink,
                ),
              )
            ],
          ),
        ),
     ),
);

The problème is : with the emulator, the result is exactly what I want :

enter image description here

But when I launch the app on a real phone (Galaxy S8 Plus) there are some paddings (top, left and right) and the image doesn't fit the screen width.

Which means that something is not correct in the way I tried to do it with the code.

Where could be the problem ?

dart flutter
3 Answers

I think the reason being original width of image is equal or more than the width of emulator and which is less than your Samsung S8+ width, you need to use 

Image.asset(
  this.linkImage,
  width: double.infinity,
  fit: BoxFit.cover,
),
user_66186220

You will have use expanded widget for that or you can use 

 height: double.infinity,
    width: double.infinity,

or

new Image.asset('assets/images/umbrella.png',
          width: size.width,
          height: size.height,
          fit: BoxFit.fill,
        )
user_73727710

you can use

fit: BoxFit.cover,

user_84554940
Related