flutter_ IndexedStack 활용하여 상태 유지 화면 위젯 _ 카카오톡 만들기 프로젝트

IndexedStack이란 Stack 위젯의 특별한 형태로, 여러 자식 중 하나를 표시하고

index 속성을 변경하여 다른 자식을 화면에 표시할 수 있습니다.

IndexedStack을 활용하여 자식에 IndexedStack1, 2, 3이라는 텍스트를 배열로 주었고,

bottomNavigationBar를 하단에 내비게이션바로 똑같이 3개의 아이콘의 배열로 구성했습니다.

currentIdex로 선택된 아이콘에 컬러가 바뀔 수 있도록 했고,

onTap 으로 index를 선택 할 수 있도록 했고

print를 해봤을 때 잘 보입니당

class _MainScreenState extends State<MainScreen> {
  int _selectedIndex = 0;
  @override
  Widget build(BuildContext context) {
    return Scaffold(
        body: IndexedStack(   //하나의 스크린에서 가운데 부분만 바뀜
          index: _selectedIndex,
          children: [
            Center(child: Text("IndexedStack 1")),
            Center(child: Text("IndexedStack 2")),
            Center(child: Text("IndexedStack 3")),
          ],
        ),
      //하단 내비 설정
      bottomNavigationBar: BottomNavigationBar(
        currentIndex: _selectedIndex,   //선택 된 아이콘에 컬러주기
        onTap: (index) {
          print("선택 된 index : , $index");
          setState(() {
            _selectedIndex = index;
          });
        },
      items: [
          //FontAwesome 아이콘 사용
          BottomNavigationBarItem(
              icon: Icon(FontAwesomeIcons.user), label: "친구"),
          BottomNavigationBarItem(
              icon: Icon(FontAwesomeIcons.comment), label: "채팅"),
          BottomNavigationBarItem(
              icon: Icon(FontAwesomeIcons.ellipsisH), label: "더보기"),
        ],
      ),
    );
  }
}