IndexedStack / BottomNavigationBar

Sunny·2022년 5월 29일

rewind를 하면 무조건 적으로 좋을 것 같은 것들!
다만 flutter의 f도 모를 시절이라. 틀린 부분이 있을 수 있다.

1. indexStack

single child from a list of children

말보다 코드로 설명하는 게 편할 거 같다.
그리고 indexStack은 아직까진 bottonNavigationBar랑 콤비로 꼭 쓰는 거 같다.

//statefulwidget을 사용한다면 위에 currentindex라는 int 변수를 선언하여 쓰면 좋을 것임! (여기선 0이 첫번째 페이지라고 생각하자.

int currentIndex = 0;

body: IndexedStack(
        index: currentIndex, // index 순서에 해당하는 child를 맨 위에 보여줌
        children: [
          FirstPage(),
          SecondPage(),
          ThirdPage(),

        ],
      ),

2. bottomNavigationBar

scaffold에 포함된 하단바! 정말 많이 사용되며, indexStack가 쓰이든, 자체 하단바로 만들던 그 건 자유!

 bottomNavigationBar: BottomNavigationBar(
        currentIndex: currentIndex, // 현재 보여주는 탭
        onTap: (newIndex) {
          // 밑에 클릭시 각 아이콘의 인덱스를 가져옴!
          print("selected newIndex : $newIndex");
          // 다른 페이지로 이동
          setState(() {
            currentIndex = newIndex;
            // currentIndex 값이 변경되며.. setState를 이용해서 상태 변경
          });
        },
        selectedItemColor: starbucksPrimaryColor, // 선택된 아이콘 색상
        unselectedItemColor: Colors.grey, // 선택되지 않은 아이콘 색상
        showSelectedLabels: false, // 선택된 항목 label 숨기기
        showUnselectedLabels: false, // 선택되지 않은 항목 label 숨기기
        type: BottomNavigationBarType.fixed, // 선택시 아이콘 움직이지 않기
        backgroundColor: Colors.white.withOpacity(0.8),
        items: [
          BottomNavigationBarItem(icon: Icon(Icons.home), label: ""),
          BottomNavigationBarItem(
              icon: Icon(Icons.credit_card_rounded), label: ""),
          BottomNavigationBarItem(icon: Icon(Icons.free_breakfast), label: ""),
          BottomNavigationBarItem(icon: Icon(Icons.redeem), label: ""),
          BottomNavigationBarItem(icon: Icon(Icons.more_horiz), label: ""),
        ],
      ),

``
profile
즐거움을 만드는 사람

0개의 댓글