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:

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):

(Forgive my poor MS paint skills)
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'),
),
),
),
),
)
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With