CODEWITHSUNDEEP
flutterriverpod
Haru US
Haru US

Reputation: 1

when can we rebuild the Consumerwidget 【flutter+riverpod】

I'm beginner in flutter and riverpod and have a issue which troubles me. could anyone solve the issue?

I'm developing app which has BottomNavigationBar on its bottom. when tap any button of them, I wanna change the colors of buttons so that selected button seems to be active I use StateProvider of riverpod to hold state of the BottomNavigationBarItems. but when I tap the button, the ConsumerWidget isn't being rebuilt. what is the reason?? version:flutter_riverpod: ^1.0.3

here is the code below

final _bottomNavigationBarItemsProvider = StateProvider.autoDispose((ref) {

  List<BottomNavigationBarItem>_bottomNavigationBarItems = <BottomNavigationBarItem>[];
  return _bottomNavigationBarItems;
});


class RootWidget extends ConsumerWidget  {
  Map<String,String>  argumentUserData;
  Map<String, String> argumentMasterData;
  Map<String,Map<String,String>>  argumentFriendData;
  Image? argumentMainPhotoData;
  int _selectedIndex=0;

～～～～～～～～～～～～～～～～～～～～～～～～～～～

//change button color to be active
  BottomNavigationBarItem _UpdateActiveState(int index) {
    return BottomNavigationBarItem(
        icon: Icon(
          _footerIcons[index],
          color: Colors.black87,
        ),
        title: Text(
          _footerItemNames[index],
          style: TextStyle(
            color: Colors.black87,
          ),
        ));
  }

//change button color to be nonactive
  BottomNavigationBarItem _UpdateDeactiveState(int index) {
    return BottomNavigationBarItem(
        icon: Icon(
          _footerIcons[index],
          color: Colors.black26,
        ),
        title: Text(
          _footerItemNames[index],
          style: TextStyle(
            color: Colors.black26,
          ),
        ));
  }

  void _onItemTapped(int index, WidgetRef ref) {

    ref.watch(_bottomNavigationBarItemsProvider.state).update((state){
      state[_selectedIndex] = _UpdateDeactiveState(_selectedIndex);
      state[index] = _UpdateActiveState(index);
      return state;}  );
    _selectedIndex = index;
  }

  RootWidget({required this.argumentUserData,required this.argumentMasterData,required this.argumentFriendData, required this.argumentMainPhotoData}) {

  }

  @override
  Widget build(BuildContext context, WidgetRef ref) {



    ref.watch(_bottomNavigationBarItemsProvider.state).update((state){
      state.clear();
      state.add(_UpdateActiveState(0));
      for (var i = 1; i < _footerItemNames.length; i++) {
        state.add(_UpdateDeactiveState(i));
      }
      return state;}  );

    final _bottomNavigationBarItems=ref.watch(_bottomNavigationBarItemsProvider);

    return Scaffold(
      body:
      routeElement(_selectedIndex,argumentUserData["email"]!,argumentUserData["userDocId"]!),
      bottomNavigationBar: BottomNavigationBar(
        type: BottomNavigationBarType.fixed, 
        items: _bottomNavigationBarItems,
        currentIndex: _selectedIndex,
        onTap: (int index){ _onItemTapped(index,ref);
        }
      ),
    );
  }

～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～

}

Upvotes: 0

Views: 724

Answers (1)

mario francois
mario francois

Reputation: 1371

To change the color you have a parameter for that "selectedItemColor" have a look : https://api.flutter.dev/flutter/material/BottomNavigationBar-class.html. Look at my code below with the riverpod version:

final indexProvider = StateProvider<int>((ref) {
  return 0;
});

class RootWidget extends ConsumerWidget {
  const RootWidget({Key? key}) : super(key: key);

  @override
  Widget build(BuildContext context, WidgetRef ref) {
    return Scaffold(
      body: Container(),
      bottomNavigationBar: BottomNavigationBar(
        items: const <BottomNavigationBarItem>[
          BottomNavigationBarItem(
            icon: Icon(Icons.home),
            label: 'Home',
          ),
          BottomNavigationBarItem(
            icon: Icon(Icons.business),
            label: 'Business',
          ),
          BottomNavigationBarItem(
            icon: Icon(Icons.school),
            label: 'School',
          ),
        ],
        currentIndex: ref.watch(indexProvider),
        selectedItemColor: Colors.amber[800],
        onTap: (index) {
          ref.read(indexProvider.state).update((_) => index);
        },
      ),
    );
  }
}

Upvotes: 1

Related Questions