Flutter Bottom NavBar

Question

I have constructed a bottom navbar with its item of svg icons. Currently I have placed icons of same color for experimentation purpose. I have this result

What I am trying to achieve is the unselected icons must turn into grey icons, as currently I have selected home icon in the navbar. I have these sets of grey icons too

Also, somehow the selected icon get elevated from the navbar, how do I resolve it? I am very new to flutter and a help with code snippet will be helpful. Thanks for reading this. :)

Here is my code for the navbar:`

int _currentIndex = 0;
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      bottomNavigationBar: ClipRRect(
        borderRadius: BorderRadius.vertical(top: Radius.circular(15)),
        child: BottomNavigationBar(
            currentIndex: _currentIndex,
            onTap: (index) {
              setState(() {
                _currentIndex = index;
              });
            },
            items: [
              BottomNavigationBarItem(
                icon: SvgPicture.asset('assets/home-selected.svg'),
                title: Text(''),
              ),
              BottomNavigationBarItem(
                icon: SvgPicture.asset('assets/community-selected.svg'),
                title: Text(''),
              ),
              BottomNavigationBarItem(
                icon: SvgPicture.asset('assets/post-selected.svg'),
                title: Text(''),
              ),
              BottomNavigationBarItem(
                icon: SvgPicture.asset('assets/notification-selected.svg'),
                title: Text(''),
              ),
              BottomNavigationBarItem(
                icon: SvgPicture.asset('assets/settings-selected.svg'),
                title: Text(''),
              )
            ]),
      ),`

Answer 1

To prevent shifting of icons set type: BottomNavigationBarType.fixed.

// Icon names in the order of icons to be display.
List<Map<String,String>> iconNames = [
  {'unselected': 'home', 'selected': 'home-selected'},
  {'unselected': 'community', 'selected': 'community-selected'},
  {'unselected': 'post', 'selected': 'post-selected'},
  {'unselected': 'notification', 'selected': 'notification-selected'},
  {'unselected': 'settings', 'selected': 'settings-selected'},
]; 

int _currentIndex = 0;

@override
  Widget build(BuildContext context) {
    return Scaffold(
      bottomNavigationBar: ClipRRect(
        borderRadius: BorderRadius.vertical(top: Radius.circular(15)),
        child: BottomNavigationBar(
            type: BottomNavigationBarType.fixed, // add this
            currentIndex: _currentIndex,
            onTap: (index) {
              setState(() {
                _currentIndex = index;
              });
            },
            items: [
              for(int i = 0; i < iconNames.length; ++i)
                BottomNavigationBarItem(
                  icon: SvgPicture.asset(
                    // icon name based on selection
                    iconNames[i][i == _currentIndex ? 'selected' : 'unselected'],
                  ),
                  title: Text(''),
                )
            ],
        ),
      ),
    );
  }