PromleeBlog
sitemap
aboutMe

posting thumbnail
네비게이션 바 탭 이벤트를 위젯에서 사용하기
Using navigation bar tab events in widgets

📅
🚀 들어가기 전에
🚀 1. Notification Screen 수정하기
🚀 2. MainPage 수정하기
🚀 3. 실행 결과 확인
🚀 결론
✅ 참고
🚀

들어가기 전에 🔗

  1. 목표, 조건 설정 및 초기설정, 개요 링크
  2. 로그인 페이지 분기(FlutterSecureStorage) 링크
  3. 하단 네비게이션 바 설정하기 링크
  4. 네비게이션 바 탭 단위 스택 유지하기 링크
위 링크를 순서대로 참고하여 프로젝트를 설정하고 진행하였다고 가정합니다.
이 포스팅은 Flutter 3.24 버전 기준으로 작성되었습니다.
지금까지 하단 네비게이션 바가 추가적인 페이지 내에서도 정상적으로 동작할 수 있도록 설정하였습니다. 이제 마지막 단계로 페이지 내부 위젯에서도 탭 이동이 가능하도록 설정해보겠습니다.
이번 포스팅은 정말 간단합니다. 이번에는 Notification Screen에서 Search Screen으로 이동할 수 있도록 설정해보겠습니다.
🚀

1. Notification Screen 수정하기 🔗

함수를 인수로 받아서 해당 함수를 실행하는 방식으로 설정해보겠습니다. 돋보기 아이콘 버튼을 누르면 1번 탭인 Search Screen으로 이동하도록 설정해보겠습니다.
import 'package:flutter/material.dart';
 
class NotificationsScreen extends StatelessWidget {
  const NotificationsScreen({super.key, required this.onTap});
 
  final Function(int) onTap;
 
  @override
  Widget build(BuildContext context) {
    return Center(
      child: IconButton(
          onPressed: () {
            onTap(1);
          },
          icon: const Icon(Icons.search, size: 100),
          iconSize: 100),
    );
  }
}
🚀

2. MainPage 수정하기 🔗

MainPage에서는 initState 함수를 override하여 탭을 생성하고, 그 탭에 함수를 전달하도록 설정해보겠습니다.
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<GlobalKey<NavigatorState>> _navigatorKeys = [
    GlobalKey<NavigatorState>(),
    GlobalKey<NavigatorState>(),
    GlobalKey<NavigatorState>(),
    GlobalKey<NavigatorState>(),
  ];
 
  void _onTap(int index) {
    if (index == _currentIndex) {
      _navigatorKeys[index].currentState?.popUntil((route) => route.isFirst);
    } else {
      setState(() {
        _currentIndex = index;
      });
    }
  }
 
  // 각 탭에서 보여줄 화면 리스트(비워져 있음)
  final List<Widget> _pages = [];
 
  @override // 각 탭에 보여줄 화면을 생성(onTap 함수를 전달)
  void initState() {
    super.initState();
    _pages.addAll([
      const HomeScreen(),
      const SearchScreen(),
      NotificationsScreen(onTap: _onTap),
      ProfileScreen(),
    ]);
  }
 
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: IndexedStack(
        index: _currentIndex,
        children: List.generate(_pages.length, (index) {
          return Navigator(
            key: _navigatorKeys[index],
            onGenerateRoute: (routeSettings) {
              return MaterialPageRoute(
                builder: (context) => _pages[index],
              );
            },
          );
        }),
      ), // 선택된 탭의 화면을 보여줄 위젯
      bottomNavigationBar: BottomNavigationBar(
        currentIndex: _currentIndex, // 선택된 탭 인덱스
        onTap: _onTap, // 탭 선택 시 호출할 함수
        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, // 선택되지 않은 아이템 색상
      ),
    );
  }
}
🚀

3. 실행 결과 확인 🔗

이제 앱을 실행하고, Notification Screen에서 돋보기 아이콘 버튼을 눌러보세요. Search Screen으로 이동하는 것을 확인할 수 있습니다.
image
🚀

결론 🔗

이번 포스팅에서는 하단 네비게이션 바 탭 단위로 스택을 유지하도록 설정해보았습니다. 이제 여러분은 하단 네비게이션 바가 존재해도 각 페이지에서 탭 이동이 가능하도록 설정할 수 있습니다.
✅

참고 🔗