Search code examples
flutterdraggable

Draggable widget loses text styling while dragging - Flutter


When I drag the view, the Text changes it's style. I guess there is some rebuilding going on. Any idea how I can make the Text stay the same while I drag it?

Positioned(
    left: _textPosition.dx,
    top: _textPosition.dy,
    child: Draggable(
      feedback: Container(
        color: black_transparent_light,
        child:  Padding(
          padding: const EdgeInsets.all(8.0),
          child: Text(
            "Some Text Here",
            style: const TextStyle( // Preserve original style
                color: Colors.white, // Adjust as needed
                fontSize: 16, // Adjust as needed
                fontStyle: FontStyle.normal,
                decoration: TextDecoration.none
            ),
          ),
        )
      ),
      childWhenDragging: Container(),
      onDragEnd: (details)
      {
        final RenderBox renderBox = _mainContainerKey.currentContext!.findRenderObject() as RenderBox;
        final Offset position = renderBox.localToGlobal(Offset.zero); // This is the absolute position

        setState(() {
          _textPosition = Offset(
              details.offset.dx-position.dx - mainContainerStartMargin,
              details.offset.dy-position.dy-mainContainerTopMargin);
        });
      },
      child: Container(
        color: black_transparent_light,
        child:  Padding(
          padding: const EdgeInsets.all(8.0),
          child: Text(
            "Some Text Here",
            style: const TextStyle( // Preserve original style
                color: Colors.white, // Adjust as needed
                fontSize: 16, // Adjust as needed
                fontStyle: FontStyle.normal,
                decoration: TextDecoration.none
            ),
          ),
        ),
      ),
    ),
  ),

Solution

  • All I had to do to fix this issue was to wrap the Container inside the feedback with the Material Widget:

    feedback: Material(
       color: Colors.transparent,
       child: Container(
       color: black_transparent_light,
       child:  Padding(
       padding: const EdgeInsets.all(8.0),
         child: Text(
                 "Some Text Here",
                 style: const TextStyle( // Preserve original style
                  color: Colors.white, // Adjust as needed
                 fontSize: 16, // Adjust as needed
                    fontStyle: FontStyle.normal,
                   decoration: TextDecoration.none
                     ),
                   ),
                )
          ),
    )