[Flutter] BottomNavigation에서 image 사용하는 예제

오늘은 bottom Navigation bar에서 image를 사용하는 예제를 올려드립니다.
아마 보시면 바로 사용가능하실껍니다.

간단히 설명을 드리면 첫번째로 image 를 flutter에서 인식할 수 있도록 pubspec.yaml 에서 다음과 같이 설정해주세요.

# To add assets to your application, add an assets section, like this:
assets:
  - images/

위와 같이 설정을 해주시면 image 폴더내에 있는 이미지를 인식을 합니다. 
pub get 은 꼭 실행시켜주세요. ^^

다음은 오늘의 핵심인 이미지를 사용하는 예제입니다.
on 이 되었을때 이미지와 off 가 되었을때의 이미지가 서로 다르게 설정하는 예제입니다.

반응형

 body: IndexedStack(
        index: _selectedIndex,
        children: [
          HomeScreen(),
          BuddyList(),
          MyKnowHow(),
          Quiz(),
          MySticker()
        ],
      ),
      bottomNavigationBar: BottomNavigationBar(
        backgroundColor: Colors.white,
        type: BottomNavigationBarType.fixed, 
        currentIndex: _selectedIndex,
        onTap: (index) {
          setState(() {
            _selectedIndex = index;
          });
        },
        items: [
          BottomNavigationBarItem(
              label: '홈',
              icon: Image.asset('images/menu_home_off.png', width: 35, height: 35),
              activeIcon: Image.asset('images/menu_home_on.png', width: 35, height: 35)
          ),
          BottomNavigationBarItem(
              label: '친구목록',
              icon: Image.asset('images/menu_buddy_off.png', width: 35, height: 35),
              activeIcon: Image.asset('images/menu_buddy_on.png', width: 35, height: 35)
          ),
          BottomNavigationBarItem(
              label: '나의 노하우',
              icon: Image.asset('images/menu_knowhow_off.png', width: 35, height: 35),
              activeIcon: Image.asset('images/menu_knowhow_on.png', width: 35, height: 35)
          ),
          BottomNavigationBarItem(
              label: '퀴즈',
              icon: Image.asset('images/menu_quiz_off.png', width: 35, height: 35),
              activeIcon: Image.asset('images/menu_quiz_on.png', width: 35, height: 35)
          ),
          BottomNavigationBarItem(
              label: '나의 스티커',
              icon: Image.asset('images/menu_sticker_off.png', width: 35, height: 35),
              activeIcon: Image.asset('images/menu_sticker_on.png', width: 35, height: 35)
          ),
        ],
      ),

위와 같이 사용을 하시면 selected 된  index를 찾아서 메뉴이동이 가능합니다. 

P.S : 광고 클릭은 블로그 운영에 큰 힘이 됩니다. ^^