SetState() on BottomNavigatonBar's onTap(index) method does not rebuild widget tree - flutter

Question

I'm trying to connect a webview_flutter WebView to a BottomNavigationBar.
I want the view to be reloaded with a new URL whenever a tab is tapped. In
the onTap callback I update the _currentUrl to a new url and call set state with the new tab index.
Why is the tab bar updating but the web view is not rebuilt?
What did I miss?
class WebViewApp extends StatefulWidget {
#override
State<StatefulWidget> createState() {
return WebViewState();
}
}
class WebViewState extends State<WebViewApp> {
int _currentTabIndex = 0;
String _currentUrl = URL.home;
#override
Widget build(BuildContext context) {
return MaterialApp(
title: 'Flutter WebView Demo',
home: Scaffold(
body: WebView(initialUrl: _currentUrl),
bottomNavigationBar: BottomNavigationBar(
currentIndex: _currentTabIndex,
items: [
BottomNavigationBarItem(
icon: Icon(Icons.home),
title: Text('Home'),
),
BottomNavigationBarItem(
icon: Icon(Icons.search),
title: Text('Search'),
),
BottomNavigationBarItem(
icon: Icon(Icons.calendar_today),
title: Text('Profile'),
),
],
onTap: (index) {
switch (index) {
case 0:
_currentUrl = URL.home;
break;
case 1:
_currentUrl = URL.search;
break;
case 2:
_currentUrl = URL.calendar;
break;
}
setState(() {
_currentTabIndex = index;
});
},
),
),
);
}
}

Answer 1

You can use the WebView's WebViewController to change url of the webview
Add following code to your WebView widget:
body: WebView(
initialUrl: _currentUrl,
onWebViewCreated: (WebViewController webController) {
_webController = webController;
},
),
Now after you have assiged the WebViewController to your instance of WebViewController, you can change the url of the current webview with the loadUrl() method of the WebViewController
So you can change the code of you onTap handler to following:
onTap: (index) {
switch (index) {
case 0:
_webController.loadUrl('your_home_url');
break;
case 1:
_webController.loadUrl('your_search_url');
break;
case 2:
_webController.loadUrl('your_calander_url');
break;
}
},
The problem with WebViews and setState is that the whole Widget / Page will be rebuild including the instance of WebView, but you only want to change the url in the current WebView session...

Answer 2

Thanks for the comment Joel
Yeah its pretty strange to publish a crossplatform framework and basic components does only work on one platform but yeah hopefully they will fix it until October as sad on their github...
I checked my post and the WebView should load the new url. The thing I forgot was to update the _currentTabIndex in the onTap handler of the navigation.
But anyhow: I made a quick example of your case. It works fine for me...
import 'package:flutter/material.dart';
import 'package:flutter/widgets.dart';
import 'package:webview_flutter/webview_flutter.dart';
void main() => runApp(MyApp());
class MyApp extends StatelessWidget {
#override
Widget build(BuildContext context) {
return MaterialApp(
title: 'WebView App',
debugShowCheckedModeBanner: false,
home: WebPage(),
);
}
}
class WebPage extends StatefulWidget {
int currentTabIndex = 0;
#override
_WebPageState createState() => _WebPageState();
}
class _WebPageState extends State<WebPage> {
List<String> _urls = [
'https://www.zdf.de/nachrichten/heute/rubrik-politik-100.html',
'https://www.zdf.de/nachrichten/heute/rubrik-wirtschaft-100.html',
'https://www.zdf.de/nachrichten/heute/rubrik-panorama-100.html'
];
WebViewController _webController;
#override
Widget build(BuildContext context) {
print('<----- build init ----->');
return Scaffold(
appBar: AppBar(
centerTitle: true,
title: Text('WebView'),
),
body: WebView(
initialUrl: _urls[widget.currentTabIndex],
javascriptMode: JavascriptMode.unrestricted,
onWebViewCreated: (WebViewController webController) {
_webController = webController;
},
),
bottomNavigationBar: BottomNavigationBar(
currentIndex: widget.currentTabIndex,
items: [
BottomNavigationBarItem(
icon: Icon(Icons.people),
title: Text('Politik')
),
BottomNavigationBarItem(
icon: Icon(Icons.public),
title: Text('Wirtschaft')
),
BottomNavigationBarItem(
icon: Icon(Icons.pie_chart_outlined),
title: Text('Panorama')
)
],
onTap: (selectedIndex) {
_webController.loadUrl(_urls[selectedIndex]);
setState(() {
widget.currentTabIndex = selectedIndex;
});
},
),
);
}
}
Note that I call the setState() at the end of the onTap handler which rebuilds the page, but strangly the WebView will not be re initialized!? I thought that that must be the case, but flutter must be handling this in someway or another...
Also note that I moved your _currentTabIndex variable from your WebViewState class to its upper parent class WebViewApp. The problem was, that if you rebuild the page via setState() the _currentTabIndex would always be re initialized with 0. For tutorial's sake I just moved it upwards, but maybe you could use it as global parameter...
But yeah the WebView is still a bit confusing and it got lots of differences between the iOS and Android WebView kits (at the end of the day, the flutter WebView is "only" a wrapper of the current native WebView kit)
I hope this helps and good luck!