Bug: can't drag and drop item from one group to another group

[Scrdoctor1412]

I have faced the issue like this. Others gestures work fine

Ghi.Man.hinh.2024-08-12.luc.14.33.48.mov

[Xazin]

Can you share reproducible code for this bug?

[Shahidbangash]

i am facing same issue

[ERROR:flutter/runtime/dart_vm_initializer.cc(40)] Unhandled Exception: type 'PhantomGroupItem' is not a subtype of type 'TextItem' of 'value'
#0 List.add (dart:core-patch/growable_array.dart:278:14)
growable_array.dart:278
#1 AppFlowyGroupController.insert (package:appflowy_board/src/widgets/board_group/group_data.dart:121:26)
group_data.dart:121
#2 AppFlowyBoardController.insertPhantom (package:appflowy_board/src/widgets/board_data.dart:323:36)
board_data.dart:323
#3 BoardPhantomController._insertPhantom (package:appflowy_board/src/widgets/reorder_phantom/phantom_controller.dart:125:14)
phantom_controller.dart:125
#4 BoardPhantomController.acceptNewDragTargetData (package:appflowy_board/src/widgets/reorder_phantom/phantom_controller.dart:167:7)
phantom_controller.dart:167
#5 BoardPhantomController.dragTargetDidMoveToReorderFlex (package:appflowy_board/src/widgets/reorder_phantom/phantom_controller.dart:214:5)
phantom_controller.dart:214
#6 OverlappingDragTargetInterceptor.onWillAccept. (package:appflowy_board/src/widgets/reorder_flex/drag_target_interceptor.dart:110:20)
drag_target_interceptor.dart:110
#7 Timer._creat<…>

[Xazin]

i am facing same issue

If you can share a small sample of code with the error reproducible, I can take a look.

[aymenbraham]

i am facing the same issue!!
appflowy_board: ^0.1.2
tested on Iphone 14
This is the exception :
══╡ EXCEPTION CAUGHT BY GESTURE LIBRARY ╞═══════════════════════════════════════════════════════════
The following _TypeError was thrown while routing a pointer event:
type 'PhantomGroupItem' is not a subtype of type 'RichTextItem' of 'element'

When the exception was thrown, this was the stack:
#0 List.insert (dart:core-patch/growable_array.dart:9:28)
#1 AppFlowyGroupController.insert (package:appflowy_board/src/widgets/board_group/group_data.dart:119:26)
#2 AppFlowyBoardController.insertPhantom (package:appflowy_board/src/widgets/board_data.dart:323:36)
#3 BoardPhantomController._insertPhantom (package:appflowy_board/src/widgets/reorder_phantom/phantom_controller.dart:125:14)
#4 BoardPhantomController.acceptNewDragTargetData (package:appflowy_board/src/widgets/reorder_phantom/phantom_controller.dart:167:7)
#5 CrossReorderFlexDragTargetInterceptor.onWillAccept (package:appflowy_board/src/widgets/reorder_flex/drag_target_interceptor.dart:197:38)
#6 ReorderFlexState._buildDragTarget.. (package:appflowy_board/src/widgets/reorder_flex/reorder_flex.dart:479:25)
#7 ReorderFlexState._interceptDragTarget (package:appflowy_board/src/widgets/reorder_flex/reorder_flex.dart:524:15)
#8 ReorderFlexState._buildDragTarget. (package:appflowy_board/src/widgets/reorder_flex/reorder_flex.dart:478:15)
#9 _ReorderDragTargetState.build. (package:appflowy_board/src/widgets/reorder_flex/drag_target.dart:119:41)
#10 _DragTargetState.didEnter (package:flutter/src/widgets/drag_target.dart:733:68)
#11 _DragAvatar.updateDrag. (package:flutter/src/widgets/drag_target.dart:903:23)
#12 ListBase.firstWhere (dart:collection/list.dart:126:15)
#13 _DragAvatar.updateDrag (package:flutter/src/widgets/drag_target.dart:897:91)
#14 _DragAvatar.update (package:flutter/src/widgets/drag_target.dart:840:5)
#15 MultiDragPointerState._move (package:flutter/src/gestures/multidrag.dart:105:16)
#16 MultiDragGestureRecognizer._handleEvent (package:flutter/src/gestures/multidrag.dart:272:13)
#17 PointerRouter._dispatch (package:flutter/src/gestures/pointer_router.dart:98:12)
#18 PointerRouter._dispatchEventToRoutes. (package:flutter/src/gestures/pointer_router.dart:143:9)
#19 _LinkedHashMapMixin.forEach (dart:collection-patch/compact_hash.dart:633:13)
#20 PointerRouter._dispatchEventToRoutes (package:flutter/src/gestures/pointer_router.dart:141:18)
#21 PointerRouter.route (package:flutter/src/gestures/pointer_router.dart:127:7)
#22 GestureBinding.handleEvent (package:flutter/src/gestures/binding.dart:501:19)
#23 GestureBinding.dispatchEvent (package:flutter/src/gestures/binding.dart:481:22)
#24 RendererBinding.dispatchEvent (package:flutter/src/rendering/binding.dart:450:11)
#25 GestureBinding._handlePointerEventImmediately (package:flutter/src/gestures/binding.dart:426:7)
#26 GestureBinding.handlePointerEvent (package:flutter/src/gestures/binding.dart:389:5)
#27 GestureBinding._flushPointerEventQueue (package:flutter/src/gestures/binding.dart:336:7)
#28 GestureBinding._handlePointerDataPacket (package:flutter/src/gestures/binding.dart:305:9)
#29 _invoke1 (dart:ui/hooks.dart:328:13)
#30 PlatformDispatcher._dispatchPointerDataPacket (dart:ui/platform_dispatcher.dart:442:7)
#31 _dispatchPointerDataPacket (dart:ui/hooks.dart:262:31)

