[Flutter, 토이 프로젝트] BottomNavigationBar

의도: BottomNavigationBar에 있는 아이콘 클릭 시, 클릭한 아이콘 및 라벨의 색상 변경

처음 코드(안되는 코드)

class _MyAppState extends State<MyApp> {

  var clickState = 0;

  changeState(i) {
    setState(() {
      clickState = i;
    });
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        backgroundColor: Colors.grey,
        titleTextStyle: TextStyle(color: Colors.black),
        elevation: 0,
        title: Text('홈'),
        actions: [
          IconButton(onPressed: (){}, icon: Icon(Icons.chat)),
          IconButton(onPressed: (){}, icon: Icon(Icons.mic)),
          IconButton(onPressed: (){}, icon: Icon(Icons.person_sharp)),
        ],
      ),
      body: [Home(), MoneyBus(), Shop(), Gift(), Menu()][clickState],
      bottomNavigationBar: BottomNavigationBar(
        onTap: (i){
          changeState(i);
        },
        selectedItemColor: Colors.blue,
        unselectedItemColor: Colors.grey,
        items: [
          BottomNavigationBarItem(
            icon: Icon(Icons.home),
            label: '홈',
          ),BottomNavigationBarItem(
            icon: Icon(Icons.money),
            label: '메뉴',
          ),BottomNavigationBarItem(
            icon: Icon(Icons.money),
            label: '메뉴2'
          ),BottomNavigationBarItem(
            icon: Icon(Icons.money),
            label: '메뉴3'
          ),
        ],
      )
    );
  }
}

 

해결책:

• currentIndex 속성을 활용해 현재 클릭 되어진 곳에 대한 위치 값을 담아줘야 함.
  
  
• 또한 items의 배열의 길이가 3개 이상이 되면 
  • type: BottomNavigationBarType shifting로 변경되기에 의도한 대로 수정하면 좋을 듯.
• 2개의 경우엔 type: BottomNavigationBarType fixed

해결 코드

class _MyAppState extends State<MyApp> {

  var clickState = 0;

  changeState(i) {
    setState(() {
      clickState = i;
    });
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        backgroundColor: Colors.grey,
        titleTextStyle: TextStyle(color: Colors.black),
        elevation: 0,
        title: Text('홈'),
        actions: [
          IconButton(onPressed: (){}, icon: Icon(Icons.chat)),
          IconButton(onPressed: (){}, icon: Icon(Icons.mic)),
          IconButton(onPressed: (){}, icon: Icon(Icons.person_sharp)),
        ],
      ),
      body: [Home(), MoneyBus(), Shop(), Gift(), Menu()][clickState],
      bottomNavigationBar: BottomNavigationBar(
        type: BottomNavigationBarType.fixed,
        currentIndex: clickState,
        onTap: (i){
          changeState(i);
        },
        selectedItemColor: Colors.blue,
        unselectedItemColor: Colors.grey,
        items: [
          BottomNavigationBarItem(
            icon: Icon(Icons.home),
            label: '홈',
          ),BottomNavigationBarItem(
            icon: Icon(Icons.money),
            label: '메뉴',
          ),BottomNavigationBarItem(
            icon: Icon(Icons.money),
            label: '메뉴2'
          ),BottomNavigationBarItem(
            icon: Icon(Icons.money),
            label: '메뉴3'
          ),
        ],
      )
    );
  }
}