Question 178971 in Flutter Question posted in
The official Flutter documentation can be found here.

How to animate selected icon size change in NavigationBar similar to BottomNavigationBar in Flutter?

I’m working with Flutter. When I change the icon using the NavigationBar I want the selected icon to have a larger size, but make this change animated, similar to how it happens in the BottonNavigationBar, but the NavigationBar version I have not been able to achieve this animation

Tags:

2

Answers


  1. 0

    You can use AnimatedContainer
    here is an example

    AnimatedContainer(
    duration: Duration(milliseconds: 200),
    padding: EdgeInsets.all(10),
    decoration: BoxDecoration(
      border: Border(
        bottom: BorderSide(
          width: isSelected ? 2.0 : 0.0,
          color: Colors.blue,
        ),
      ),
    ),
    child: Icon(
      icons[index],
      size: isSelected ? selectedIconSize : unselectedIconSize,
      color: isSelected ? Colors.blue : Colors.black,
    ),
    Login or Signup to reply.
  2. 0 
    BottomNavigationBar(
          currentIndex: model.currentIndex,
          enableFeedback: true,
          landscapeLayout: BottomNavigationBarLandscapeLayout.centered,
          elevation: 0,
          onTap: model.setIndex,
          items: [
            BottomNavigationBarItem(
              label: 'Hem',
              activeIcon: Icon(
                Icons.home,
                color: CustomeColors.grey,
                size: 30.0,
              ),
              icon: Icon(
                Icons.home_outlined,
                size: 25.0,
              ),
            ),
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search