Flutter의 Bottom Navigation 사용법

Flutter에서 BottomNavigationBar 위젯은 화면 하단에 고정된 내비게이션 바를 생성하여 사용자가 앱 내의 다양한 페이지로 쉽게 이동할 수 있도록 합니다. 보통 3~5개의 주요 섹션으로 구성되며, 각 섹션은 아이콘과 레이블을 포함합니다. 이번 글에서는 Flutter의 BottomNavigationBar 위젯의 다양한 기능과 사용법에 대해 자세히 살펴보겠습니다.

1. 기본 BottomNavigationBar 사용법

BottomNavigationBar를 사용하려면 Scaffold 위젯의 bottomNavigationBar 속성에 BottomNavigationBar 위젯을 추가해야 합니다. 가장 기본적인 형태의 바텀 내비게이션 바는 다음과 같습니다.

 

import 'package:flutter/material.dart';

void main() => runApp(MyApp());

class MyApp extends StatefulWidget {
  @override
  _MyAppState createState() => _MyAppState();
}

class _MyAppState extends State<MyApp> {
  int _currentIndex = 0;
  final List<Widget> _children = [
    HomeScreen(),
    SearchScreen(),
    ProfileScreen(),
  ];

  void onTabTapped(int index) {
    setState(() {
      _currentIndex = index;
    });
  }

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(title: Text('BottomNavigationBar Demo')),
        body: _children[_currentIndex],
        bottomNavigationBar: BottomNavigationBar(
          onTap: onTabTapped,
          currentIndex: _currentIndex,
          items: [
            BottomNavigationBarItem(
              icon: Icon(Icons.home),
              label: 'Home',
            ),
            BottomNavigationBarItem(
              icon: Icon(Icons.search),
              label: 'Search',
            ),
            BottomNavigationBarItem(
              icon: Icon(Icons.person),
              label: 'Profile',
            ),
          ],
        ),
      ),
    );
  }
}

class HomeScreen extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Center(child: Text('Home Screen'));
  }
}

class SearchScreen extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Center(child: Text('Search Screen'));
  }
}

class ProfileScreen extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Center(child: Text('Profile Screen'));
  }
}

 

위 코드는 세 개의 탭(Home, Search, Profile)을 가진 기본적인 바텀 내비게이션 바를 생성합니다. 각 탭을 선택하면 해당 화면으로 이동합니다.

2. BottomNavigationBar 스타일링

BottomNavigationBar는 다양한 스타일링 옵션을 제공합니다. backgroundColor, selectedItemColor, unselectedItemColor 등의 속성을 사용하여 스타일을 지정할 수 있습니다.

 

bottomNavigationBar: BottomNavigationBar(
  onTap: onTabTapped,
  currentIndex: _currentIndex,
  backgroundColor: Colors.blue,
  selectedItemColor: Colors.white,
  unselectedItemColor: Colors.white70,
  items: [
    BottomNavigationBarItem(
      icon: Icon(Icons.home),
      label: 'Home',
    ),
    BottomNavigationBarItem(
      icon: Icon(Icons.search),
      label: 'Search',
    ),
    BottomNavigationBarItem(
      icon: Icon(Icons.person),
      label: 'Profile',
    ),
  ],
),

 

위 코드는 바텀 내비게이션 바의 배경색을 파란색으로 설정하고, 선택된 항목의 색상을 흰색, 선택되지 않은 항목의 색상을 흰색 70% 투명도로 설정합니다.

 

 

반응형

 

 

3. BottomNavigationBar의 아이템 개수 제한

BottomNavigationBar는 일반적으로 3~5개의 항목을 가질 수 있습니다. 5개 이상의 항목을 추가하면 자동으로 BottomNavigationBarType.shifting 모드로 변경되어, 선택된 항목만 라벨이 표시됩니다.

 

