Flutter bottom navigation bar didn't change color on selected if a put a switch

Question

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;
          }


        },


      ),
    );
  }
}
   

Answer 1

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,

            ),
          ),