Flutter Back Button and Show Exit Confirm in Flutter App

Question

I am working on a webview app . there is a functionality to show an alert on exit app but it is show on every page back of my web view . i want to show the exit dialog if the web view has the last page but i want to the call that from my home.dart file because i dont want to call the alert on every page back

here is my home.dart file and web_view.dart file

import 'package:connectivity_plus/connectivity_plus.dart';
import 'package:flutter/material.dart';
import 'package:flutter/rendering.dart';
import 'package:google_mobile_ads/google_mobile_ads.dart';
import 'package:iconly/iconly.dart';
import 'package:ionicons/ionicons.dart';
import 'package:onesignal_flutter/onesignal_flutter.dart';
import 'package:shared_preferences/shared_preferences.dart';
import 'package:websway/views/settings_view.dart';
import 'package:websway/views/web_view.dart';
import 'package:websway/widgets/genuine_widgets.dart';
import '../constants.dart';
import 'no_connection.dart';
import 'onboard_view.dart';
import 'splash_view.dart';

class HomeXView extends StatefulWidget {
  HomeXView({super.key});

  @override
  State<HomeXView> createState() => HomeXViewState();
}

class HomeXViewState extends State<HomeXView> {
    late WebXViewState webXViewState;
      bool isOnLastPage = false;


  void initState() {
    super.initState();
    if (Constants.showAds && Constants.showBannerAds) {
      initBannerAds();
    }
    
    // configOneSignal();
  }

  bool isAdLoaded = false;
  late BannerAd bannerAd;
  initBannerAds() {
    bannerAd = BannerAd(
        size: AdSize.banner,
        adUnitId: Constants.bannerAdId,
        listener: BannerAdListener(onAdLoaded: (ad) {
          var adstring = ad.toString;
          //  print('ayush the error is $adstring' );
          setState(() {
            isAdLoaded = true;
          });
        }, onAdFailedToLoad: (ad, error) {
          ad.dispose();
          print('ayush the error is $error');
        }),
        request: const AdRequest());
    bannerAd.load();
  }

  void configOneSignal() {
    OneSignal.initialize(Constants.oneSignalAppId);
  }

  Future<bool> _onBackPressed(BuildContext context) async {
    bool exitApp = await showDialog(
        context: context,
        builder: (BuildContext context) {
          return ExitApp(context);
        });
    return exitApp ?? false;
  }

   Future<bool> showExitPopup() async {
      return await showDialog( //show confirm dialogue 
        //the return value will be from "Yes" or "No" options
        context: context,
        builder: (context) => AlertDialog(
          title: Text('Exit App'),
          content: Text('Do you want to exit an App?'),
          actions:[
            ElevatedButton(
              onPressed: () => Navigator.of(context).pop(false),
               //return false when click on "NO"
              child:Text('No'),
            ),

            ElevatedButton(
              onPressed: () => Navigator.of(context).pop(true), 
              //return true when click on "Yes"
              child:Text('Yes'),
            ),

          ],
        ),
      )??false; //if showDialouge had returned null, then return false
    }

  int _selectIndex = 0;

  @override
  Widget build(BuildContext context) {

    return WillPopScope (
        onWillPop: () => showExitPopup(),
        child: StreamBuilder(
          stream: Connectivity().onConnectivityChanged,
          builder: (context, AsyncSnapshot<ConnectivityResult> snapshot) {
            if (snapshot.hasData) {
              if (snapshot.data != ConnectivityResult.none) {
                return Scaffold(
                    backgroundColor: Theme.of(context).backgroundColor,
                    extendBody: false,
                    appBar: Constants.appBar == true ? AppBar() : null,
                    body: SafeArea(
                        child: IndexedStack(
                      index: _selectIndex,
                      children: [WebXView(), SettingXView()],
                    )),
                    bottomNavigationBar: Column(
                      mainAxisSize: MainAxisSize.min,
                      children: [
                        if (Constants.showAds == true &&
                            Constants.showBannerAds)
                          ShowBannerAd(),
                        if (Constants.ShowNavBar == true) ...[
                          NavigationBar(
                              elevation: 0,
                              height: 65,
                              onDestinationSelected: (value) {
                                setState(() {
                                  _selectIndex = value;
                                });
                              },
                              selectedIndex: _selectIndex,
                              destinations: [
                                NavigationDestination(
                                    icon: Icon(IconlyBroken.home),
                                    label: 'Home'),
                                NavigationDestination(
                                    icon: Icon(IconlyBroken.setting),
                                    label: 'Settings'),
                              ])
                        ]
                      ],
                    ));
              } else {
                return NoXConnection();
              }
            }
            return Container();
          },
        ));
  }

  Widget SkullAd() {
    return Container(
      height: 80,
      decoration: BoxDecoration(
        color: Colors.grey,
      ),
      child: Center(child: Text("ADS")),
    );
  }

