Flutter - I want the image to disappear when it goes out of that area

Question

Draggable allows images to be dragged. When the image goes out of the orange container area, I want it to disappear rather than hide. I used an offset, but I'm not sure how to make the image disappear outside of that area. It would be really appreciated if you could give an example with code.

Answer 1

Here is a my trial.

• Changed clipBehavior of Stack widget's parameter
  => It allows upper stack item can be overflowed.
• If position is changed to out of area, change a opacity to 0 with animation.
  
  

import 'package:flutter/material.dart';

void main() {
  runApp(MyApp());
}

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      // Remove the debug banner
      debugShowCheckedModeBanner: false,
      title: 'Kindacode.com',
      home: MyHomePage(),
    );
  }
}

class MyHomePage extends StatefulWidget {
  @override
  _MyHomePageState createState() => _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> {
  bool _started = false;
  bool _isDisappeared = false;
  Offset _position = Offset(10, 220);

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: SafeArea(
        child: Stack(
          clipBehavior: Clip.none,
          children: <Widget>[
            Container(
              width: 300,
              height: 400,
              color: Colors.orange,
            ),
            Positioned(
              top: _position.dy - 30, // Size of widget to reposition correctly
              left: _position.dx,
              child: AnimatedOpacity(
                duration: const Duration(milliseconds: 500),
                opacity: _isDisappeared ? 0.0 : 1.0,
                child: Draggable(
                  child: Icon(Icons.home),
                  feedback: Icon(Icons.home),
                  onDragEnd: (details) {
                    print(details.offset);
                    setState(() {
                      if (!_started) _started = true;
                      _position = details.offset;

                      if (_position.dy - 30 > 400 || _position.dx > 300) {
                        setState(() {
                          _isDisappeared = true;
                        });
                      }
                    });
                  },
                ),
              ),
            ),
          ],
        ),
      ),
    );
  }
}
[![enter image description here][1]][1]