I have a BottomNavigationBar with 4 BottomNavigaton items and want 3 items to render different contents for the body, which works fine already. I want the first item to open the camera and link to a completely new page. How can I do this?
What I already tried is attached below.
I get errors like
setState() or markNeedsBuild() called during build. This Overlay widget cannot be marked as needing to build because the framework is already in the process of building widgets.
So I think I call the build method of CameraScreen too early, but I dont know how to avoid it.
class TabScreen extends StatefulWidget {
int index;
TabScreen(this.index);
#override
_TabScreenState createState() => _TabScreenState(index);
}
class _TabScreenState extends State<TabScreen> {
int _selectedPageIndex;
_TabScreenState([this._selectedPageIndex = 1]);
final List<Map<String, Object>> _pages = [
{
// index = 0 should push new Screen without appbar & bottom nav bar and open camera
'page': null,
'title': 'Cam',
},
{
'page': ListScreen(),
'title': 'List',
},
{
'page': TransportScreen(),
'title': 'Transport',
},
{
'page': ExportScreen(),
'title': 'Export',
}
];
void _selectPage(int index, BuildContext ctx) {
setState(() {
_selectedPageIndex = index;
});
// this part does not work
// if (_selectedPageIndex == 0){
// Navigator.of(ctx).pushNamed(CameraScreen.routeName);
// }
}
#override
Widget build(BuildContext context) {
final bottomBar = BottomNavigationBar(
currentIndex: _selectedPageIndex,
onTap: (i) => _selectPage(i, context),
items: const <BottomNavigationBarItem>[
BottomNavigationBarItem(
icon: Icon(Icons.camera_alt_outlined),
label: 'Cam',
// backgroundColor: Colors.red,
),
BottomNavigationBarItem(
icon: Icon(Icons.article_outlined),
label: 'List',
),
BottomNavigationBarItem(
icon: Icon(Icons.article_outlined),
label: 'Transport',
),
BottomNavigationBarItem(
icon: Icon(Icons.arrow_forward),
label: 'Export',
),
],
);
return Scaffold(
appBar: AppBar(
title: Text(_pages[_selectedPageIndex]['title']),
),
body: _pages[_selectedPageIndex]['page'],
bottomNavigationBar: BottomAppBar(
shape: CircularNotchedRectangle(),
notchMargin: 4,
clipBehavior: Clip.antiAlias,
child: bottomBar,
),
floatingActionButtonLocation: FloatingActionButtonLocation.centerDocked,
floatingActionButton: _buildActionButton(),
);
}
}
Well I solved it myself. The above solution which uses Navigator.of(ctx).pushNamed(CameraScreen.routeName);
works indeed.
My problem was in the CameraScreen File, which used some Widgets in its build function and became too large to fit on the screen.
Related
I have flutter widget created with below code, where Tabs are being created as shown below code snippet without having keys in it.
How to find Settings tab & click on it? Can this be done using ancestor or descendant?
Here is the image of the tabs
Here is the app code snippet.
// Imports...
class BottomNavigation extends StatelessWidget {
final TabItem currentTab;
final ValueChanged<TabItem> selectedTab;
const BottomNavigation({
super.key,
required this.currentTab,
required this.selectedTab,
});
#override
Widget build(BuildContext context) {
return BottomNavigationBar(
currentIndex: TabItem.values.indexOf(currentTab),
type: BottomNavigationBarType.fixed,
items: [
_buildItem(TabItem.home, context),
_buildItem(TabItem.creditHealth, context),
_buildItem(TabItem.setting, context),
],
onTap: (index) => selectedTab(
TabItem.values[index],
),
);
}
BottomNavigationBarItem _buildItem(
TabItem item,
BuildContext context
// var toolTip,
) {
return BottomNavigationBarItem(
// tooltip: toolTip,
icon: SvgPicture.asset(
svgF(tabIcons[item]!),
),
label: context.translate(
tabNameKeys[item]!,
),
);
}
}
You should be able to tap by text:
import 'package:flutter_test/flutter_test.dart'
void main() {
testWidgets('signs up', (WidgetTester tester) async {
await tester.pumpWidget(YourApp());
await tester.tap(find.text('Settings'));
}
If you support languages other than English, then it's prudent to assign a key to the widgets you want to interact with, and then use these keys in tests.
// widget code
BottomNavigationBarItem(
key: Key('settings'),
icon: SvgPicture.asset(svgF(tabIcons[item]!)),
label: context.translate(tabNameKeys[item]!),
);
// test code
await tester.tap(find.byKey(Key('settings')));
I want to close my Drawer widget every time the user presses a button in the Bottom Navigation Bar, but can't quite figure this thing out. The way my setup of the BNB is set now is that the current state of all screen is remembered through out the app (using an IndexedStack), but I want to close the Drawer if it is opened in any of the screens before the BNB button press. Each of my screens have their own Drawers and AppBars, so I can't make one Drawer inside the BNB (or I can and I can dynamically change them with a switch case when a specific Screen is clicked on BUT then the Drawer will cover the Bottom Navigation Bar etc.), but I want to make it work like this for now. So here is the code with some comments inside to explain things:
Bottom Navigation Bar:
class BottomNavBar extends StatefulWidget {
static const String id = 'bottom_navbar_screen';
#override
_BottomNavBarState createState() => _BottomNavBarState();
}
class _BottomNavBarState extends State<BottomNavBar> {
int _selectedIndex = 0;
/// list of screen that will render inside the BNB
List<Navigation> _items = [
Navigation(
widget: Screen1(), navigationKey: GlobalKey<NavigatorState>()),
Navigation(
widget: Screen2(), navigationKey: GlobalKey<NavigatorState>()),
Navigation(
widget: Screen3(), navigationKey: GlobalKey<NavigatorState>()),
Navigation(
widget: Screen4(), navigationKey: GlobalKey<NavigatorState>()),
];
/// function that renders components based on selected one in the BNB
void _onItemTapped(int index) {
if (index == _selectedIndex) {
_items[index]
.navigationKey
.currentState
.popUntil((route) => route.isFirst);
} else {
setState(() {
_selectedIndex = index;
});
}
/// when the index is selected, on the button press do some actions
switch (_selectedIndex) {
case 0:
// Do some actions
break;
case 1:
// Do some actions
break;
case 2:
// Do some actions
break;
case 3:
// Do some actions
break;
}
}
/// navigation Tab widget for a list of all the screens and puts them in a Indexed Stack
Widget _navigationTab(
{GlobalKey<NavigatorState> navigationKey, Widget widget}) {
return Navigator(
key: navigationKey,
onGenerateRoute: (routeSettings) {
return MaterialPageRoute(builder: (context) => widget);
},
);
}
#override
Widget build(BuildContext context) {
return WillPopScope(
onWillPop: () async {
final isFirstRouteInCurrentTab =
!await _items[_selectedIndex].navigationKey.currentState.maybePop();
if (isFirstRouteInCurrentTab) {
if (_selectedIndex != 0) {
_onItemTapped(1);
return false;
}
}
/// let system handle back button if we're on the first route
return isFirstRouteInCurrentTab;
},
child: Scaffold(
body: IndexedStack(
index: _selectedIndex,
children: _items
.map((e) => _navigationTab(
navigationKey: e.navigationKey, widget: e.widget))
.toList(),
),
bottomNavigationBar: BottomNavigationBar(
items: <BottomNavigationBarItem>[
BottomNavigationBarItem(
label: 'Screen 1,
),
BottomNavigationBarItem(
label: 'Screen 2,
),
BottomNavigationBarItem(
label: 'Screen 3,
),
BottomNavigationBarItem(
label: 'Screen 4,
),
],
currentIndex: _selectedIndex,
showUnselectedLabels: true,
onTap: _onItemTapped,
),
),
);
}
}
Let's say all 4 screens are the same and they have their own AppBar and Drawer:
#override
Widget build(BuildContext context) {
return Scaffold(
backgroundColor: Colors.white,
drawer: Drawer(), // so this is what I want to close on BNB button press in each of the 4 screens
appBar: AppBar( // each screen has its own app bar
title: Text('Screens 1-4'),
),
body: Text('Body of Screens 1-4'),
);
}
So because each of the screens have their own AppBars and Drawers, the Drawer doesn't render over the Bottom Navigation Bar, so my BNB buttons can be clicked. If I put one Drawer for all Screens inside the BNB, then you can't click the BNB unless you close the Drawer first, which is not something I'm looking for right now.
So, my final question is, how do I close each of the Screens Drawers (if they are previously opened that is) when you press the BottomnavigationBar? (i.e. I am on Screen 1, I open the Drawer, then I press on Screen 2 in the BNB and I want to pop()/close the Drawer in Screen 1 before I navigate to Screen 2.)
Thanks in advance for your help!
A good way to do this is to use a GlobalKey for your scaffold.
So, for all your scaffolds, you define them using:
class SomeClass extends StatelessWidget {
final scaffoldKey = GlobalKey<ScaffoldState>()
Widget build(BuildContext context) {
Scaffold(
backgroundColor: Colors.white,
drawer: Drawer(), // so this is what I want to close on BNB button press in each of the 4 screens
appBar: AppBar( // each screen has its own app bar
title: Text('Screens 1-4),
),
body: Text('Body of Screens 1-4),
key: scaffoldKey,
),
);
}
}
And then, you can pass this key to your BottomNavigationBar.
In your BottomNavigationBar, you can have all the scaffoldKeys, and in the onItemTap function:
void _onItemTapped(int index) {
for (scaffoldKey in scaffoldKeys) {
// If the drawer is open
if (scaffoldKey.currentState.isDrawerOpen) {
// Closes the drawer
scaffoldKey.currentState?.openEndDrawer();
}
}
if (index == _selectedIndex) {
_items[index]
.navigationKey
.currentState
.popUntil((route) => route.isFirst);
} else {
setState(() {
_selectedIndex = index;
});
}
/// when the index is selected, on the button press do some actions
switch (_selectedIndex) {
case 0:
// Do some actions
break;
case 1:
// Do some actions
break;
case 2:
// Do some actions
break;
case 3:
// Do some actions
break;
}
}
It's up to you to find the best way of passing around the keys. You could for example define them in a Widgets that contains both the bottom navigation bar and the different scaffolds, and pass it down as parameters. You could use State Management... whatever fits your use case.
Here is what your code could look like:
class BottomNavBar extends StatefulWidget {
static const String id = 'bottom_navbar_screen';
#override
_BottomNavBarState createState() => _BottomNavBarState();
}
class _BottomNavBarState extends State<BottomNavBar> {
int _selectedIndex = 0;
late final List<GlobalKey<ScaffoldState>> scaffoldKeys;
/// list of screen that will render inside the BNB
late final List<Navigation> _items;
#override
initState() {
super.initState()
scaffoldKeys = [GlobalKey<ScaffoldState>(), GlobalKey<ScaffoldState>(), GlobalKey<ScaffoldState>(), GlobalKey<ScaffoldState>()];
_items = [
Navigation(
widget: Screen1(scaffoldKey: scaffoldKeys[0]), navigationKey: GlobalKey<NavigatorState>()),
Navigation(
widget: Screen2(scaffoldKey: scaffoldKeys[1]), navigationKey: GlobalKey<NavigatorState>()),
Navigation(
widget: Screen3(scaffoldKey: scaffoldKeys[2]), navigationKey: GlobalKey<NavigatorState>()),
Navigation(
widget: Screen4(scaffoldKey: scaffoldKeys[3]), navigationKey: GlobalKey<NavigatorState>()),
];
}
/// function that renders components based on selected one in the BNB
void _onItemTapped(int index) {
for (scaffoldKey in scaffoldKeys) {
// If the drawer is open
if (scaffoldKey.currentState.isDrawerOpen) {
// Closes the drawer
scaffoldKey.currentState?.openEndDrawer();
}
}
if (index == _selectedIndex) {
_items[index]
.navigationKey
.currentState
.popUntil((route) => route.isFirst);
} else {
setState(() {
_selectedIndex = index;
});
}
/// when the index is selected, on the button press do some actions
switch (_selectedIndex) {
case 0:
// Do some actions
break;
case 1:
// Do some actions
break;
case 2:
// Do some actions
break;
case 3:
// Do some actions
break;
}
}
/// navigation Tab widget for a list of all the screens and puts them in a Indexed Stack
Widget _navigationTab(
{GlobalKey<NavigatorState> navigationKey, Widget widget, GlobalKey<ScaffoldState> scaffoldKey}) {
return Navigator(
key: navigationKey,
onGenerateRoute: (routeSettings) {
return MaterialPageRoute(builder: (context) => widget);
},
);
}
#override
Widget build(BuildContext context) {
return WillPopScope(
onWillPop: () async {
final isFirstRouteInCurrentTab =
!await _items[_selectedIndex].navigationKey.currentState.maybePop();
if (isFirstRouteInCurrentTab) {
if (_selectedIndex != 0) {
_onItemTapped(1);
return false;
}
}
/// let system handle back button if we're on the first route
return isFirstRouteInCurrentTab;
},
child: Scaffold(
body: IndexedStack(
index: _selectedIndex,
children: _items
.map((e) => _navigationTab(
navigationKey: e.navigationKey, widget: e.widget))
.toList(),
),
bottomNavigationBar: BottomNavigationBar(
items: <BottomNavigationBarItem>[
BottomNavigationBarItem(
label: 'Screen 1,
),
BottomNavigationBarItem(
label: 'Screen 2,
),
BottomNavigationBarItem(
label: 'Screen 3,
),
BottomNavigationBarItem(
label: 'Screen 4,
),
],
currentIndex: _selectedIndex,
showUnselectedLabels: true,
onTap: _onItemTapped,
),
),
);
}
}
And you screens:
class Screen1 extends StatelessWidget {
final GlobalKey<ScaffoldState> scaffoldKey;
Screen1({required this.scaffoldKey});
#override
Widget build(BuildContext context) {
return Scaffold(
key: scaffoldKey,
backgroundColor: Colors.white,
drawer: Drawer(), // so this is what I want to close on BNB button press in each of the 4 screens
appBar: AppBar( // each screen has its own app bar
title: Text('Screens 1-4'),
),
body: Text('Body of Screens 1-4'),
);
}
}
I changed the list of screens _items to a late variables so you can pass the scaffoldKeys to them when declaring them.
I am building an app with a bottom appbar with classic indexed pages to navigate the main menu:
class OverAllScreen extends StatefulWidget {
final int initialPage;
OverAllScreen(this.initialPage);
#override
_OverAllScreenState createState() => _OverAllScreenState();
}
class _OverAllScreenState extends State<OverAllScreen> {
List _pageOptions = [
Shop(),
Home(),
Discover(),
Account(),
];
int _page;
#override
void initState() {
super.initState();
setState(() {
_page = widget.initialPage;
});
}
#override
Widget build(BuildContext context) {
final _theme = Theme.of(context);
final _mediaSize = MediaQuery.of(context).size;
return Scaffold(
body: _pageOptions[_page],
bottomNavigationBar: BottomNavigationBar(
type: BottomNavigationBarType.fixed,
backgroundColor: _theme.primaryColor,
selectedItemColor: _theme.accentColor,
unselectedItemColor: Colors.white,
currentIndex: _page,
onTap: (index) {
setState(() {
_page = index;
});
},
items: [
BottomNavigationBarItem(icon: Icon(Icons.shop), label: 'Shop'),
BottomNavigationBarItem(icon: Icon(Icons.home), label: 'Home'),
BottomNavigationBarItem(icon: Icon(Icons.search), label: 'Discover'),
BottomNavigationBarItem(
icon: Icon(Icons.person_outline), label: 'Account'),
],
),
);
}
}
In the account page, further down the widget tree I have a widget that shows a list of detailed products.
I want this page to open up when I click on an item of a simple (non-detailed) grid of products.
This I can easily do with Navigator.of(context).push(MaterialPageR0ute(...))). However I would like to keep the bottomAppBAr visible (like instagram when you look at the products of a user).
The problem is that I have the specific list of products in down in the widget tree, so I can't pass them as an argument at the occount page level, without passing them back each step of the way by passing a function as an argument of the widget.
class ProductList extends StatelessWidget {
#override
Widget build(BuildContext context) {
var _products = Provider.of<List<ProductModel>>(context);
return ListView.builder(
itemExtent: 150,
scrollDirection: Axis.horizontal,
itemCount: _products.length,
itemBuilder: (context, index) => Card(
margin: const EdgeInsets.all(5),
child: InkWell(
child: ProductTile(_products[index]),
onTap: () => Navigator.of(context).push(
MaterialPageRoute(
builder: (context) => ProductDetailList(
productIndex: index,
products: _products,
),
),
),
),
),
);
}
}
Here I use MaterialPageRoute, but would like to keep BottomAppBar visible.
Thank you.
To achieve the functionality you are looking for, you would have to write several switch and break case which can be cumbersome as your use is going to be very basic.
What I would suggest is go for this package
This package provide a persistent bottom navigaton bar which is highly customisable and you could even use salmon like bottom bar without writing a single line of extra code.
I want to send data from widget to another widget, in my example i want to send some filter data from FilterScreen.dart to ShopScreen.dart
it works fine but i dont know is what i'm doing is correct?
in filter model file:
class FilterData with ChangeNotifier {
bool isFreeShipping;
bool isSomeThingElse;
FilterData({this.isFreeShipping = false, this.isSomeThingElse = false});
void setFreeShippingValue(bool newval) {
isFreeShipping = newval;
notifyListeners();
}
void setSomeThingElseValue(bool newval) {
isSomeThingElse = newval;
notifyListeners();
}
}
in main.dart:
return ChangeNotifierProvider(
create: (context) => FilterData(),
child: MaterialApp(
.........
)
);
in tabs screen:
class TabsScreen extends StatefulWidget {
#override
_TabsScreenState createState() => _TabsScreenState();
}
class _TabsScreenState extends State<TabsScreen> {
List<Map<String, Object>> _pages;
int _selectedPageIndex = 0;
#override
void initState() {
_pages = [
{
'page': ShopScreen(),
'title': 'shop',
},
{
'page': FilterScreen(),
'title': 'filter',
},
];
super.initState();
}
void _selectPage(int index) {
setState(() {
_selectedPageIndex = index;
});
}
#override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: Text(_pages[_selectedPageIndex]['title']),
),
drawer: DrawerApp(),
body: _pages[_selectedPageIndex]['page'],
bottomNavigationBar: BottomNavigationBar(
onTap: _selectPage,
backgroundColor: Theme.of(context).primaryColor,
unselectedItemColor: Colors.white,
selectedItemColor: Theme.of(context).accentColor,
currentIndex: _selectedPageIndex,
// type: BottomNavigationBarType.fixed,
items: [
BottomNavigationBarItem(
backgroundColor: Theme.of(context).primaryColor,
icon: Icon(Icons.shop),
title: Text('Shop'),
),
BottomNavigationBarItem(
backgroundColor: Theme.of(context).primaryColor,
icon: Icon(Icons.search),
title: Text('Filter'),
),
],
),
);
}
}
in FilterScreen.dart:
class FilterScreen extends StatefulWidget {
#override
_FilterScreenState createState() => _FilterScreenState();
}
class _FilterScreenState extends State<FilterScreen> {
#override
Widget build(BuildContext context) {
final data = Provider.of<FilterData>(context);
return Container(
child: Center(
child: Expanded(
child: ListView(
children: <Widget>[
SwitchListTile(
title: Text('Free Shipping'),
value: data.isFreeShipping,
subtitle: Text('get free shipping products'),
onChanged: (newValue) {
data.setFreeShippingValue(newValue);
}),
SwitchListTile(
title: Text('Some thing else'),
value: data.isSomeThingElse,
subtitle: Text('get filtred products'),
onChanged: (newValue) {
data.setSomeThingElseValue(newValue);
}),
],
),
),
),
);
}
}
in ShopScreen.dart:
class ShopScreen extends StatelessWidget {
#override
Widget build(BuildContext context) {
final data = Provider.of<FilterData>(context);
return Container(
child: Center(
child: Text(
data.isFreeShipping ? 'get favorite Products' : 'get all products'),
),
);
}
}
enter image description here
Your question indeed is a pain for most of the developers, which is like I don't know how it works!
So, if you are not able to understand. there are two reasons to that:
You just blindly followed the tutorial or documentation, cos of the time constraints
You did not understand how Flutter Provider State Management works. So, for that, do read upon these:
List of state managements in flutter
Flutter provider package, of course you have used that in your project. But read how he is using.
So, now let us jump to the code. How your code works?
There are multiple things which are responsible for this:
1. Provider Wrap: If you closely look into the main.dart code, you have done this
return ChangeNotifierProvider(
create: (context) => FilterData(), // here you define the ChangeNotifier class
child: MaterialApp(
.........
)
);
Now looking at the above code, you see, whenever you wrap the app with the ChangeNotifierProvider(), it always rebuilds whenever there is a state change in the class which you have provided inside that, in this case FilterData(). Any changes happens will reflect in the whole app, cos, ChangeNotifierProvider(), is keep rebuilding the state of the immediate child, in this case your, MaterialApp(), which is wrapped.
2. NotifyChanges from the ChangeNotifier class: If you look at your FilterData, it is the one which is responsible for the rebuilding of the app, which is wrapped by the ChangeNotifierProvider().
Let us see how:
void setFreeShippingValue(bool newval) {
isFreeShipping = newval;
notifyListeners();
}
void setSomeThingElseValue(bool newval) {
isSomeThingElse = newval;
notifyListeners();
}
If you closely take a look at the methods, which I mentioned in the above code from your FilterData class only, they have notifyListeners(). These are the ones, which is responsible, whenever your two methods called, it notifies the ChangeNotifierListener to rebuild the widget, and hence you see the updated data every time, you use any of the two methods
3. Using NotifyListeneres method from the FilterData in FilterScreen: So, again if we look closely at the thing which we have mentioned in the point 2, we see that, the method method should be called to make changes in the App which is the immediate child of ChangeNotifierProvider()
SwitchListTile(
title: Text('Free Shipping'),
value: data.isFreeShipping,
subtitle: Text('get free shipping products'),
onChanged: (newValue) {
data.setFreeShippingValue(newValue);
}),
SwitchListTile(
title: Text('Some thing else'),
value: data.isSomeThingElse,
subtitle: Text('get filtred products'),
onChanged: (newValue) {
data.setSomeThingElseValue(newValue);
}),
So, when you call any of the methods in your onChanged, it straight away notifies the Provider that, the value has been changed, and the app rebuilds, and when you switch to the other tab, you see updated result like magic.
MOST IMPORTANT: Your final data = Provider.of<FilterData>(context);, is an instance of the Provider class, which trigger the method to help notify the ChangeNotifierProvider() to make changes in the app
So the mapping is like that:
Listens to the change
FilterData {setFreeShippingValue, setSomeThingElseValue} <----------------------> ChangeNotifierProvider() REBUILDS MATERIALAPP()
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;
});
},
),
),
);
}
}
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...
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!