  Widget ShowBannerAd() {
    return isAdLoaded == true
        ? SizedBox(
            height: bannerAd.size.height.toDouble(),
            width: bannerAd.size.width.toDouble(),
            child: AdWidget(ad: bannerAd),
          )
        : SkullAd();
  }
}

import 'package:flutter/material.dart';
import 'package:flutter_inappwebview/flutter_inappwebview.dart';
import 'package:websway/required/theme.dart';

import '../constants.dart';

class WebXView extends StatefulWidget {
  WebXView({super.key});

  @override
  State<WebXView> createState() => WebXViewState();
}

class WebXViewState extends State<WebXView> {
  late InAppWebViewController webController;
  late PullToRefreshController refreshController;
  @override
  void initState() {
    // TODO: implement initState
    super.initState();
    refreshController = PullToRefreshController(
        onRefresh: () => webController!.reload(),
        options: PullToRefreshOptions(
            color: Colors.white,
            backgroundColor: WebSwayXTheme.lightColorScheme.primary));
  }

  InAppWebViewGroupOptions options = InAppWebViewGroupOptions(
      crossPlatform: InAppWebViewOptions(
          useShouldOverrideUrlLoading: true,
          mediaPlaybackRequiresUserGesture: false,
          useOnDownloadStart: true,
          javaScriptEnabled: true,
          javaScriptCanOpenWindowsAutomatically: true,
          cacheEnabled: true,
          supportZoom: true,
          userAgent:
              "Mozilla/5.0 (Linux; Android 9; LG-H870 Build/PKQ1.190522.001) AppleWebKit/537.36 (KHTML, like Gecko) Version/4.0 Chrome/83.0.4103.106 Mobile Safari/537.36",
          verticalScrollBarEnabled: false,
          horizontalScrollBarEnabled: false,
          transparentBackground: true,
          allowFileAccessFromFileURLs: true,
          allowUniversalAccessFromFileURLs: true),
      android: AndroidInAppWebViewOptions(
        thirdPartyCookiesEnabled: true,
        allowFileAccess: true,
      ),
      ios: IOSInAppWebViewOptions(
        allowsInlineMediaPlayback: true,
      ));

  var isLoading = true;
  var url = Constants.main_url;
  @override
  Widget build(BuildContext context) {
    return WillPopScope(
      onWillPop: () async {
        var isLastPage = await webController.canGoBack();
        if (isLastPage) {
          webController.goBack();
          return false;
        }
        return true;
      },
      child: SafeArea(
        child: Expanded(
            child: Stack(alignment: Alignment.center, children: [
          InAppWebView(
              pullToRefreshController: refreshController,
              onWebViewCreated: ((controller) => webController = controller),
              initialUrlRequest: URLRequest(url: Uri.parse(url)),
              onLoadStart: (controller, url) {
                setState(() {
                  isLoading = true;
                });
              },
              onLoadStop: (controller, url) {
                refreshController.endRefreshing();
                setState(() {
                  isLoading = false;
                });
              }),
          Visibility(
              visible: isLoading, child: CircularProgressIndicator.adaptive())
        ])),
      ),
    );
  }
}

i tried many things but not a single thing works

Answer 1

// Inside WebXView class

return WillPopScope(
  onWillPop: () async {
    var isLastPage = await webController.canGoBack();
    if (isLastPage) {
      webController.goBack();
      return false;
    } else {
      widget.onLastPage(); // Trigger callback to HomeXViewState
      return true;
    }
  },
  child: SafeArea(
    // Other code...
  ),
);

// Inside HomeXViewState class

 bool isOnLastPage = false; // Flag to track the last page in the WebView

  Widget build(BuildContext context) {
    return WillPopScope(
      onWillPop: () async {
        // Trigger the exit dialog only when isOnLastPage is true
        if (isOnLastPage) {
          return showExitPopup();
        } else {
          return true; // Allow back navigation without showing the exit dialog
        }
      },
      child: StreamBuilder(
        // Other code...
      ),
    );
  }

  Future<bool> showExitPopup() async {
    return await showDialog(
      // ... Your exit dialog code
    ) ?? false;
  }

  void webXViewCallback() {
    setState(() {
      isOnLastPage = true;
    });
  }
}

In this example:

The WebXView class handles the back navigation within the WebView. When attempting to go back, it checks if it's on the last page of the WebView. If it is, it triggers a callback (widget.onLastPage()) which is received by the HomeXViewState.

In the HomeXViewState, the WillPopScope checks the isOnLastPage flag to decide whether to show the exit dialog or allow back navigation. The webXViewCallback method updates the isOnLastPage flag when triggered by the callback from the WebXView.

Adjust the code based on your specific exit dialog requirements and how you handle the callback in the HomeXViewState. Use this logic as a starting point and adapt it according to your exact use case.