Flutter Stacked Avatars with animation

stacked_avatars.dart

import 'package:flutter/material.dart';

class StackedAvatars extends StatefulWidget {
  StackedAvatars({Key? key}) : super(key: key);

  @override
  State<StackedAvatars> createState() => _StackedAvatarsState();
}

class _StackedAvatarsState extends State<StackedAvatars>
    with SingleTickerProviderStateMixin {
  final avatarUrls = [
    'https://pbs.twimg.com/profile_images/1461226181580230659/v71kw04V_400x400.jpg',
    'https://pbs.twimg.com/profile_images/1450840619132260357/r9rdJtIp_400x400.jpg',
    'https://pbs.twimg.com/profile_images/1394308446514679808/SLiABcML_400x400.jpg',
    'https://pbs.twimg.com/profile_images/991832743439994880/km5_AHDq_400x400.jpg',
  ];

  final avatarWidth = 40.0;
  final visiblePercent = 0.55;

  bool expanded = false;
  int tappedIndex = -1;

  @override
  Widget build(BuildContext context) {
    final leftBase = expanded ? avatarWidth : (avatarWidth * visiblePercent);
    return Scaffold(
      backgroundColor: Color(0xFF1D1D25),
      body: Padding(
        padding: const EdgeInsets.all(8.0),
        child: Row(
          children: [
            Expanded(
              child: Container(
                alignment: Alignment.center,
                child: Column(
                  mainAxisAlignment: MainAxisAlignment.center,
                  crossAxisAlignment: CrossAxisAlignment.start,
                  children: [
                    Container(
                      height: avatarWidth * 1.2,
                      child: Stack(
                        children: List.generate(
                          avatarUrls.length,
                          (index) => AnimatedPositioned(
                            duration: Duration(milliseconds: 400),
                            curve: Curves.easeOut,
                            left: leftBase * index,
                            top: index == tappedIndex ? 0 : avatarWidth * 0.2,
                            child: Stack(
                              children: [
                                CircleAvatar(
                                  backgroundImage:
                                      NetworkImage(avatarUrls[index]),
                                ),
                                Positioned.fill(
                                    child: Material(
                                  color: Colors.transparent,
                                  child: InkWell(
                                      customBorder: CircleBorder(),
                                      onTap: () => setState(() {
                                            expanded
                                                ? tappedIndex = index
                                                : expanded = !expanded;
                                          })),
                                ))
                              ],
                            ),
                          ),
                        ),
                      ),
                    ),
                    IconButton(
                        onPressed: () => setState(() {
                              expanded = false;
                              tappedIndex = -1;
                            }),
                        icon: expanded
                            ? Icon(
                                Icons.close,
                                color: Colors.white,
                              )
                            : Container())
                  ],
                ),
              ),
            ),
          ],
        ),
      ),
    );
  }
}