Navigate through web view with bottom navigation bar

Issue

I am using Flutter Web View Plugin in Flutter app. In my app, the webview is working perfectly and navigating to back page using the device back button (on Android of course). I have added a BottomNavigation bar to let users navigate through the webview using navigation bar.

WebView Class:

class webView extends StatelessWidget {
  final String url;
  final String title;
  webView({Key key, @required this.url, @required this.title}) : super(key: key);
  @override
  Widget build(BuildContext context) {

    return new MaterialApp(
      theme
        : new ThemeData(
        primaryColor: Color.fromRGBO(58, 66, 86, 1.0), fontFamily: 'Raleway'),
      routes: {
        "/": (_) => new WebviewScaffold(
          url: url,
          appBar: new AppBar(
            title: Text(title),
            actions: <Widget>[
              IconButton(
                icon: Icon(Icons.close),
                onPressed: () => Navigator.of(context).pop(null),
              )
            ],
          ),
          withJavascript: true,
          withLocalStorage: true,
          appCacheEnabled: true,
          hidden: true,
          initialChild: Container(
            child: const Center(
              child: CircularProgressIndicator(),
            ),
          ),
          bottomNavigationBar: bmnav.BottomNav(
            index: 0,
            labelStyle: bmnav.LabelStyle(visible: false),
            items: [
              bmnav.BottomNavItem(Icons.arrow_back_ios),
              bmnav.BottomNavItem(Icons.home),
              bmnav.BottomNavItem(Icons.arrow_forward_ios)
            ],
          ),
        )
      },
    );

  }
}

How to Navigate through webview using this navigation bar. Is there any built-in function to use? Please help.

Solution

Initialise index for Navigation.

1. int currentTab = 0;

2. Update bottomNavigationBar :

bottomNavigationBar: bmnav.BottomNav(
    index: currentTab,
    onTap: (i) {
      splitScreen(i);
    },
    labelStyle: bmnav.LabelStyle(showOnSelect: true),
    items: [
      bmnav.BottomNavItem(Icons.arrow_back_ios, label: 'Back'),
      bmnav.BottomNavItem(Icons.refresh, label: 'Reload'),
      bmnav.BottomNavItem(Icons.arrow_forward_ios, label: 'Forward')
    ],
),

3. Finally, read the index and Navigate through webView:

void _splitScreen(int i) {
    switch (i) {
      case 0:
        flutterWebviewPlugin.goBack();
        break;
      case 1:
        flutterWebviewPlugin.reload();
        break;
      case 2:
        flutterWebviewPlugin.goForward();
        break;
    }
  }

You can read the documentation here.

Answered By - user10493250