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

by

Issue

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.

Solution

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.

enter image description here

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]

Answered By – KuKu

Leave a Comment