Custom BackButton in AppBar is Shown Even When the Screen Cannot Pop

Question

I'm facing an issue with adding a custom leading back button to AppBar. Adding the button was the easy part, but when I added it, it was displayed all the time. It does not matter if there is a screen to go back to or not, it shows the custom back button.

This problem does not occur with the default back button of AppBar.

I added this logic, to check if the current screen can pop or not to decide if the button should be displayed or not. As I'm using persistent_bottom_nav_bar for bottom bar navigation and Get for routing, I had to check for both of these navigators.

AppBar(
       backgroundColor: Colors.transparent,
       automaticallyImplyLeading: true,
       toolbarHeight: 70.0,
       elevation: 0.0,
       leading:
         Navigator.canPop(context) || Get.key.currentState!.canPop() ? ClipOval(
              child: Material(
                color: Theme.of(context).primaryColor,
                child: InkWell(
                  // Splash color
                  onTap: () {
                    if (Navigator.canPop(context)) {
                      Navigator.pop(context);
                    } else if (Get.key.currentState!.canPop()) {
                      // if (isBackControl) {
                      Get.back();
                      // }
                    }
                  },
                  child: const SizedBox(
                      width: 40,
                      height: 40,
                      child: Icon(
                        Icons.arrow_back_ios_new_outlined,
                        color: Colors.white,
                        size: 25.0,
                      )),
                ),
              ),
            ): SizedBox(),
    )

This technique works fine, but I was facing a weird issue.

if I had a screen Screen A on the bottom navigation page, I expect it to not show the back button and it worked as expected, but when I push the same Screen A from another screen Screen B and then navigate back to Screen A that's bound to the bottom navigation, it starting showing the back button.

You can get an understanding of routing in my app through this.

Persistent Bottom Navigation Bar

Screen A (No Back Button)✅
Screen B (No Back Button)✅
Screen C (No Back Button)✅

Pushing another instance of Screen A from Screen B,

Pushed Screen A (Shows Back Button)✅

Then navigate back to Screen B and then to Screen A using the bottom navigation.

Persistent Bottom Navigation Bar

Screen A (Shows Back Button)❌
Screen B (No Back Button)✅
Screen C (No Back Button)✅

❌ Unexpected Behaviour

✅ Expected Behaviour

I could not trace the cause of this issue, so I decided to go with the default back button, but I want to define a custom back button while keeping it optional, and I'm struggling to make that work.

score 0 · Answer 1 · answered May 22 '23 at 06:12

Create a global navigator key in a separate dart file.

my_navigator.dart

import 'package:flutter/material.dart';

class MyNavigator {
  static GlobalKey<NavigatorState> navigatorKey = GlobalKey<NavigatorState>();
}

set the globalkey as the default navigator key for your GetMaterialApp

main.dart

import 'my_navigator.dart';
...
  @override
  Widget build(BuildContext context) {
    return GetMaterialApp(
      navigatorKey: MyNavigator.navigatorKey,
      ...
    );
  }

now in your AppBar, use

MyNavigator.navigatorKey.currentState!.canPop()

instead of

Navigator.canPop(context)

Custom BackButton in AppBar is Shown Even When the Screen Cannot Pop

1 Answers1