Change bar icon color when selected in SwiftUI

Question

I would like to change the color of the toolbar icon when it is selected. When not selected the color is Gray, when instead the color to be is selected: # FC4949 This is the code:

MainTabView

import SwiftUI

struct MainTabView: View {
@State var selectedTab: Tab = .home
@State var color: Color = .red

var body: some View {
    ZStack(alignment: .bottom) {
        
        Group {
            switch selectedTab {
            case .home:
                HomeView()
            case .corsi:
                CorsiView()
            case .carriera:
                CarrieraView()
            case .messaggi:
                MessaggiView()
            case .profilo:
                ProfileView()
            }
        }
        .frame(maxWidth: .infinity, maxHeight: .infinity)
        HStack {
            ForEach(tabItems) { item in Button {
                withAnimation(.spring(response: 0.3,
                                      dampingFraction: 0.7)){
                    selectedTab = item.tab
                    color = item.color
                }
            } label: {
                VStack(spacing: 0) {
                    Image(item.icon)
                        
                        
                        .frame(width: 44, height: 29)
                    
                        
                        //.lineLimit(1)
                }
                .frame(maxWidth: .infinity)
            }
            
       }
   }
        .padding(.horizontal, 8)
        .padding(.top, 30)
        .frame(height: 80, alignment: .top)
        
        .overlay(
            HStack {
                if selectedTab == .profilo { Spacer()}
                if selectedTab == .corsi { Spacer() }
                if selectedTab == .carriera {
                    Spacer()
                    Spacer()
                }
                if selectedTab == .messaggi {
                    Spacer()
                    Spacer()
                    Spacer()
                }
                Rectangle()
                    .fill(color)
                    .frame(width: 32, height: 4)
                    .cornerRadius(3)
                    .frame(width: 60)
                    .frame(maxHeight: .infinity, alignment: .bottom)
                if selectedTab == .messaggi { Spacer() }
                if selectedTab == .home { Spacer() }
                if selectedTab == .corsi {
                    Spacer()
                    Spacer()
                    Spacer()
                    
                }
                
                if selectedTab == .carriera {
                    Spacer()
                    Spacer() }
                
                
            }
                .padding(.horizontal, 14)
        )
        .ignoresSafeArea()

    }
    
}
}



struct MainTabView_Previews: PreviewProvider {
static var previews: some View {
    MainTabView()
   }
}

Tab

  import SwiftUI

struct TabItem: Identifiable {
var id = UUID()
var text: String
var icon: String
var tab: Tab
var color: Color
}

var tabItems = [
TabItem(text: "Home", icon: "HomeIcon", tab: .home, color: .red),
TabItem(text: "Corsi", icon: "CorsiIcon", tab: .corsi, color: .red),
TabItem(text: "Carriera", icon: "CarrieraIcon", tab: .carriera, color: .red),
TabItem(text: "Messaggi", icon: "MessaggiIcon", tab: .messaggi, color: .red),
TabItem(text: "Profilo", icon: "ProfileIcon", tab: .profilo, color: .red)


 ]

 enum Tab: String {
case home
case corsi
case carriera
case messaggi
case profilo
 }

Currently the result of the code is this

Currently the result of the code is this

I would like this:

I would like this

Answer 1

This should do the trick:

    VStack(spacing: 0) {
        Image(item.icon)
            .tint(color) //add this.
            
            .frame(width: 44, height: 29)
            
            
            //.lineLimit(1)
    }
    .frame(maxWidth: .infinity)

Answer 2

There is a property named accentcolor which is used to provide color to your selected tab in SwiftUI.You just need to provide that property to your tabView.For example, if you want that selected item to be pink you may use it like that:-

TabView {
...
}.accentColor(.pink)

Answer 3

I solved this by adding

  } label: {
                VStack(spacing: 0) {
                    
                    Image(item.icon)
                    
                    
                        .foregroundColor(selectedTab == item.tab ? Color(.red) : .gray)
                        
                        
                }
                .frame(maxWidth: .infinity)
            }