Search code examples
flutternavigationappbar

back button inside AppBar showing black screen in flutter


I have bottom tab navigator that contains of A and B screens, inside B screen I have widget that navigate to C page and inside C page I want to add back arrow to go back to previous screen (B screen), so... I have simple widget that the code looks like this

@override
  Widget build(BuildContext context) {
    return SafeArea(
        child: Scaffold(
            resizeToAvoidBottomPadding: false,
            appBar: AppBar(
              leading: IconButton(
                icon: Icon(Icons.arrow_back),
                onPressed: () => Navigator.of(context).pop(),
              ),
              title: Text("XXX"),
              centerTitle: true,
            ),
            body: detail()));
  }

the problem is whenever I click back arrow.. it turns to black screen... I don't get any idea what the problem is... so is there a way to go to my previous screen? and this is how I ndo navigate from B screen to C page

InkWell(
                      onTap: () {Navigator.of(context).pushReplacement(MaterialPageRoute(
                            builder: (context) => new NextScreen(check: values)));
                      },
                      child: Text(
                        "Next...",
                        style: TextStyle(
                          fontSize: 13.0,
                        ),
                      ),
                    )

Solution

  • The reason why you see a blank screen is because you navigated using pushReplacement. What pushReplacement does it that it will navigate to the next screen without stacking itself to the route meaning that it will make the app forget that the last screen was your screen B. Try using Navigator.push() instead.
    Here is an example:

    onPressed: () {
      Navigator.push(
        context,
        MaterialPageRoute(builder: (context) => ScreenC()),
      );
    }