BottomNavigationBar

BottomNavigationBar는 Flutter에서 앱의 하단에 위치하는 내비게이션 바를 구현하는 위젯입니다.

주로 앱의 주요 화면들 간의 이동을 위해 사용되며, Material Design 가이드라인을 따르는 디자인을 제공합니다.

주요 특징

•

하단에 고정된 내비게이션 바 제공

•

아이콘과 라벨 조합 사용 가능

•

선택된 항목 강조 표시

•

최소 2개에서 최대 5개까지의 항목 지원

•

애니메이션 효과 내장

•

BottomNavigationBar 예시 코드

•

 공통 위젯으로 정의하기

BottomNavigationBar 예시 코드

•

main.dart

•

screens

◦

home_screen.dart

main.dart

void main() {
  runApp(const MyApp());
}

class MyApp extends StatelessWidget {
  const MyApp({super.key});

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: '로그인 앱',
      theme: ThemeData(
        useMaterial3: true,
      ),
      debugShowCheckedModeBanner: false,
      initialRoute: '/',
      routes: {
        '/': (context) => HomeScreen(),
      },
    );
  }
}
Dart
복사

home_screen.dart

class HomeScreen extends StatelessWidget {
  HomeScreen({super.key});

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      key: _scaffoldKey,
      appBar: AppBar(
        title: const Text("Home"),
      ),
      body: Center(
        child: Column(
          children: [],
        ),
      ),
      bottomNavigationBar: BottomNavigationBar(
        type: BottomNavigationBarType.fixed,
        items: const [
          BottomNavigationBarItem(
            icon: Icon(Icons.home),
            label: "메인",
          ),
          BottomNavigationBarItem(
            icon: Icon(Icons.search),
            label: "검색",
          ),
          BottomNavigationBarItem(
            icon: Icon(Icons.category),
            label: "상품",
          ),
          BottomNavigationBarItem(
            icon: Icon(Icons.shopping_bag),
            label: "장바구니",
          ),
          BottomNavigationBarItem(
            icon: Icon(Icons.person),
            label: "마이",
          ),
        ],
      ),
    );
  }
}
Dart
복사

공통 위젯으로 정의하기

BottomNavigationBar를 공통 위젯으로 정의하면 코드의 재사용성을 높이고 유지보수가 용이해집니다.

common_bottom_navigation_bar.dart

import 'package:flutter/material.dart';

class CommonBottomNavigationBar extends StatelessWidget {
  final int currentIndex;
  final Function(int) onTap;

  const CommonBottomNavigationBar({
    Key? key,
    required this.currentIndex,
    required this.onTap,
  }) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return BottomNavigationBar(
      currentIndex: currentIndex,
      onTap: onTap,
      type: BottomNavigationBarType.fixed,
      selectedItemColor: Theme.of(context).primaryColor,
      unselectedItemColor: Colors.grey,
      items: const [
        BottomNavigationBarItem(
          icon: Icon(Icons.home),
          label: "메인",
        ),
        BottomNavigationBarItem(
          icon: Icon(Icons.search),
          label: "검색",
        ),
        BottomNavigationBarItem(
          icon: Icon(Icons.category),
          label: "상품",
        ),
        BottomNavigationBarItem(
          icon: Icon(Icons.shopping_bag),
          label: "장바구니",
        ),
        BottomNavigationBarItem(
          icon: Icon(Icons.person),
          label: "마이",
        ),
      ],
    );
  }
}
Dart
복사

공통 위젯 사용하기

class HomeScreen extends StatefulWidget {
  const HomeScreen({Key? key}) : super(key: key);

  @override
  State<HomeScreen> createState() => _HomeScreenState();
}

class _HomeScreenState extends State<HomeScreen> {
  int _currentIndex = 0;

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: const Text("Home"),
      ),
      body: Center(
        child: Column(
          children: [],
        ),
      ),
      bottomNavigationBar: CommonBottomNavigationBar(
        currentIndex: _currentIndex,
        onTap: (index) {
          setState(() {
            _currentIndex = index;
          });
        },
      ),
    );
  }
}
Dart
복사

장점

•

코드 재사용성 향상

•

일관된 디자인 유지

•

유지보수 용이

•

상태 관리 편의성

이렇게 공통 위젯으로 분리하면 여러 화면에서 동일한 BottomNavigationBar를 쉽게 사용할 수 있습니다.