Navigate through web view with bottom navigation bar
5,598
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.
Author by
Strange
Updated on December 09, 2022Comments
-
Strange over 1 year
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 aBottomNavigation
bar to let users navigate through thewebview
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.