router: Instance of 'PointerRouter'
route: Closure: (PointerEvent) => void from Function '_handleEvent@1513470698':.
event: PointerMoveEvent#2465d(position: Offset(227.0, 252.3))
════════════════════════════════════════════════════════════════════════════════════════════════════

Another exception was thrown: 'package:flutter/src/widgets/drag_target.dart': Failed assertion: line 748 pos 12: '_candidateAvatars.contains(avatar) || _rejectedAvatars.contains(avatar)':
is not true.
Another exception was thrown: 'package:flutter/src/widgets/drag_target.dart': Failed assertion: line 760 pos 12: '_candidateAvatars.contains(avatar)': is not true.

this is my code :

class MultiBoardListExample extends StatefulWidget {
final String planTitle;
final String daysNumber;
final DayTrips dayTrips;
const MultiBoardListExample(
{required this.planTitle,
required this.daysNumber,
required this.dayTrips,
Key? key})
: super(key: key);

@OverRide
State createState() => _MultiBoardListExampleState();
}

class _MultiBoardListExampleState extends State {
final AppFlowyBoardController controller = AppFlowyBoardController(
onMoveGroup: (fromGroupId, fromIndex, toGroupId, toIndex) {
debugPrint('Move item from $fromIndex to $toIndex');
},
onMoveGroupItem: (groupId, fromIndex, toIndex) {
debugPrint('Move $groupId:$fromIndex to $groupId:$toIndex');
},
onMoveGroupItemToGroup: (fromGroupId, fromIndex, toGroupId, toIndex) {
debugPrint('Move $fromGroupId:$fromIndex to $toGroupId:$toIndex');
},
);

late AppFlowyBoardScrollController boardController;
bool? isFrench;

@OverRide
void initState() {
super.initState();
boardController = AppFlowyBoardScrollController();
}
@OverRide
Widget build(BuildContext context) {
const config = AppFlowyBoardConfig(
groupBackgroundColor: Color(0xffF5F5F5),
stretchGroupHeight: false,
);
return Scaffold(
backgroundColor: const Color(0xffF5F5F5),
appBar: AppBar(
elevation: 0,
leading: GestureDetector(
child: Icon(
Icons.arrow_back,
color: appTheme.blueGray900,
),
onTap: () => (Navigator.of(context).pop()),
),
backgroundColor: Colors.white,
titleSpacing: 0,
title: Row(
crossAxisAlignment: CrossAxisAlignment.start,
children: [
Flexible(
child: Column(
crossAxisAlignment: CrossAxisAlignment.start,
mainAxisAlignment: MainAxisAlignment.start,
children: [
Text(
widget.planTitle,
overflow: TextOverflow.ellipsis,
style: theme.textTheme.bodyLarge!.copyWith(
fontWeight: FontWeight.w500,
fontSize: 18,
fontFamily: "Poppins",
color: appTheme.blueGray900,
),
),
Row(
children: [
Text(
widget.daysNumber,
style: const TextStyle(
fontFamily: "Poppins",
fontSize: 11,
fontWeight: FontWeight.w400,
color: Color(0xff9B9B9B),
),
),
],
),
],
),
),
],
),
),
body: Container(
color: const Color(0xffF5F5F5),
child: AppFlowyBoard(
controller: controller,
cardBuilder: (context, group, groupItem) {
return AppFlowyGroupCard(
decoration: BoxDecoration(
color: Colors.white,
borderRadius: BorderRadius.circular(12.0)),
margin: const EdgeInsets.only(bottom: 20),
key: ValueKey(groupItem.id),
child: _buildCard(groupItem),
);
},
boardScrollController: boardController,
footerBuilder: (context, columnData) {
return AppFlowyGroupFooter(
title: CustomElevatedButton(
onPressed: () =>
(boardController.scrollToBottom(columnData.id)),
text: "Add Step".tr,
buttonTextStyle: const TextStyle(
fontFamily: "Poppins",
fontSize: 18,
color: Color(0xff9B9B9B),
fontWeight: FontWeight.w600,
),
buttonStyle: ButtonStyle(
shape: WidgetStatePropertyAll(
RoundedRectangleBorder(
// Change your radius here
borderRadius: BorderRadius.circular(12),
),
),
backgroundColor:
const WidgetStatePropertyAll(Color(0xffE0E0E0))),
height: 50,
width: 240,
),
height: 70,
margin: const EdgeInsets.only(bottom: 20, left: 12),
// onAddButtonClick: () {
// boardController.scrollToBottom(columnData.id);
// },
);
},
headerBuilder: (context, columnData) {
return AppFlowyGroupHeader(
title: Row(
children: [
Text(columnData.headerData.groupName,
style: const TextStyle(
fontFamily: "Poppins",
fontSize: 15,
color: Color(0xff24253D),
fontWeight: FontWeight.w600,
)),
],
),
moreIcon: const Icon(Icons.more_horiz,
color: Color(0xff212121), size: 20),
height: 50,
margin: config.groupHeaderPadding,
);
},
groupConstraints: const BoxConstraints.tightFor(width: 280),
config: config)));
}

Widget _buildCard(AppFlowyGroupItem item) {
if (item is TextItem) {
return TextCard();
}

if (item is RichTextItem) {
  return RichTextCard(item: item);
}

throw UnimplementedError();

}
}

[aymenbraham]

@Scrdoctor1412
Did you find a solution ?

[mariusgab]

this package is unusable without this fixed, the code example crashes with 'ScrollController attached to multiple scroll views.' when trying to drag and drop an item

[KONEONE]

I also encountered the same problem

[mariusgab]

I also encountered the same problem

seems to work if you set the main branch for the package

appflowy_board:
git:
url: https://github.com/AppFlowy-IO/appflowy-board.git
ref: main

[awaik]

This was fixed here
#4

use

items: List<AppFlowyGroupItem>.from(items),

when building a group

final items = ['Hello'].map((it) => TextItem(it))
AppFlowyGroupData(
   id: 'one',
   name: 'One',
   items: List<AppFlowyGroupItem>.from(items),
);

[KONEONE]

在我的代码中，两个Group中如果有相同的TextItem，比如Title相同的话，就会发生和大家相同的情况。我是通过如下操作解决的。

1. 我参考了其他人的操作：

final items = ['Hello'].map((it) => TextItem(it))
AppFlowyGroupData(
   id: 'one',
   name: 'One',
   items: List<AppFlowyGroupItem>.from(items),
);

我修改了之后，发现其实并不管用。然后，我查看了TextItem的get函数，然后进行了如下操作：
2. 我修改了TextItem

  @override
  String get id => "${s}:${Random().nextInt(100)}";

我在id后面加了一个随机数，目的是在相同Title下，也能获取到不同的id。

最后，我发现操作2是有效的。