Flutter 기초 - 페이지이동1 (23)

 

Flutter 기초 - 페이지이동1 (23)

 

 

class _HomeWidgetState extends State<HomeWidget> {
  late int index;

  @override
  void initState() {
    super.initState();
    index = 0;
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: const Text('App Bar'),
      ),
      body: homeBody(),
      bottomNavigationBar: BottomNavigationBar(
        items: const [
          BottomNavigationBarItem(icon: Icon(Icons.home), label: 'Home'),
          BottomNavigationBarItem(icon: Icon(Icons.search), label: 'Search'),
          BottomNavigationBarItem(icon: Icon(Icons.person), label: 'User'),
        ],
        currentIndex: index,
        onTap: (newIndex) {
          setState(() {
            index = newIndex;
          });
        },
      ),
    );
  }

  Widget homeBody() {
    switch (index) {
      case 1:
        return const Center(child: Icon(Icons.search, size: 100));
      case 2:
        return const Center(child: Icon(Icons.person, size: 100));
      case 0:
      default:
        return const Center(child: Icon(Icons.home, size: 100));
    }
  }
}

 

Scaffold

 - 상단 앱바 AppBar

 - 본문 Body

 - 하단 탭 bottomNavigationBar

 

BottomNavigationBar

 - 하단 탭바로 BottomNavigationBar는 사용자가 탭할 수 있는 여러개의 항목을 포함한다.

 

currentIndex

 - 현재 선택된 인텍스를 나타낸다.

 

onTap

 - 사용자가 탭을 클릭할때 호출되며 선택된 탭의 인덱스로 index를 업데이트한다.

 

homeBody 

 - 현재 선택된 탭에 따라 다른 내용을 표시한다. 각 탭에 해당하는 아이콘을 크게 표시한다.