Flutter : Let big image overflow inside stack

Question

I'm trying to let my users increase the size of an image inside a fixed size Stack.
The chosen size can be way above the Stack's size.

This is the result I get for now, even though the image :

Here is the relevant code :

Expanded(
child: AspectRatio(
  aspectRatio: myCustomScreen.width / myCustomScreen.height,
  child: ClipRRect(
    borderRadius: BorderRadius.circular(14),
    child: LayoutBuilder(
      builder: (context, boxConstraint) {
        return Stack(
              alignment: Alignment.center,
              fit: StackFit.passthrough,
              children: [
                Container(
                  color: Colors.blue,
                ),
                //This object doesn't overflow when its width is above the 
                UnconstrainedBox(
                  child: Image(
                      width: (object.width.toDouble() * boxConstraint.biggest.width) / myCustomScreen.width,
                      image: NetworkImage("www.images.com/image.png", scale: 1)),
                ),
              ],
            );
      },
    ),
  ),
),
),

How can I let my users view the real size of the image inside this view without being constrained by the stack ?

Thank you !

Thiago Fontes · Answer

Stack has a property called clipBehavior you can use it like this to enable overflow:

Stack(
  clipBehavior: Clip.none,
  // Your code continues here

Edit: Testing your code I made ti work on dart pad. The steps were, remove the UnconstrainedBox and used the image scale to resize it alongside with the fit property defined as none:

here's the code that I used on darted: https://dartpad.dartlang.org/

import 'package:flutter/material.dart';

void main() => runApp(MyApp());

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Demo',
      debugShowCheckedModeBanner: false,
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: const MyHomePage(title: 'Flutter Demo Home Page'),
    );
  }
}

class MyHomePage extends StatefulWidget {
  final String title;

  const MyHomePage({
    Key? key,
    required this.title,
  }) : super(key: key);

  @override
  State createState() => _MyHomePageState();
}

class _MyHomePageState extends State {
  int _counter = 0;

  void _incrementCounter() {
    setState(() {
      _counter++;
    });
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text(widget.title),
      ),
      body: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: [
            const Text(
              'You have pushed the button this many times:',
            ),
            Text(
              '$_counter',
              style: Theme.of(context).textTheme.headline4,
            ),
            Expanded(
              child: AspectRatio(
                aspectRatio: 200 / 400,
                child: ClipRRect(
                  borderRadius: BorderRadius.circular(14),
                  child: LayoutBuilder(
                    builder: (context, boxConstraint) {
                      return Stack(
                        clipBehavior: Clip.none,
                        alignment: Alignment.center,
                        fit: StackFit.passthrough,
                        children: [
                          Container(
                            color: Colors.blue,
                          ),
                          Image(
                            fit: BoxFit.none,
                            image: NetworkImage(
                              "https://images.pexels.com/photos/13406218/pexels-photo-13406218.jpeg?auto=compress&cs=tinysrgb&w=1260&h=750&dpr=2",
                              scale: 1 / (_counter + 1),
                            ),
                          ),
                        ],
                      );
                    },
                  ),
                ),
              ),
            ),
          ],
        ),
      ),
      floatingActionButton: FloatingActionButton(
        onPressed: _incrementCounter,
        tooltip: 'Increment',
        child: const Icon(Icons.add),
      ),
    );
  }
}

Flutter : Let big image overflow inside stack

1 Answers