悬停时颤振 DragTarget

Question

When exploring the Flutter's DragTarget class I could not find any mechanism to hook to the 'on hover event' if you will. Here is an example:

 class DropZone extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return new Container(
      height: 40,
      color: Colors.green,
      child: DragTarget(
          builder: (context, List<int> candidateData, rejectedData) {
            print("dragged");
            return new Container(color: Colors.red,);
          },
      onWillAccept: (data) {
            return true;
      },),
    );
  }
}

I would like to change the color of the container when a Draggable object is hovered but not yet dropped. The builder method, in this case, only executes during the initial rendering and when the Draggable leaves the target. I suspect I have to do something in the onWillAccept method but not sure what. Does anybody have a solution?

Answer 1

here is the code for what I think you're looking for

import 'package:flutter/material.dart';

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        body: App(),
      ),
    );
  }
}

class App extends StatefulWidget {
  @override
  _AppState createState() => _AppState();
}

class _AppState extends State<App> {
  Color caughtColor = Colors.grey;
  @override
  Widget build(BuildContext context) {
    return Stack(
      children: <Widget>[
        DragBox(Offset(0.0, 0.0), Colors.green),
        Positioned(
            left: 100,
            bottom: 0.0,
            child: DragTarget(onAccept: (Color color) {
              caughtColor = color;
            }, builder: (
              BuildContext context,
              List<dynamic> accepted,
              List<dynamic> rejected,
            ) {
              return Container(
                width: 200,
                height: 200,
                color: accepted.isEmpty ? caughtColor : Colors.grey.shade200,
              );
            }))
      ],
    );
  }
}

class DragBox extends StatefulWidget {
  final Offset initPos;
  final Color itemColor;

  DragBox(this.initPos, this.itemColor);
  @override
  _DragBoxState createState() => _DragBoxState();
}

class _DragBoxState extends State<DragBox> {
  Offset position = Offset(0.0, 0.0);

  @override
  void initState() {
    super.initState();
    position = widget.initPos;
  }

  @override
  Widget build(BuildContext context) {
    return Positioned(
      left: position.dx,
      top: position.dy,
      child: Draggable(
        data: widget.itemColor,
        child: Container(
          width: 100,
          height: 100,
          color: widget.itemColor,
        ),
        onDraggableCanceled: (velocity, offset) {
          setState(() {
            position = offset;
          });
        },
        feedback: Container(
          width: 120,
          height: 120,
          color: widget.itemColor.withOpacity(0.5),
        ),
      ),
    );
  }
}

Answer 2

You can make combination of onAccept, onMove and onLeave functions in DragTarget to achieve the result.

Here is how you do it:

// ...
bool isTargetGettingDroppedForDelete = false;
//...

DragTarget<String>(
        builder: (
          BuildContext context,
          List<dynamic> accepted,
          List<dynamic> rejected,
        ) {
          return Container(
            height: 100,
            width: 100,
            color: isTargetGettingDroppedForDelete ? Colors.red : Colors.green,
          );
        },
        onWillAccept: (data) {
          return data == Constants.draggable;
        },
        onAccept: (data) {
          setState(() {
            isTargetGettingDroppedForDelete = false;
          });
        },
        onMove: (details) {
          setState(() {
            isTargetGettingDroppedForDelete = true;
          });
        },
        onLeave: (data) {
          setState(() {
            isTargetGettingDroppedForDelete = false;
          });
        },
      ),

Answer 3

You can use the candidateData parameter in the DragTarget.builder :

...
border: Border.all(
           color: candidateData.isNotEmpty
            ? Colors.red
            : Colors.black)),

The code above changes the border color to red upon hover.