동적인 ui 만드는법(tab)

1. state에 tab의 현재상태 저장
2. state에 따라 tab이 어떻게 보일지 작성
3. 유저가 쉽게 state 조작할 수 있게
4. pageview로 나 tab widget 으로 감싸면 옆으로 슬라이딩되는 페이지 만들기 가능

import 'package:flutter/material.dart';

class MainScreen extends StatefulWidget {
  const MainScreen({super.key});
  @override
  State<MainScreen> createState() => _MainScreenState();
}

class _MainScreenState extends State<MainScreen> {
  int tab = 0; // 1. state에 tab의 현재상태 저장
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: const Text('Instagram'),
        actions: [
          IconButton(
            onPressed: () {},
            icon: const Icon(Icons.add_box_outlined),
            iconSize: 30,
          ),
        ],
      ),
      body: [Text('홈페이지'), Text('샵')][tab], //2. state에 따라 tab이 어떻게 보일지 작성
      bottomNavigationBar: BottomNavigationBar(
        showSelectedLabels: false,
        showUnselectedLabels: false,
        selectedItemColor: Colors.black,
        onTap: (i) {
          setState(() {
            tab = i; //3. 유저가 쉽게 state 조작할 수 있게
          });
        },
        items: const [
          BottomNavigationBarItem(icon: Icon(Icons.home_outlined), label: '홈'),
          BottomNavigationBarItem(
              icon: Icon(Icons.shopping_bag_outlined), label: '샵'),
        ],
      ),
    );
  }
}