Trying to create animated list but not sure how to get listKey from another script file? - flutter

Question

I am trying to make my list animated, so when i delete task it plays animation. I watched few tutorials however i am not sure how to implement this into my code because they had the animatedlist and void deleteitem in the same script, where i am having in 2 different one.
Here is my code from the task_data script file
void removeItem(Task task) {
//removedTask = task;
final item = _tasks.remove(task);
listKey.currentState!.removeItem(
task,
(context, animation) => TaskTile(
//taskTitle: task.name,
//isChecked: task.isDone,
//checkboxCallback: (checkboxState) {
//taskData.updateTask(task);
taskTitle: task.name,
isChecked: task.isDone,
animation: animation, checkboxCallback: (bool) {},
longPressCallback: () {},
));
notifyListeners();
saveData();
}
Here is my code from task_tile script
class TaskTile extends StatelessWidget {
final bool isChecked;
final String taskTitle;
final Function(bool?) checkboxCallback;
final VoidCallback longPressCallback;
final Animation<double> animation;
TaskTile({
required this.isChecked,
required this.taskTitle,
required this.checkboxCallback,
required this.longPressCallback,
required this.animation,
});
And here is my code from tasks_list script file
#override
Widget build(BuildContext context) {
return Consumer<TaskData>(
builder: (context, taskData, child) {
return AnimatedList(
key: _listKey,
initialItemCount: taskData.tasks.length,
itemBuilder: (context, index, animation) {
return TaskTile(
animation: animation,
taskTitle: taskData.tasks[index].name,
//isChecked: Provider.of<TaskData>(context).tasks[index].isDone,
//Provider.of<TaskData>(context).tasks = task_data. we would use LHS when we did not wrap with Consumer
isChecked: taskData.tasks[index].isDone,
checkboxCallback: (checkboxState) {
HapticFeedback.mediumImpact();
taskData.updateTask(taskData.tasks[index]);
},
longPressCallback: () {
ScaffoldMessenger.of(context).showSnackBar(snackBar(taskData));
taskData.deleteTask(taskData.tasks[index]);
HapticFeedback.heavyImpact();
},
);
},
//itemCount: taskData.taskCount,
);
},
);
Would really appreciate if someone can help me with this!
EDIT
--- I am getting this error right now "The argument type 'Task' can't be assigned to the parameter type 'int'."
on the actual screen it displays red box range error and I'm not sure how to fix those

Answer 1

Use it as a global key to access the keys from other classes
import 'package:flutter/material.dart';
void main() {
runApp(MyApp());
}
//Create it as Global key
final myListKey = GlobalKey<AnimatedListState>();
class MyApp extends StatelessWidget {
#override
Widget build(BuildContext context) {
return MaterialApp(
title: 'Flutter Demo',
theme: ThemeData(
primarySwatch: Colors.blue,
),
home: MyHomePage(title: 'Flutter Demo Home Page'),
);
}
}
class MyHomePage extends StatefulWidget {
MyHomePage({Key? key, required this.title}) : super(key: key);
final String title;
#override
_MyHomePageState createState() => _MyHomePageState();
}
class _MyHomePageState extends State<MyHomePage> {
final widgets = [
Container(color: Colors.red),
Container(color: Colors.green),
Container(color: Colors.yellow),
];
int currentIndex = 0;
#override
void initState() {
super.initState();
}
#override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: Text(widget.title),
),
body: AnimatedList(
key: myListKey,
initialItemCount: widgets.length,
itemBuilder: (_, index, animation) {
return Container(
height: 100,
child: widgets[index],
);
},
),
);
}
}