Flutter 탭 페이지 만들기

bottomNavigationBar를 이용하여 버튼 누르면 페이지가 전환되게 만들어보자

bottomNavigationBar는 onPress(){}가 아닌 onTap(){}을 사용한다.

import 'package:flutter/material.dart';
import './style.dart' as style;


void main() {
  runApp(
      MaterialApp(
        theme: style.theme,
        home: MyApp()
      )
  );
}

class MyApp extends StatefulWidget {
  MyApp({Key? key}) : super(key: key);
  @override
  State<MyApp> createState() => _MyAppState();
}

class _MyAppState extends State<MyApp> {
//state의 상태를 나타낼 tab 변수 선언.
  var tab = 0;

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Instagram') ,
        actions: [
          IconButton(
            onPressed: (){},
            icon: Icon(Icons.add_box_outlined),
            iconSize: 30,
          )
        ],
      ),
      // 보여줄 위젯들을 배열로 삽입.
      // tab이 0이면 홈페이지를 보여주고 tab이 1이면 샵페이지를 보여줌.
      body: [Text('홈페이지'), Text('샵페이지')][tab], 
      
      bottomNavigationBar: BottomNavigationBar(
        showSelectedLabels: false,
        showUnselectedLabels: false,
        
        // items를 눌렀을 때 보여줄 아이콘의 값
        // 1번 items를 눌렀을 때 tab의 값인 1이 부여됨.
        currentIndex : tab,
        
        //button의 onPress 와 똑같음. 
        // 중요! : i는 내가 누른 items의 번호! 
        // 0번째 items 누르면 i는 0이 되고 i를 tab에 전송하여 tab 값이 0이 되면
        // 위의 body 안의 보여줄 페이지들의 배열 중에 0번째 배열을 출력하여 페이지가 전환됨
        // body: [Text('홈페이지'), Text('샵페이지')][tab] 이 코드의 tab은 0이 되어 '홈페이지' 출력
        // 당연히 tab은 state니까 setState 함수 안에서 변경해줘야함.
        onTap: (i){
          setState(() {
            tab = i;
          });
        },
        items: [
          BottomNavigationBarItem(
            icon: Icon(Icons.home_outlined),
            activeIcon: Icon(Icons.home), //해당 items 눌렀을 때 보여줄 아이콘
            label: 'Home',
          ),
          BottomNavigationBarItem(
            icon: Icon(Icons.shopping_bag_outlined),
            activeIcon: Icon(Icons.shopping_bag), //해당 items 눌렀을 때 보여줄 아이콘
            label: 'Shop',
          ),
        ],
      ),

    );
  }
}

• 주석이 길어서 그렇지 실제 코드는 몇 줄 안되는데 좋은 퍼포먼스를 보여줌.