Flutter: AppBar bottom overlapping AppBar ToolBar

I have created a custom AppBar widget class to share throughout my project. However, when I try to pass in a TabBar for the the bottom property, it tend to overlap or shrink my toolbar size.

Here's the code for my custom AppBar widget class:

class CustomAppBar extends StatefulWidget implements PreferredSizeWidget {
  final String title;
  final Widget? leading;
  final List<Widget>? actions;
  final PreferredSizeWidget? bottom;

  const CustomAppBar(this.title,
      {this.leading, this.actions, this.bottom, super.key});

  @override
  Size get preferredSize => const Size.fromHeight(kToolbarHeight);

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

class _CustomAppBarState extends State<CustomAppBar> {
  @override
  Widget build(BuildContext context) {
    return AppBar(
        title: Text(widget.title),
        centerTitle: true,
        elevation: 0,
        leading: widget.leading,
        actions: widget.actions,
        bottom: widget.bottom);
  }
}

I have tried setting the toolbarheight of the appbar but nothing changes

You have to include the bottom widget's height to get the correct preferredSize.

@override
Size get preferredSize => Size.fromHeight(kToolbarHeight + (bottom?.preferredSize.height ?? 0));