[Flutter] How to change text color when dragging is occurring in ReorderableListView

expected behavior: when a card is being re-arranged its text/icon color should be black. once the re-arranging is complete it should go back to white.

issue: the text is not changing when i re-arrange the card

note: I can see the following changing in the ui: Text("aaa: ${draggedItemIndex==1}",style: TextStyle(color: Colors.white),),

code::


I can see the text changing to true when i move the second item on the list, why is the color for the card not changing?
code:

import 'package:flutter/material.dart';
import 'package:flutter_riverpod/flutter_riverpod.dart';
import '../../../../../core/constants/icons.dart';
import '../../../../../core/notifiers/side_navigator_notifier.dart';
import '../../../../../core/providers/side_navigator_provider.dart';

class FavoritesModule extends ConsumerStatefulWidget {
const FavoritesModule({super.key});

@override
_FavoritesModuleState createState() => _FavoritesModuleState();
}

class _FavoritesModuleState extends ConsumerState<FavoritesModule> {
late int draggedItemIndex = -1;
List<Map<String, dynamic>> historyItems = [
{
'sys_id': '1',
'sys_description': 'Form/Table/Employee',
'sys_url': 'https://example.com/employee',
'sys_title': 'Employee Records',
'sys_icon': 'favorite',
},
{
'sys_id': '2',
'sys_description': 'Form/Table/Department',
'sys_url': 'https://example.com/department',
'sys_title': 'Department Info',
'sys_icon': 'business',
},
{
'sys_id': '3',
'sys_description': 'View/Table/Salary',
'sys_url': 'https://example.com/salary',
'sys_title': 'Salary Information',
'sys_icon': 'attach_money',
},
{
'sys_id': '4',
'sys_description': 'Form/Table/Leave',
'sys_url': 'https://example.com/leave',
'sys_title': 'Leave Requests',
'sys_icon': 'calendar_today',
},
];

@override
Widget build(BuildContext context) {
print("BUILD");
// final notifier = ref.watch(side_navigator_provider);

// if (notifier.mode == SideNavigatorMode.favorites) {
return Column(
children: [
Text("aaa: ${draggedItemIndex==1}",style: TextStyle(color: Colors.white),),
Expanded(
child: ReorderableListView(
onReorderStart: (int index) {
setState(() {
draggedItemIndex = index;
});
},
onReorderEnd: (int? index) {
setState(() {
draggedItemIndex = -1;
});
},
onReorder: (int oldIndex, int newIndex) {
final item = historyItems.removeAt(oldIndex);
historyItems.insert(newIndex, item);
setState(() {});
},
children: [
for (var i = 0; i < historyItems.length; i++)
FavoriteCard(
key: ValueKey(historyItems['sys_id']),
data: extractData(historyItems['sys_description']),
sysUrl: historyItems['sys_url'],
sysTitle: historyItems['sys_title'],
sysIcon: historyItems['sys_icon'],
isBeingDragged: draggedItemIndex == i,
),
],
),
),
],
);
// }

return const SizedBox.shrink();
}

Map<String, String> extractData(String sysDescription) {
List<String> datas = sysDescription.split("/");
Map<String, String> output = {
"ui_type": datas[0],
"table_name": datas[1],
};
if (datas.length == 3) {
output['view'] = datas[2];
}
return output;
}
}

class FavoriteCard extends StatefulWidget {
final Map<String, String> data;
final String sysUrl;
final String sysTitle;
final String sysIcon;
final bool isBeingDragged;

FavoriteCard({
super.key,
required this.isBeingDragged,
required this.data,
required this.sysUrl,
required this.sysTitle,
required this.sysIcon,
});

@override
FavoriteCardState createState() => FavoriteCardState();
}

class FavoriteCardState extends State<FavoriteCard> {
@override
Widget build(BuildContext context) {
final icon = ICON_DICTIONARY[widget.sysIcon] ?? Icons.star;

return GestureDetector(
onTap: () {
// Handle navigation to sysUrl or other functionality
},
child: Container(
color: Theme.of(context).colorScheme.primary,
child: ListTile(
leading: Icon(
icon,
color: widget.isBeingDragged ? Colors.black : Colors.white,
),
title: Text(
widget.sysTitle,
style: TextStyle(color: widget.isBeingDragged ? Colors.black : Colors.white),
),
subtitle: Text(
widget.data['table_name'] ?? '',
style: TextStyle(color: widget.isBeingDragged ? Colors.black : Colors.white),
),
),
),
);
}
}



I found this stack overflow that allows me to change the color of the background which would be sufficient but it solution didnt work for me.

Change DropdownButton choices text color and selected text

Continue reading...