Flutter AppBar title glitches in animation reverse

Question

So, I'm building an app using Flutter, in the home page, I want to have a bigger AppBar, while in others, AppBar goes back to regular size, I managed to achieve this thanks to Dhafin Rayhan's answer on my previous question.

Here's a code snippet from what I'm doing:

CustomAppBar class:

import 'package:flutter/material.dart';

class CustomAppBar extends StatefulWidget implements PreferredSizeWidget{
  double height;
  String title;
  Color color;
  Color textColor;
  BuildContext context;

  CustomAppBar(this.height, this.title, this.color, this.textColor, this.context, {super.key});

  @override
  State<CustomAppBar> createState() => _CustomAppBarState();

  @override
  // TODO: implement preferredSize
  Size get preferredSize => Size.fromHeight(MediaQuery.of(context).size.height * 0.22);
}

class _CustomAppBarState extends State<CustomAppBar> {
  @override
  Widget build(BuildContext context) {
    return PreferredSize(
      preferredSize: Size.fromHeight(widget.height),
      child: AnimatedContainer(
        padding: const EdgeInsets.only(bottom: 10),
        duration: const Duration(milliseconds: 1000),
        curve: Curves.decelerate,
        height: widget.height,
        child: AppBar(
          toolbarHeight: widget.height,
          backgroundColor: Theme.of(context).colorScheme.inversePrimary,
          elevation: 5,
          shape: RoundedRectangleBorder(
            borderRadius: BorderRadius.only(
                bottomRight: Radius.circular(30), bottomLeft: Radius.circular(30)),
          ),
          shadowColor: Colors.black,
          title: SizedBox(
            height: widget.height,
            child: Center(
              child: Text(
                widget.title,
                textAlign: TextAlign.center,
                style: const TextStyle(
                  fontSize: 30,
                  color: Colors.white,
                  fontWeight: FontWeight.bold,
                ),
              ),
            ),
          ),
        ),

      ),
    );
  }

}

Then in the Scaffold, I assign the AppBar like this:

appBar: CustomAppBar(height, getTitle(currentIndex), Colors.purple, Colors.white, context),

But I end up with an animation like this:

Notice how the title text jumps back to its position (instead of animating to it) when clicking on Home 2 tab.

Answer 1

Almost same as the previous question, it was solved by changing the height to the maximum height possible in the toolbarHeight.

This one:

toolbarHeight: MediaQuery.of(context).size.height * 0.22,

In the class:

class _CustomAppBarState extends State<CustomAppBar> {
  @override
  Widget build(BuildContext context) {
    return PreferredSize(
      preferredSize: Size.fromHeight(widget.height),
      child: AnimatedContainer(
        padding: const EdgeInsets.only(bottom: 10),
        duration: const Duration(milliseconds: 1000),
        curve: Curves.decelerate,
        height: widget.height,
        child: AppBar(
          toolbarHeight: MediaQuery.of(context).size.height * 0.22,
          backgroundColor: Theme.of(context).colorScheme.inversePrimary,
          elevation: 5,
          shape: const RoundedRectangleBorder(
            borderRadius: BorderRadius.only(
                bottomRight: Radius.circular(30), bottomLeft: Radius.circular(30)),
          ),
          shadowColor: Colors.black,
          title: SizedBox(
            height: widget.height,
            child: Center(
              child: Text(
                widget.title,
                textAlign: TextAlign.center,
                style: const TextStyle(
                  fontSize: 30,
                  color: Colors.white,
                  fontWeight: FontWeight.bold,
                ),
              ),
            ),
          ),
        ),

      ),
    );
  }

This is how it looks now: