bottomNavigationBar

flutter를 사용하니 바텀바는 bottomNavigationBar를 사용하면 만들 수 있었습니다.

기본적으로 주어지는 애니메이션이 많아서 당황스러웠는데, 클릭시 icon, label(Text)가 커지면서 백그라운드엔 그림자 효과가 발생했습니다.

아래는 해결 코드 입니다.

...
bottomNavigationBar: Theme(
  data: ThemeData(
    splashColor: Colors.transparent,
    highlightColor: Colors.transparent,
  ),
  child: BottomNavigationBar(
    onTap: _onItemTapped,
    currentIndex: _selectedIndex,
    type: BottomNavigationBarType.fixed,
    selectedItemColor: Color(0xffFF5C5D),
    unselectedItemColor: Color(0xffFCA184),
    selectedLabelStyle: TextStyle(fontSize: 12),
    unselectedLabelStyle: TextStyle(fontSize: 12),
    items: <BottomNavigationBarItem>[
      BottomNavigationBarItem(
        icon: Icon(Icons.home),
        label: "Home",
      ),
      ...
    ],
  )
),
...

data: ThemeData() 쪽이 애니메이션 효과 없애는 부분이고, label 크기 바뀌는 것은 selectedLabelStyle, unselectedLabelStyle 이용했습니다.

공식문서
https://api.flutter.dev/flutter/material/BottomNavigationBar-class.html