Thank you, everyone, for your help. In the end, what was bothering me was that when changing pages, the entire page transitioned in a weird way, and I wanted the app bar to remain the same while the page changed.

All I did was simply modify the animation of the page transitions.

Here is a code example:

Function to move to another page:

onTap: () {
  Navigator.push(
    context,
    PageRouteBuilder(
      pageBuilder: (context, animation, secondaryAnimation) =>
          UserInfoPage(data: 'Hello from Home Page!'),
      transitionsBuilder:
          (context, animation, secondaryAnimation, child) {
        return FadeTransition(opacity: animation, child: child);
      },
    ),
  );
},

To add the back button and prevent the app bar from transitioning weirdly, all I did was move the title to the center:

import 'package:flutter/material.dart';

class UserAppBar extends StatelessWidget implements PreferredSizeWidget {
  @override
  final Size preferredSize;

  // Constructor to allow custom height if needed
  UserAppBar({super.key, this.customHeight = kToolbarHeight})
      : preferredSize = Size.fromHeight(customHeight),
        userIconHeight = customHeight * 0.75;

  final double customHeight;
  final double userIconHeight;

  @override
  Widget build(BuildContext context) {
    return AppBar(
      backgroundColor: Colors.black,
      centerTitle: true,
      title: const Text(
        "Heyo",
        style: TextStyle(
            color: Colors.white,
            fontWeight: FontWeight.bold,
            fontStyle: FontStyle.italic),
      ),
      actions: [
        IconButton(
          onPressed: () {},
          icon: ClipOval(
              child: Image.asset(
            'assets/icons/profile-pic.jpg',
            width: userIconHeight,
            height: userIconHeight,
            fit: BoxFit.cover,
          )),
        )
      ],
    );
  }
}