Search code examples
flutterdartdraggable

Draggable and DragTarget, How can I build a widget after a Draggable has been accepted in a DragTarget?


I'm building a simple game using flutter, I tried the code Below, called a positioned widget after the dragTarget runs the onAccept function...Really don't know why the widget isn't built.

Here is my UI here is the positioned widget I want to build hehe Code

      Positioned(
        bottom: 0,
              child: DragTarget(

                onWillAccept: (data){
                  print(data);
                  return true;
                },

              onAccept: (String value) {
                print(caughtValue);

                    //HERE IS THE THING I WANT TO BUILD
                          Positioned(
                            child: Container(
                              width: 50,
                              height: 50,
                              child: Center(
                                child: Text('data'),
                              ),
                            ),
                          );

                   setState(() {
                        caughtValue = value;
                  });

              },

Really Would appreciate if you could help.


Solution

  • You can copy paste run full code below
    You can use Visibility wrap Positioned and put under Stack
    When onAccept change isVisible to true

    code snippet

        Stack(
            alignment: Alignment.center,
            children: <Widget>[
              Draggable(
                feedback: Text('draging'),
                child: Text('drag me'),             
              ),
              Positioned(
                  top: 30,
                  child: DragTarget(              
                    onAccept: (data) {
                      print(" onAccept");
                      setState(() {
                        isVisible = true;
                        targetText = "data";
                      });
                    },              
              ...
              Visibility(
                visible: isVisible,
                child: Positioned(
                  top: 450,
              ...
    

    working demo

    enter image description here

    full code

    import 'package:flutter/material.dart';
    
    void main() => runApp(new MyApp());
    
    class MyApp extends StatelessWidget {
      @override
      Widget build(BuildContext context) {
        return new MaterialApp(
          title: 'Flutter Demo',
          theme: new ThemeData(
            primarySwatch: Colors.blue,
          ),
          home: new Scaffold(
              appBar: new AppBar(
                title: new Text("DraggableDemo"),
              ),
              body: Drag2TargetPage()),
        );
      }
    }
    
    bool isVisible = false;
    
    class Drag2TargetPage extends StatefulWidget {
      @override
      _Drag2TargetPageState createState() => _Drag2TargetPageState();
    }
    
    class _Drag2TargetPageState extends State<Drag2TargetPage> {
      var targetText = "Target";
    
      @override
      Widget build(BuildContext context) {
        return ConstrainedBox(
          constraints: BoxConstraints.expand(),
          child: Stack(
            alignment: Alignment.center,
            children: <Widget>[
              Draggable(
                feedback: Text('draging'),
                child: Text('drag me'),
                //data: "123"
              ),
              Positioned(
                  top: 30,
                  child: DragTarget(
                    onWillAccept: (data) {
                      print("data = $data onWillAccept");
                      return true;
                    },
                    onAccept: (data) {
                      print(" onAccept");
                      setState(() {
                        isVisible = true;
                        targetText = "data";
                      });
                    },
                    onLeave: (data) {
                      print("data = $data onLeave");
                    },
                    builder: (context, candidateData, rejectedData) {
                      return Container(
                        width: 150.0,
                        height: 150.0,
                        color: Colors.blue[500],
                        child: Center(
                          child: Text(targetText),
                        ),
                      );
                    },
                  )),
              Visibility(
                visible: isVisible,
                child: Positioned(
                  top: 450,
                  child: Container(
                    width: 40,
                    height: 20,
                    child: Center(
                      child: Text('show'),
                    ),
                  ),
                ),
              )
            ],
          ),
        );
      }
    }