<Flutter> TabBar

TabBar

 final tabs = [
    "Top",
    "Users",
    "Videos",
    "Sounds",
    "LIVE",
    "Shopping",
    "Brands",
  ];

  @override
  Widget build(BuildContext context) {
    return DefaultTabController(
      length: tabs.length,
      child: Scaffold(
        appBar: AppBar(
          elevation: 1,
          title: const Text("discover"),
          bottom: TabBar(
              splashFactory: NoSplash.splashFactory, //번지는 에니메이션효과 제거
              padding: const EdgeInsets.symmetric(
                horizontal: Sizes.size16,
              ),
              isScrollable: true, //탭바가 길면 스크롤 가능
              unselectedLabelColor: Colors.grey.shade500, //선택되지 않은 탭 색상
              labelColor: Colors.black, //선택한 탭 색상
              labelStyle: const TextStyle(
                fontWeight: FontWeight.w600,
                fontSize: Sizes.size16,
              ),
              indicatorColor: Colors.black,
              tabs: [for (var tab in tabs) Tab(text: tab)]),
        ),
        body: TabBarView(children: [
          for (var tab in tabs)
            Center(
              child: Text(
                tab,
                style: const TextStyle(
                  fontSize: 28,
                ),
              ),
            )
        ]),
      ),
    );
  }

bottomTap

bottomNavigationBar

material design2의 사양을 따른다

class _MainNavigationScreenState extends State<MainNavigationScreen> {

  int _selectedIndex = 0; //선택된 tap

  final screens = [
  //조종할 스크린
    const Center(
      child: Text("Home"),
    ),
    const Center(
      child: Text("Search"),
    ),
  ];

//tap되어있는 스크린을 감지
  void _onTap(int index) {
    setState(() {
      _selectedIndex = index;
    });
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: screens[_selectedIndex], //선택된 screen을 보여준다 
      bottomNavigationBar: BottomNavigationBar(
        currentIndex: _selectedIndex, //현재 인덱스가 _selectedIndex로 감지된다는 것을 명시 
        onTap: _onTap,
        selectedItemColor: Theme.of(context).primaryColor,
        items: const [
          BottomNavigationBarItem(
            icon: FaIcon(
              FontAwesomeIcons.house,
            ),
            label: "Home",
            tooltip: "what are you?", //유저가 오랜시간 버튼을 누르면 Tooltip이 나타남
            backgroundColor: Colors.amber,
          ),
          BottomNavigationBarItem(
            icon: FaIcon(
              FontAwesomeIcons.magnifyingGlass,
            ),
            label: "search",
            tooltip: "what are you?",
            backgroundColor: Colors.blue,
          ),
      
        ],
      ),
    );
  }
}

NaigationBar

material design3의 사양을 따른다

cupertinoTabBar

cupertion디자인(ios디자인) 버튼은CupertinoTabScaffold로 만들어줘야한다
onTap event를 감지할 필요가 없다

 return CupertinoTabScaffold(
      tabBar: CupertinoTabBar(items: const [
        BottomNavigationBarItem(
          icon: Icon(CupertinoIcons.house),
          label: "Home",
        ),
        BottomNavigationBarItem(
          icon: Icon(CupertinoIcons.search),
          label: "search",
        ),
      ]),
      tabBuilder: (context, index) => screens[index],
    );