How do I allow a Flutter image to overflow the screen?

user_119136 0
Viewed 133

The following Flutter widget build will show an image on the screen:

  @override
  Widget build(BuildContext context) {
     return Image.asset('assets/images/image.jpg');
  }

How do I wrap or configure the Image in order to show a zoomed/scaled version that is allowed to overflow the screen boundaries. Nothing I have tried so far has worked. I would like to set the image to a width of 1.25 times the screen width and then present it as illustrated below.

enter image description here

dart flutter
2 Answers

I think that something like this could be what you are looking for.

Basically giving the width of the image based on your screen size, it is important to notice that it will scale with the screen size, so a tablet might be a problem with respect to a mobile phone

  @override
  Widget build(BuildContext context) {
    Size size = MediaQuery.of(context).size;
     return ClipRect(
        clipBehavior: Clip.hardEdge,
        child: Image.asset(
         'assets/images/image.jpg',
          width: size.width * 1.25,
          fit: BoxFit.cover
        ),
      );
  }

EDIT: I've tried to run the code myself and it looks like the best solution for this is a Stack, below the code

@override
  Widget build(BuildContext context) {
    Size size = MediaQuery.of(context).size;
    return Stack(children: [
      Positioned(
        left: -size.width*0.125,
        right: -size.width*0.125,
        child: Image.asset(
          'assets/images/image.jpg',
        ),
      ),
      ]
    );
  }
user_104332910

Wrapping the image in a FittedBox and specifying fit: BoxFit.cover along with setting both width and height for the image will make it work.

@override
Widget build(BuildContext context) {
  return FittedBox(
    child: Image.asset(
      'assets/images/image.jpg',
      width: MediaQuery.of(context).size.width * 1.25,
      height: 400,
      fit: BoxFit.cover,
    ),
  );
}
user_1191360
Related