Flutter- WillPopScope not working on different WebView present in different tabs

884 views

Skip to first unread message

Yash Chandra verma

unread,

Aug 12, 2020, 4:25:21 AM8/12/20

to Flutter Development (flutter-dev)

Hello there,

I have made a flutter project in which I am facing issue with two pages.

Plugin used for two pages- https://pub.dev/packages/flutter_inappwebview

One Page that is "Single App page" render a Webpage & WillPopScope is working here absolutely fine.

Another Page that is "Compare App Page" render a different Webpages into different tabs & here WillPopScope is only working for 1st tab and not working for the rest of tab.

I want to implement WillPopScope for each tab so that each tab have its own history and when a person present on a particular tab & hitting back button(I want to do this inbuilt back button & not via a created back button) takes him to back in history.

Note- A common widget is used in both Single & Compare App

Below are the Main code

```

class NewCompareApp extends StatefulWidget {
  @override
  _NewCompareAppState createState() => _NewCompareAppState();
}

class _NewCompareAppState extends State<NewCompareApp> {
  List apps;
  @override
  void initState() {
    super.initState();
    apps = getCompareApps();
  }

  @override
  Widget build(BuildContext context) {
    return DefaultTabController(
      length: apps.length,
      child: Scaffold(
          appBar: AppBar(
            titleSpacing: 0,
            title: Card(
              elevation: 10,
              child: Container(
                height: 35,
                decoration: BoxDecoration(
                  color: Colors.white,
                  borderRadius: BorderRadius.all(Radius.circular(8.0)),
                ),
                padding: EdgeInsets.only(left: 5),
                child: TextField(
                  autofocus: false,
                  cursorColor: Colors.grey,
                  decoration: InputDecoration(
                      hintText: 'Search', border: InputBorder.none),
                ),
              ),
            ),
            bottom: TabBar(
              indicatorWeight: 1,
              labelColor: Colors.white,
              unselectedLabelColor: Colors.black,
              indicatorColor: Colors.white,
              isScrollable: true,
              tabs: apps
                  .map((ca) => Tab(
                        child: Text(
                          ca.name,
                          style: TextStyle(fontSize: 12),
                        ),
                        // text: ca.name,
                      ))
                  .toList(),
            ),
          ),
          resizeToAvoidBottomInset: false,
          body: TabBarView(
            physics: NeverScrollableScrollPhysics(),
            children: apps
                .map((ca) => WebApp(
                      url: ca.url,
                      forWidget: 'cmp',
                    ))
                .toList(),
          )),
    );
  }
}

```

class WebApp extends StatefulWidget {
  final String url;
  final String forWidget;
  WebApp({Key key, @required this.url, @required this.forWidget})
      : super(key: key);

  @override
  _WebAppState createState() => _WebAppState();
}

class _WebAppState extends State<WebApp>
    with AutomaticKeepAliveClientMixin<WebApp> {
  @override
  bool get wantKeepAlive => true;
  var currentUrl = '';
  InAppWebViewController controller;

  Future<bool> _handleBack(context) async {
    var status = await controller.canGoBack();
    if (status) {
      controller.goBack();
    } else {
      getExitDialog(context, extra: {
        "in_app": true,
      });
    }
    return false;
  }

  @override
  Widget build(BuildContext context) {
    Widget mainWidget = Column(
      children: <Widget>[
        Expanded(
          child: WillPopScope(
            onWillPop: () => _handleBack(context),
            child: InAppWebView(
              initialUrl: widget.url,
              onWebViewCreated: (InAppWebViewController webViewController) {
                controller = webViewController;
              },
              onLoadStart: (InAppWebViewController controller, String url) {
                this.currentUrl = url;
              },
              initialOptions: InAppWebViewGroupOptions(
                crossPlatform: InAppWebViewOptions(
                    horizontalScrollBarEnabled: false,
                    verticalScrollBarEnabled: false),
              ),
            ),
          ),
        ),
        Container(
          color: Colors.white,
          child: Row(
            mainAxisAlignment: MainAxisAlignment.spaceEvenly,
            children: <Widget>[
              FlatButton(
                padding: EdgeInsets.zero,
                child: Icon(Icons.arrow_back),
                onPressed: () => _handleBack(context),
              ),
              FlatButton(
                padding: EdgeInsets.zero,
                child: Icon(Icons.refresh),
                onPressed: () {
                  if (controller != null) {
                    controller.reload();
                  }
                },
              ),
              FlatButton(
                padding: EdgeInsets.zero,
                child: Icon(Icons.arrow_forward),
                onPressed: () {
                  if (controller != null) {
                    controller.goForward();
                  }
                },
              ),
              FlatButton(
                padding: EdgeInsets.zero,
                child: Icon(Icons.share),
                onPressed: null,
              ),
            ],
          ),
        ),
      ],
    );
    return widget.forWidget == 'single_app'
        ? Scaffold(body: SafeArea(top: true, child: mainWidget))
        : mainWidget;
  }
}

```

Code in detail- https://gist.github.com/ycv005/13dec1df2b57535271eb346e132c6775

Thanks in advance.

Yash Chandra verma

unread,

Aug 13, 2020, 3:08:27 AM8/13/20

to Flutter Development (flutter-dev)

Anyone who could help me?

Reply all

Reply to author

Forward

0 new messages