Setting Up a Bottom Navigation Bar

📦 lib
┣ 📂 model						// 데이터 보관하는 모델 폴더(이번 포스팅에서는 사용하지 않음)
┣ 📂 view						// 화면을 구성하는 뷰 폴더
┃ ┣ 📂 tabs						// 탭 4개를 구성하는 화면
┃ ┃ ┣ 📜 home_screen.dart
┃ ┃ ┣ 📜 notifications_screen.dart
┃ ┃ ┣ 📜 profile_screen.dart
┃ ┃ ┗ 📜 search_screen.dart
┃ ┣ 📜 login_page.dart
┃ ┗ 📜 main_page.dart
┣ 📂 viewModel					// 데이터와 화면을 잇는 viewModel 폴더
┃ ┗ 📜 auth_service.dart
┗ 📜 main.dart

import 'package:flutter/material.dart';
 
class HomeScreen extends StatelessWidget {
  const HomeScreen({super.key});
 
  @override
  Widget build(BuildContext context) {
    return const Center(
      child: Text('Home Screen', style: TextStyle(fontSize: 24)),
    );
  }
}

import 'package:flutter/material.dart';
 
class SearchScreen extends StatelessWidget {
	const SearchScreen({super.key});
 
	@override
	Widget build(BuildContext context) {
		return const Center(
			child: Text('Search Screen', style: TextStyle(fontSize: 24)),
		);
	}
}

import 'package:flutter/material.dart';
 
class NotificationsScreen extends StatelessWidget {
	const NotificationsScreen({super.key});
 
	@override
	Widget build(BuildContext context) {
		return const Center(
			child: Text('Notifications Screen', style: TextStyle(fontSize: 24)),
		);
	}
}

import 'package:flutter/material.dart';
import 'package:get/get.dart';
import 'package:navigationbar_example/view/login_page.dart';
import 'package:navigationbar_example/viewModel/auth_service.dart';
 
class ProfileScreen extends StatelessWidget {
  final AuthService _authService = AuthService();
 
  ProfileScreen({super.key}); // AuthService 인스턴스 생성
 
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: const Text('Profile Page'), // 프로필 화면 제목
        actions: [
          IconButton(
            onPressed: () async {
              // 로그아웃 시 상태 삭제
              await _authService.logout();
              // 로그아웃 후 로그인 페이지로 이동
              Get.offAll(() => LoginPage());
            },
            icon: const Icon(Icons.logout), // 로그아웃 버튼 아이콘
          ),
        ],
      ),
      body: const Center(
        child: Text('Profile Screen', style: TextStyle(fontSize: 24)),
      ),
    );
  }
}

import 'package:flutter/material.dart';
import 'package:navigationbar_example/view/tabs/home_screen.dart';
import 'package:navigationbar_example/view/tabs/notifications_screen.dart';
import 'package:navigationbar_example/view/tabs/profile_screen.dart';
import 'package:navigationbar_example/view/tabs/search_screen.dart';
 
class MainPage extends StatefulWidget {
  const MainPage({super.key});
 
  @override
  MainPageState createState() => MainPageState();
}
 
class MainPageState extends State<MainPage> {
  int _currentIndex = 0; // 현재 선택된 탭의 인덱스
 
  // 각 탭에서 보여줄 화면 리스트
  final List<Widget> _pages = [
    const HomeScreen(), // 첫 번째 탭 화면
    const SearchScreen(), // 두 번째 탭 화면
    const NotificationsScreen(), // 세 번째 탭 화면
    ProfileScreen(), // 네 번째 탭 화면
  ];
 
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: _pages[_currentIndex], // 현재 선택된 탭에 해당하는 화면 표시
      bottomNavigationBar: BottomNavigationBar(
        currentIndex: _currentIndex, // 선택된 탭 인덱스
        onTap: (index) {
          setState(() {
            _currentIndex = index; // 탭 전환 시 상태 업데이트
          });
        },
        items: const [
          BottomNavigationBarItem(
            icon: Icon(Icons.home),
            label: 'Home',
          ),
          BottomNavigationBarItem(
            icon: Icon(Icons.search),
            label: 'Search',
          ),
          BottomNavigationBarItem(
            icon: Icon(Icons.notifications),
            label: 'Notifications',
          ),
          BottomNavigationBarItem(
            icon: Icon(Icons.person),
            label: 'Profile',
          ),
        ],
        selectedItemColor: Colors.blue, // 선택된 아이템 색상
        unselectedItemColor: Colors.grey, // 선택되지 않은 아이템 색상
      ),
    );
  }
}