bottomNavigationBar: BottomNavigationBar(
  onTap: onTabTapped,
  currentIndex: _currentIndex,
  type: BottomNavigationBarType.shifting,
  items: [
    BottomNavigationBarItem(
      icon: Icon(Icons.home),
      label: 'Home',
      backgroundColor: Colors.red,
    ),
    BottomNavigationBarItem(
      icon: Icon(Icons.search),
      label: 'Search',
      backgroundColor: Colors.green,
    ),
    BottomNavigationBarItem(
      icon: Icon(Icons.person),
      label: 'Profile',
      backgroundColor: Colors.blue,
    ),
    BottomNavigationBarItem(
      icon: Icon(Icons.notifications),
      label: 'Notifications',
      backgroundColor: Colors.orange,
    ),
    BottomNavigationBarItem(
      icon: Icon(Icons.settings),
      label: 'Settings',
      backgroundColor: Colors.purple,
    ),
  ],
),

 

위 코드는 5개의 항목을 가진 바텀 내비게이션 바를 생성합니다. 각 항목은 고유한 배경색을 가지며, 선택된 항목만 라벨이 표시됩니다.

4. CupertinoTabBar 사용법

iOS 스타일의 바텀 내비게이션 바를 사용하려면 CupertinoTabBar 위젯을 사용할 수 있습니다. 이는 iOS 디자인 가이드라인을 따르는 애플리케이션에서 유용합니다.

 

import 'package:flutter/cupertino.dart';

class MyApp extends StatefulWidget {
  @override
  _MyAppState createState() => _MyAppState();
}

class _MyAppState extends State<MyApp> {
  int _currentIndex = 0;
  final List<Widget> _children = [
    HomeScreen(),
    SearchScreen(),
    ProfileScreen(),
  ];

  void onTabTapped(int index) {
    setState(() {
      _currentIndex = index;
    });
  }

  @override
  Widget build(BuildContext context) {
    return CupertinoApp(
      home: CupertinoPageScaffold(
        navigationBar: CupertinoNavigationBar(
          middle: Text('CupertinoTabBar Demo'),
        ),
        child: _children[_currentIndex],
        bottomTabBar: CupertinoTabBar(
          onTap: onTabTapped,
          currentIndex: _currentIndex,
          items: [
            BottomNavigationBarItem(
              icon: Icon(CupertinoIcons.home),
              label: 'Home',
            ),
            BottomNavigationBarItem(
              icon: Icon(CupertinoIcons.search),
              label: 'Search',
            ),
            BottomNavigationBarItem(
              icon: Icon(CupertinoIcons.person),
              label: 'Profile',
            ),
          ],
        ),
      ),
    );
  }
}

 

위 코드는 iOS 스타일의 바텀 내비게이션 바를 생성합니다. CupertinoTabBar를 사용하여 CupertinoIcons와 함께 스타일링된 바텀 내비게이션 바를 설정합니다.

5. BottomNavigationBar에 배지 추가

각 바텀 내비게이션 항목에 배지를 추가하여 알림이나 새로운 콘텐츠가 있음을 사용자에게 알릴 수 있습니다. 이를 위해 Stack 위젯을 사용하여 아이콘 위에 배지를 오버레이할 수 있습니다.

 

BottomNavigationBarItem(
  icon: Stack(
    children: <Widget>[
      Icon(Icons.notifications),
      Positioned(
        right: 0,
        child: Container(
          padding: EdgeInsets.all(1),
          decoration: BoxDecoration(
            color: Colors.red,
            borderRadius: BorderRadius.circular(6),
          ),
          constraints: BoxConstraints(
            minWidth: 12,
            minHeight: 12,
          ),
          child: Text(
            '3',
            style: TextStyle(
              color: Colors.white,
              fontSize: 8,
            ),
            textAlign: TextAlign.center,
          ),
        ),
      )
    ],
  ),
  label: 'Notifications',
),

 

위 코드는 Notifications 아이콘에 배지를 추가합니다. 배지는 빨간색 원형 배경에 흰색 텍스트로 알림 개수를 표시합니다.

결론

BottomNavigationBar 위젯은 Flutter 애플리케이션에서 여러 화면을 쉽게 탐색할 수 있도록 도와주는 중요한 도구입니다. 기본적인 사용법부터 스타일링, 아이템 개수 제한, iOS 스타일의 CupertinoTabBar, 배지 추가 등 다양한 기능을 활용하여 사용자 경험을 향상시킬 수 있습니다. BottomNavigationBar를 적절히 활용하여 직관적이고 효율적인 내비게이션을 제공하는 애플리케이션을 만들어보세요.