One small widget controlled by BottomNavigationBar

Question

I'm trying to create a red area on top of each icon in the BottomNavigationBar, and when I click on another icon to switch tabs, this red area will move accordingly like this

from

to

You can see something like this when using some app like facebook instagram

I try to add 1 Positioned with Container to define red zone and using index to solve my problem

Widget build(BuildContext context) {
    return Scaffold(
      backgroundColor: ColorPalete.layoutColor,
      body: Stack(
        children: [
          IndexedStack(
            index: _currentIndex,
            children: [
              const BrewScreen(),
              const Cafeteria(),
              Container(
                color: Colors.brown,
              ),
              Container(
                color: Colors.yellow,
              ),
            ],
          ),
          Positioned(
            bottom: 0,
            left: MediaQuery.of(context).size.width * 0.25 * _currentIndex,
            child: Container(
              width: MediaQuery.of(context).size.width * 0.25,
              height: 4,
              color: Colors.red,
            ),
          ),
        ],
      ),
      bottomNavigationBar: BottomNavigationBar(
        backgroundColor: ColorPalete.layoutColor,
        currentIndex: _currentIndex,
        onTap: (index) {
          setState(() {
            _currentIndex = index;
          });
        },
        selectedItemColor: ColorPalete.layer3TextColor,
        unselectedItemColor: ColorPalete.layer3TextColor.withOpacity(0.5),
        type: BottomNavigationBarType.fixed,
        items: [
          BottomNavigationBarItem(
            activeIcon: SvgPicture.asset('assets/icons/brewClick.svg'),
            icon: SvgPicture.asset('assets/icons/brewUnclick.svg'),
            label: 'Brew',
          ),
          BottomNavigationBarItem(
            activeIcon: SvgPicture.asset('assets/icons/cafeteriaClick.svg'),
            icon: SvgPicture.asset('assets/icons/cafeteriaUnClick.svg'),
            label: 'Cafeteria',
          ),
          BottomNavigationBarItem(
            activeIcon: SvgPicture.asset('assets/icons/roasterClick.svg'),
            icon: SvgPicture.asset('assets/icons/roasterUnClick.svg'),
            label: 'Roaster',
          ),
          BottomNavigationBarItem(
            activeIcon: SvgPicture.asset('assets/icons/articleClick.svg'),
            icon: SvgPicture.asset('assets/icons/articleUnClick.svg'),
            label: 'Article',
          ),
        ],
      ),
    );
  }

And my output is fromto

How can i shrink the red part and leave it in the middle of each icon as designed. And how can I optimize the movement of the red part to be as smooth as possible.

Thanks