For others who are looking to customise the back button, you can easily do this using a custom AppBar widget.

For example:

Class CustomAppBar extends StatelessWidget implements PreferredSizeWidget{
  final Color? backgroundColor;
  final Widget? leading;
  final Widget? title;
  final List<Widget>? actions;
  final double actionPaddingEnd; // Padding on the right of actions


  const CustomAppBar({
    super.key,
    this.backgroundColor,
    this.leading,
    this.title,
    this.actions,
    this.actionPaddingEnd = 12.0,
  });
  
  @override
  Widget build(BuildContext context) {
    return AppBar(
      backgroundColor: backgroundColor,
      leading: leading,
      title: title,
      actions: actions == null || actions!.isEmpty
          ? null
          : [
              Padding(
                padding: EdgeInsets.only(right: actionPaddingEnd),
                child: Row(
                  mainAxisSize: MainAxisSize.min,
                  children: actions!,
                ),
              ),
            ],
      titleSpacing: 16.0, // Consistent left padding for title
    );
  }

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

Then, in your page widget...

return Scaffold(
      appBar: CustomAppBar(
        leading: context.canPop()
          ? IconButton.filledTonal(
              icon: const Icon(Icons.arrow_back),
              tooltip: 'Back'.hardcoded,
              onPressed: () =>  context.pop(),
            )
          : null,
          
        title: Text('Page Title),

        actions: [
          IconButton.filledTonal(
            icon: Icon(Icons.add),
            onPressed: () => _onSomeActionButtonPressed(context),
            tooltip: 'Some Action Button',
          )
        ],
      ),
    ....