circular_bottom_navigation change Icon colors

Question

I'm developing a Flutter app and I'm using the circular_bottom_navigation version 2.4.0 package to handle the bottom navigation.

My goal is to change the color of the selected icon when the user taps a tab. However, I noticed that the color remains unchanged even after selection.

Problem I'm having:

1. I tried using Colors.cyan for the selected tab, but the icon doesn't change color when selected.
2. I tried adding selectedIconColor inside TabItem, but it seems that this property is not supported in version 2.4.0 of the package.
3. The selectedPos value seems to update correctly, but the icon does not change color.

import 'package:flutter/material.dart';
import 'package:circular_bottom_navigation/circular_bottom_navigation.dart';
import 'package:circular_bottom_navigation/tab_item.dart';
import 'package:firebase_auth/firebase_auth.dart';

class MyHomePage extends StatefulWidget {
    MyHomePage({Key? key, this.title}) : super(key: key);
    final String? title;

    @override
    _MyHomePageState createState() => _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> {
    int selectedPos = 0;
    late String background;
    double bottomNavBarHeight = 60;

    List<TabItem> tabItems = List.of([
        TabItem(
            Icons.self_improvement, 
            "Medita", 
            Colors.cyan, 
            labelStyle: TextStyle(fontWeight: FontWeight.bold, color: Colors.white),
        ),
        TabItem(
            Icons.calendar_month, 
            "Calendario", 
            Colors.cyan, 
            labelStyle: TextStyle(fontWeight: FontWeight.bold, color: Colors.white),
        ),
        TabItem(
            Icons.bar_chart, 
            "Statistiche", 
            Colors.cyan, 
            labelStyle: TextStyle(fontWeight: FontWeight.bold, color: Colors.white),
        ),
        TabItem(
            Icons.settings, 
            "Impostazioni", 
            Colors.cyan, 
            labelStyle: TextStyle(fontWeight: FontWeight.bold, color: Colors.white),
        ),
    ]);

    late CircularBottomNavigationController _navigationController;

    @override
    void initState() {
        super.initState();
        _navigationController = CircularBottomNavigationController(selectedPos);
    }

    final List<Widget> _pages = [        MeditatePage(),        WeeklySchedulePage(),        StatsPage(),        ImpostazioniPage(),        TimerPage(),    ];

    @override
    Widget build(BuildContext context) {
        final User? user = FirebaseAuth.instance.currentUser;
        return Scaffold(
            appBar: AppBar(
                title: Text('MeditaMente'),
                actions: [
                    if (user != null)
                        IconButton(
                            icon: Icon(Icons.settings),
                            onPressed: () {
                                Navigator.push(
                                    context,
                                    MaterialPageRoute(builder: (context) => ImpostazioniPage()),
                                );
                            },
                        ),
                ],
            ),
            body: Stack(
                children: <Widget>[
                    IndexedStack(index: selectedPos, children: _pages),
                    Padding(
                        padding: EdgeInsets.only(bottom: bottomNavBarHeight),
                        child: bodyContainer(),
                    ),
                    Align(alignment: Alignment.bottomCenter, child: bottomNav()),
                ],
            ),
        );
    }

    Widget bodyContainer() {
        return GestureDetector(
            child: Container(
                width: double.infinity,
                height: double.infinity,
                child: Center(),
            ),
            onTap: () {
                if (_navigationController.value == tabItems.length - 1) {
                    _navigationController.value = 0;
                } else {
                    _navigationController.value = _navigationController.value! + 1;
                }
            },
        );
    }

    Widget bottomNav() {
        return CircularBottomNavigation(
            tabItems,
            controller: _navigationController,
            selectedPos: selectedPos,
            barHeight: bottomNavBarHeight,
            barBackgroundColor: Color(0xFF388B98),
            backgroundBoxShadow: <BoxShadow>[
                BoxShadow(color: Colors.black45, blurRadius: 10.0),
            ],
            animationDuration: Duration(milliseconds: 300),
            selectedCallback: (int? selectedPos) {
                setState(() {
                    this.selectedPos = selectedPos ?? 0;
                });
            },
        );
    }

    @override
    void dispose() {
        super.dispose();
        _navigationController.dispose();
    }
}

What I've tried so far:

1. I tried using Colors.cyan for the selected tab, but the icon doesn't change color.
2. I have verified that selectedPos updates correctly, so the problem does not appear to be in the state.
3. I tried adding selectedIconColor in TabItem, but it seems this property is not supported.

How can I change the color of selected icons in circular_bottom_navigation 2.4.0? Is there a way to handle this feature or do I have to customize the package?

Thanks in advance for your help! 🙏

Answer 1

IN bottomNav() method add selectedIconColor then check

Widget bottomNav() {
    return CircularBottomNavigation(
      tabItems,
      controller: _navigationController,
      selectedPos: selectedPos,
      barHeight: bottomNavBarHeight,
      selectedIconColor: Colors.redAccent,
      barBackgroundColor: Color(0xFF388B98),
      backgroundBoxShadow: <BoxShadow>[
        BoxShadow(color: Colors.black45, blurRadius: 10.0),
      ],
      animationDuration: Duration(milliseconds: 300),
      selectedCallback: (int? selectedPos) {
        setState(() {
          this.selectedPos = selectedPos ?? 0;
        });
      },
    );
  }