Flutter animated sliver header

I am trying to create a profile header sliver that can animate.

If you consider above image, Section 1 is what we see in the fully expanded sliver, and Section 2 is what we want to see in pinned mode.

Now I would like transition to move the image - purple circle - to the side, shrink it slightly, and also move the name and the links.

I can achieve all of that but one thing: How to center them in the expanded view.

As I have to use transform to move widgets around, I cannot simply use a centring widget like column or center. And I didn't find a way to calculate the exact position to center the widget, as it needs the size of the widget, that I don't have.

Firstly I am using SliverPersistentHeaderDelegate and it provides shrinkOffset that will be used on linear interpolation(lerp method).

Then CompositedTransformTarget widget to follow the center widget.

On this example play with targetAnchor and followerAnchor and use t/shrinkOffset to maintain other animation.

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

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: CustomScrollView(
        slivers: [
          SliverPersistentHeader(
            delegate: MySliverPersistentHeaderDelegate(),
            pinned: true,
          ),
          SliverToBoxAdapter(
            child: SizedBox(
              height: 1333,
            ),
          )
        ],
      ),
    );
  }
}

class MySliverPersistentHeaderDelegate extends SliverPersistentHeaderDelegate {
  final LayerLink layerLink = LayerLink();
  @override
  Widget build(
      BuildContext context, double shrinkOffset, bool overlapsContent) {
    double t = shrinkOffset / maxExtent;

    return Material(
      color: Colors.cyanAccent.withOpacity(.2),
      child: Stack(
        children: [
          Align(
            alignment:
                Alignment.lerp(Alignment.center, Alignment.centerLeft, t)!,
            child: CompositedTransformTarget(
              link: layerLink,
              child: Padding(
                padding: const EdgeInsets.all(8.0),
                child: Container(
                  height: lerpDouble(100, kToolbarHeight - 10, t),
                  width: lerpDouble(100, kToolbarHeight - 10, t),
                  decoration: const ShapeDecoration(
                    shape: CircleBorder(),
                    color: Colors.deepPurple,
                  ),
                ),
              ),
            ),
          ),
          CompositedTransformFollower(
            link: layerLink,
            targetAnchor: Alignment.lerp(
                Alignment.bottomCenter, Alignment.centerRight, t)!,
            followerAnchor:
                Alignment.lerp(Alignment.topCenter, Alignment.centerLeft, t)!,
            child: Padding(
              padding: const EdgeInsets.all(8.0),
              child: Container(
                child: Column(
                  children: [Text("Sheikh")],
                ),
              ),
            ),
          ),
        ],
      ),
    );
  }

  @override
  double get maxExtent => kToolbarHeight * 6;

  @override
  double get minExtent => kToolbarHeight;

  @override
  bool shouldRebuild(covariant SliverPersistentHeaderDelegate oldDelegate) =>
      false;
}