I have this code in dart for an app in flutter, in practice the problem is that in the navbar when I click an icon it does not change color, but only when I put the switch, If I leave it like this, it works:
selectedItemColor: Colors.black, onTap: (_onItemTapped)
If instead I add the switch on OnTap it doesn't work anymore (as you can see in the code here)
The complete code with the switch it's here:
import 'dart:io';
import 'dart:convert';
import 'package:flutter/material.dart';
import 'package:flutter_inappwebview/flutter_inappwebview.dart';
class MyInAppBrowser extends InAppBrowser {
@override
Future onBrowserCreated() async {
print("Browser Created!");
}
@override
Future onLoadStart(url) async {
print("Started $url");
}
@override
Future onLoadStop(url) async {
print("Stopped $url");
}
@override
void onLoadError(url, code, message) {
print("Can't load $url.. Error: $message");
}
@override
void onProgressChanged(progress) {
print("Progress: $progress");
}
@override
void onExit() {
print("Browser closed!");
}
}
class MyAppbrowser extends StatefulWidget {
final MyInAppBrowser browser = new MyInAppBrowser();
@override
_MyAppState createState() => new _MyAppState();
}
class _MyAppState extends State<MyAppbrowser> {
InAppWebViewController? webViewController;
var url = Uri.parse("https://gmail.com");
var url2 = Uri.parse("https://bing.com");
var url3 = Uri.parse("https://Facebook.com");
int _selectedIndex = 0;
bool isLoading = true;
var options = InAppBrowserClassOptions(
crossPlatform: InAppBrowserOptions(hideUrlBar: false),
inAppWebViewGroupOptions: InAppWebViewGroupOptions(
ios: IOSInAppWebViewOptions(),
crossPlatform: InAppWebViewOptions(javaScriptEnabled: true)));
void _onItemTapped(int index) {
setState(() {
_selectedIndex = index;
});
}
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(toolbarHeight: 10),
body: Stack(
children:[
InAppWebView(
initialUrlRequest:URLRequest(
url: Uri.parse("https://google.com"),
),
onWebViewCreated: (controller) {
webViewController = controller;
},
)
]
),
bottomNavigationBar:
BottomNavigationBar(
currentIndex: _selectedIndex,
backgroundColor: Colors.white,
items: const <BottomNavigationBarItem>[
BottomNavigationBarItem(
icon: Icon(Icons.call,),
label: "home",
),
BottomNavigationBarItem(
icon: Icon(Icons.camera,),
label: "camera",
),
BottomNavigationBarItem(
icon: Icon(Icons.chat,),
label: "chat",
),
],
type: BottomNavigationBarType.fixed,
unselectedItemColor: Colors.grey,
selectedItemColor: Colors.black,
onTap: (_onItemTapped) {
switch (_onItemTapped) {
case 0:
webViewController?.loadUrl(
urlRequest: URLRequest(url: url));
break;
case 1:
webViewController?.loadUrl(
urlRequest: URLRequest(url: url2));
break;
case 2: webViewController?.loadUrl(
urlRequest: URLRequest(url: url3));
break;
}
},
),
);
}
}
you needs to check if the current index is equal to item index,change the item color. try this :
BottomNavigationBar(
currentIndex: _selectedIndex,
backgroundColor: Colors.white,
items: const <BottomNavigationBarItem>[
BottomNavigationBarItem(
icon: Icon(Icons.call,),
label: "home",
backgroundColor: _selectedIndex == 0 ? Colors.red : Colors
.white38,
),
BottomNavigationBarItem(
icon: Icon(Icons.camera,),
label: "camera",
backgroundColor: _selectedIndex == 1 ? Colors.green : Colors
.white38,
),
BottomNavigationBarItem(
icon: Icon(Icons.chat,),
label: "chat",
backgroundColor: _selectedIndex == 2 ? Colors.yellow : Colors
.white38,
),
),