[Flutter] BottomNavigationBar의 splash 효과 제거 | BNB custom(2)

문제상황

이전 포스팅인 BNB custom(1) 에서 시스템 네비게이션 바를 흰색으로 고정했다

 

 

 

 

근데 다시 검정 시스템 네비바로 바꿔서 보자면

 

 

눌렀을 때 플러터 BNB 자체의 기본적인 스플래시 효과로 인해 정신 사납다...

스플래시를 조절하거나 없애는 것이 필요해보였다. 

 

 

 

해결

BottomNavigationBar 외부에 Theme으로 감싸서

splashColor와 highlightColor를 투명인 Colors.transparent로 바꿔주면 된다.

 

[간단 구조]

컨테이너 (
그림자 효과 (),
    스플래시 효과 제거 (
        커스텀 BNB ()
    )
)

    

 

[코드]

Container(
        decoration: BoxDecoration(
          boxShadow: [
            BoxShadow(
              color: Colors.black.withOpacity(0.2),  
              spreadRadius: 1, 
              blurRadius: 10,    
              offset: Offset(0, 4), 
            ),
          ],
        ),
        child: Theme(
          data: ThemeData(
            splashColor: Colors.transparent, // 이 부분 추가
            highlightColor: Colors.transparent, // 이 부분 추가
          ),
          child: BottomNavigationBar(
            items: [
              _buildBottomNavigationBarItem(index: 0, selectedIcon: 'assets/ic-cm-focus.png', unselectedIcon: 'assets/ic-cm.png'),
              _buildBottomNavigationBarItem(index: 1, selectedIcon: 'assets/ic-ed-focus.png', unselectedIcon: 'assets/ic-ed.png',),
              _buildBottomNavigationBarItem(index: 2, selectedIcon: 'assets/ic-fd-focus.png', unselectedIcon: 'assets/ic-fd.png'),
            ],
            type: BottomNavigationBarType.fixed,
            onTap: _onItemTapped,
            currentIndex: _selectedIndex,
            selectedItemColor: Color(0xff343A40),  
            unselectedItemColor: Color(0xff343A40), 
            backgroundColor: Color(0xffFFFFFF),
          ),
        ),
      ) ,

 

 

이건 에뮬레이터여서 그런지 보면 좀 밋밋해보일 수도 있는데,

실제 핸드폰으로 보면 이전 버전보다 훨씬 자연스러워졌다.