Curved Navigation bar not responding to theme change

[Deepanshu-Rohilla]

Focus on the Home icon after the theme is changed.

Here's the code of switch (used to change the theme):

child: Switch(
                  activeColor: Theme.of(context).accentColor,
                  value: _darkTheme,
                  onChanged: (val) {
                    setState(() {
                      _darkTheme = val;
                    });
                    onThemeChanged(val, themeNotifier);
                  },
                ),

theme notifier and dark theme is initialised as :

var _darkTheme = true;
final themeNotifier = Provider.of<ThemeNotifier>(context);

And this is the code for CurvedNavigationBar:

bottomNavigationBar: CurvedNavigationBar(
              color: Theme.of(context).bottomAppBarColor,
              backgroundColor: Theme.of(context).scaffoldBackgroundColor,
              index: _selectedPage,
              onTap: (index) {
                bottomTapped(index);
              },
              items: [
                Tooltip(
                  message: 'Dashboard',
                  child: Icon(
                    FontAwesomeIcons.home,
                    size: 20.0,
                    color: Theme.of(context).accentColor,
                    //color: Colors.black,
                  ),
                ),
                Tooltip(
                  message: 'My Requests',
                  child: Icon(
                    Icons.format_list_bulleted,
                    size: 20.0,
                    color: Theme.of(context).accentColor,
                  ),
                ),
                Tooltip(
                  message: 'Messages',
                  child: Icon(
                    _selectedPage == 2 ? Icons.chat_bubble : Icons.chat_bubble_outline,
                    size: 20.0,
                    color: Theme.of(context).accentColor,
                  ),
                ),
                Tooltip(
                  message: 'Notifications',
                  child: Icon(
                    _selectedPage == 3 ? Icons.notifications : Icons.notifications_none,
                    size: 20.0,
                    color: Theme.of(context).accentColor,
                  ),
                ),
                Tooltip(
                  message: 'Profile',
                  child: Icon(
                    _selectedPage == 4 ? Icons.person : Icons.person_outline,
                    size: 20.0,
                    color: Theme.of(context).accentColor,
                  ),
                ),
              ],
            ),

[MiroLiebschner]

@Deepanshu-Rohilla I have the same problem. Have you fixed your problem or switched BottomNavBars? @rafalbednarczuk It is possible to change colors when using a provider but it seems not to work for the items. Is this intended behaviour?

[Deepanshu-Rohilla]

@MiroLiebschner . It somehow worked when I implemented "multiple possible accent colour" option in my app (similar to telegram) Here's the link to PR: https://github.com/devclub-iitd/ShareACab/pull/141 I don't exactly know the source of bug and how is it coming

[antonalberdi]

Same problem here

[fffrowies]

Same behaviour too.

[cybex-dev]

See PR #118, hopefully @rafalbednarczuk will merge PR changes soon

[cybex-dev]

Best solution for now is to clone/add as submodule to your project, specify the path and make sure the version in Cache\hosted\pub.dartlang.org is removed (I found it sometimes doesn't use the updated "local" path)

[rafalbednarczuk]

fixed in 1.0.2, please update curved_navigation_bar in pubspec.yaml to 1.0.2

[aamoronatti]

Not working in 1.0.3

[luizwalber]

Not working in 1.0.3

I'm using 1.0.2 to work

[Kamoba]

Yep still not working in 1.0.3

Until better solution, here is a fix:

  ThemeData? _themeData;
  // on theme change
  @override
  void didChangeDependencies() {
    super.didChangeDependencies();
    final ThemeData newThemeData = Theme.of(context);
    if (_themeData == null ) { 
      _themeData = newThemeData; 
      _onThemeChanged(newThemeData);
    }
  }

  void _onThemeChanged(ThemeData themeData) {
    print('Theme changed to: ${themeData.brightness == Brightness.dark ? "Dark" : "Light"}');
    int savedIndex = _selectedIndex;
    setState(() {
      _selectedIndex = savedIndex > 0 ? 0 : 1;
    });
    Future.delayed(const Duration(milliseconds: 10), () {
      setState(() {
        _selectedIndex = savedIndex;
      });
      _themeData = null;
    });
  }