Анимация в флаттере. ПРОВЕРЬТЕ ЭТО ⇐ Android

[Anonymous]

Я застрял в реализации анимации как это видео Несколько дней
Я использую AnimatedList и переход между слайдами, но это не то, что мне нужно
Итак. что я сделал:
посмотрите это
Код:

Код: Выделить всё

 BlocBuilder(
builder: (context, state) {
return Expanded(
child: Stack(
alignment: Alignment.topRight,
children: [
Scrollbar(
trackVisibility: true,
thickness: 6,
radius: const Radius.circular(59),
thumbVisibility: true,
child: AnimatedList(
controller: ScrollController(),
key: _listKey,
padding: const EdgeInsets.only(top: 30),
shrinkWrap: true,
itemBuilder: (context, index, animation) {
final exerciseItem = state.exerciseList[index];

return Container(
margin: const EdgeInsets.only(right: 111),
child: state.selectedExerciseList.lastOrNull ==
exerciseItem
? SlideTransition(
position: _offsetAnimation,
child: item(exerciseItem, state, index,
animation),
)
:

item(exerciseItem, state, index, animation));
},
initialItemCount: state.exerciseList.length,
),
),
Container(
margin: const EdgeInsets.only(right: 0, left: 0),
child: const Text("select"),
),
Container(
alignment: Alignment.topCenter,
width: 105,
child: ListView.separated(
padding: const EdgeInsets.only(top: 30),
itemCount: state.selectedExerciseList.length,
shrinkWrap: true,
itemBuilder: (context, index) {
ExerciseModel selectedExercise =
state.selectedExerciseList[index];

return Container(
margin: const EdgeInsets.only(right: 15),
width: 100,
child: ClipRRect(
borderRadius: BorderRadius.circular(8),
child:
Image.asset("assets/images/images.jpeg")),
);
},
separatorBuilder: (context, index) {
return Container(
height: 16,
);
},
),
),
],
),
);
},
),
],
),
);
}

Widget item(ExerciseModel exerciseItem, AppState state, int index,
Animation  animation) {
return SlideTransition(
position: animation
.drive(Tween(begin: const Offset(1, -1), end: const Offset(0, 0))),
child: Column(
children: [
Padding(
padding: const EdgeInsets.only(right: 30, left: 20),
child: Row(
children: [
Container(
margin: const EdgeInsets.only(right: 15),
width: 100,
child: ClipRRect(
borderRadius: BorderRadius.circular(8),
child: Image.asset("assets/images/images.jpeg")),
),
Expanded(
child: Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: [
Text(exerciseItem.title),
Container(
margin: const EdgeInsets.only(top: 4),
height: 25,
child: ListView.separated(
scrollDirection: Axis.horizontal,
itemCount: exerciseItem.exerciseCategories.length,
itemBuilder: (context, index) {
return Container(
alignment: Alignment.center,
margin: const EdgeInsets.only(
right: 5,
),
decoration: BoxDecoration(
borderRadius: BorderRadius.circular(8),
border: Border.all(color: Colors.grey),
),
child: Padding(
padding:
const EdgeInsets.symmetric(horizontal: 4),
child: Text(
exerciseItem.exerciseCategories[index],
style: const TextStyle(
color: Colors.black, fontSize: 12),
),
),
);
},
separatorBuilder: (BuildContext context, int index) {
return Container(
width: 0,
);
},
),
)
],
),
),
Checkbox(
value: state.selectedExerciseList.contains(exerciseItem),
onChanged: (value) {
context
.read()
.addSelectedItemToList(index, exerciseItem);
_listKey.currentState!.removeItem(
duration: const Duration(milliseconds: 800),
index,
(context, animation) => Container(
margin: const EdgeInsets.only(right: 111),
child:
item(exerciseItem, state, index, animation)));

//  _controller.reset();
//        _controller.forward(from: 0.0);
},
),
],
),
),
Container(
margin:
const EdgeInsets.only(right: 20, left: 20, top: 12, bottom: 12),
decoration: BoxDecoration(
borderRadius: BorderRadius.circular(12),
border: Border.all(color: Colors.grey)),
)
],
),
);

Может быть, я реализовал это неправильно, вы можете сделать это по-своему.
Я использую 2 списка с правой и левой стороны
Я использую два представления списка: справа и слева
p>
Будем признательны за любые комментарии и особенно за наши ответы

Подробнее здесь: https://stackoverflow.com/questions/783 ... eck-it-out