List Transitions

main.dart

import 'package:flutter/material.dart';

void main() {
  runApp(const MyApp());
}

class MyApp extends StatelessWidget {
  const MyApp({super.key});

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      debugShowCheckedModeBanner: false,
      home: AnimatedListTip(),
    );
  }
}



class AnimatedListTip extends StatelessWidget {
   AnimatedListTip({Key? key}) : super(key: key);
  final scrollController = ScrollController();

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: ListView.builder(
        controller: scrollController,
        itemCount: 20,
        itemBuilder: (context, index) {
          return AnimatedBuilder(
            animation: scrollController,
            builder: (context, child) {
              // Calculate the position of the item for the animation.
              double itemPositionOffset = index * 80.0;
              double difference = scrollController.offset - itemPositionOffset;

              // 80% the screen height plus the height of the box (which is 60 in this case).
              double centerScreen = MediaQuery.of(context).size.height * 0.8 + 60;

              // Translate values
              double translateY = 0.0;
              double translateX = 0.0;

              if (difference >  0) {
                translateY = 0; //(difference - (halfScreen - 80) ) / 4;
                translateX = (difference) / 2;
              } else if (difference < -centerScreen + 80) {
                translateY = 0; //(difference + halfScreen - 80) / 4;
                translateX = (difference + centerScreen - 80) / 2;
              }

              return Transform.translate(
                offset: Offset(translateX, translateY),
                child: Container(
                  height: 60,
                  margin: const EdgeInsets.all(10.0),
                  color: Colors.teal[100 * ((index % 9) + 1)],
                  child: Column(
                    crossAxisAlignment: CrossAxisAlignment.start,
                    children: [
                      Text('Difference: ${difference.toStringAsFixed(2)}'),
                      Text('Translate Y: ${translateY.toStringAsFixed(2)}'),
                      Text('Translate X: ${translateX.toStringAsFixed(2)}'),
                    ],
                  )
                ),
              );
            },
          );
        },
      ),
    );
  }
}