Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Flutter: Resize/scale up an image clipped with ClipRect

Tags:

image

flutter

I have an image that I want to load, but only show a certain cropped portion. I used examples from here: https://educity.app/flutter/how-to-clip-images-in-flutter

My (testing) widget tree looks like this:

return Scaffold(
  body: SafeArea(
    child: SingleChildScrollView(
      child: Stack(
        children: <Widget>[
          Text("Hello World"),
          Container(
            alignment: Alignment.topLeft,
            width: MediaQuery.of(context).size.width,
            child: ClipRect(
              child: Container(
                child: Align(
                  alignment: Alignment(-0.5, -0.2),
                  widthFactor: 0.6,
                  heightFactor: 0.5,

                  child: Image.network(
                      'https://images.unsplash.com/photo-1473992243898-fa7525e652a5'
                  ),
                ),
              ),
            )
          ),

Emulator (Pixel 3C) output looks like this:

enter image description here

However, I would like to scale up the cropped image to span the whole width of the window, I'm not sure how to do that. I've already tried wrapping it in a Container with width set to the max width, but that doesn't scale up the image. Any advice? Or maybe there's a better way to do this?

(I'm also not sure why the image still overlaps with the notch thing on top of the emulator? I assumed the SafeArea would handle that, but that's fine. One problem at a time.)

Thanks!

Edit: Adding an example to more clearly illustrate what I want (circled in red):

enter image description here

(Forgive my poor MS paint skills)

like image 316
Roy Tang Avatar asked Dec 05 '25 04:12

Roy Tang


1 Answers

Simply put your ClipRect inside a FittedBox widget.

Container(
   width: MediaQuery.of(context).size.width,
   alignment: Alignment.topLeft,
   child: FittedBox(
      fit: BoxFit.fill,
      child: ClipRect(
         child: Container(
            child: Align(
               alignment: Alignment(-0.5, -0.2),
               widthFactor: 0.6,
               heightFactor: 0.5,
               child: Image.network(
                  'https://images.unsplash.com/photo-1473992243898-fa7525e652a5'),
               ),
            ),
         ),
      ),
   )
like image 96
Guillaume Roux Avatar answered Dec 06 '25 23:12

Guillaume Roux



Donate For Us

If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!