android – Flutter WebView and Again Button with PopScope displaying a black display

I’m engaged on a Flutter software that makes use of WebView to load a sure webpage. I need to use the again button such that if a person goes to a distinct web page of the web site from inside the WebView, it navigates to the earlier web page, similar to a browser, in any other case it goes to the house display of the app. The WebView is on Page3, which is on index 2. But when the person cannot return to some other pages contained in the WebView it ought to take the person to Page1, which is the house display for the app.

I’ve applied PopScope. Nevertheless, on urgent the again button I get a black display on the app as a substitute.

The next are my codes.

WebView Web page

@override
  Widget construct(BuildContext context) {
    return PopScope(
      canPop: true,
      onPopInvokedWithResult: (didPop, consequence) async {
        if (await controller.canGoBack()) {
          await controller.goBack();
        } else {
          SystemNavigator.pop();
        }
      },
      baby: Scaffold(
        backgroundColor: const Colour(0xFF000000),
        physique: Padding(
          padding: EdgeInsets.solely(
              backside: MediaQuery.of(context).measurement.peak * 0.01),
          baby: SafeArea(
            baby: WebViewWidget(
              controller: controller,
            ),
          ),
        ),
      ),
    );
  }

navbar_widget.dart

class BottomNavbar extends StatelessWidget {
  const BottomNavbar({tremendous.key});

  @override
  Widget construct(BuildContext context) {
    return GetBuilder(
      builder: (controller) => Scaffold(
        extendBody: true,
        appBar: AppbarWidget(tabIndex: controller.tabIndex),
        bottomNavigationBar: CurvedNavigationBar(
          index: controller.tabIndex,
          onTap: (val) {
            controller.updateIndex(val);
          },
          gadgets: const [
            Icon(Icons.page_1),
            Icon(Icons.page_2),
            Icon(Icons.page_3),
            Icon(Icons.page_4),
            Icon(Icons.page_5),
          ],
        ),
        physique: Padding(
          padding:
              EdgeInsets.solely(high: MediaQuery.of(context).measurement.peak * 0.018),
          baby: SafeArea(
            backside: false,
            baby: IndexedStack(
              index: controller.tabIndex,
              youngsters: const [
                PageOne(),
                PageTwo(),
                PageThree(),
                PageFour(),
                PageFive(),
              ],
            ),
          ),
        ),
      ),
    );
  }
}