[Flutter] BottomNavigationBar Icon 대신 Text Label만 보여주기

 

 

하단 bottomNavigation에 텍스트만 들어가야하는 경우

 

 

 

icon은 필수 입력값이므로 없애거나 null을 줄 수 없다.

 

 

---

 

방법 1)

label을 빈값으로 처리하고, 대신 Text를 Icon처럼 넘겨서 처리

fontSize는 0으로

BottomNavigationBar(
    selectedFontSize: 0,
    unselectedFontSize: 0,
    items : [ 
        BottomNavigationBarItem(
		    icon: Text(title),
		    activeIcon: Text(title),
		    label: "")
    ]
)

 

 

방법 2)

icon을 빈 공백으로 세팅

선택/미선택된 텍스트 컬러는 itemColor로 처리

BottomNavigationBar(
    selectedItemColor : Colors.amber,
    unselectedItemColor: Colors.lightBlue,
    items : [ 
        BottomNavigationBarItem(
		    icon: const Spacer(),
		    label: title)
    ]
)

 

---

 

전체 예시 코드

final PageController _pageController = PageController(initialPage: 1);

int _selectedIndex = 1;

final List<BottomBarType> _bottomBarType = [
  BottomBarType("리포트", const ReportContent()),
  BottomBarType("홈", const HomeContent()),
  BottomBarType("프로필", const ProfileContent())
];

Widget bottomNavigation() {
  return BottomNavigationBar(
    selectedItemColor: Colors.amber,
    unselectedItemColor: Colors.lightBlue,
    items: _bottomBarType
        .map((e) =>
        BottomNavigationBarItem(icon: const Spacer(), label: e.title))
        .toList(),
    currentIndex: _selectedIndex,
    onTap: (index) {
      setState(() {
        _selectedIndex = index;
        _pageController.jumpToPage(index);
      });
    },
  );
}

 

 

bottom_bar_type.class

class BottomBarType {
  BottomBarType(this.title, this.widget);

  final String title;
  final Widget widget;
}