Create an app with static app bar and a back button on the top left

Question

I am new to flutter and I am trying to create a simple app with a "static" that doesn't change between pages. I want also that the app bar will have a back button the page is changed, how can i keep truck of that.

I have a created a widget for the app bar and tried making it statefull widget and save the Navigator state so that when it updates i will update my appBar widget.

I will add the code for how i change pages as well:

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);
      },
    ),
  );
},

Thank you for your help guys, I am here to learn :)

Answer 1

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,
          )),
        )
      ],
    );
  }
}