Flutter & Dart 플러터 바텀 네비게이션 구현하기: 자세한 가이드

바텀 네비게이션은 플러터에서 화면 이동을 위해 많이 사용되는 UI 패턴 중 하나입니다. 이 패턴을 활용하면 앱의 주요 섹션 또는 기능으로 빠르게 이동할 수 있습니다. 이 블로그 포스트에서는 플러터에서 바텀 네비게이션을 구현하는 방법에 대해 자세하게 알아보겠습니다.

1. 필요한 패키지 추가

먼저, 프로젝트의 pubspec.yaml 파일에 flutter/material.dart 패키지를 추가합니다.

dependencies:
  flutter:
    sdk: flutter

2. 바텀 네비게이션 위젯 생성

바텀 네비게이션을 구현하기 위해 BottomNavigationBar 위젯을 사용합니다. 이 위젯은 화면 하단에 나타나는 탭들을 표시하고 각 탭을 누를 때마다 해당 화면으로 이동할 수 있게 해줍니다.

import 'package:flutter/material.dart';

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Bottom Navigation Example',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: MyHomePage(),
    );
  }
}

class MyHomePage extends StatefulWidget {
  @override
  _MyHomePageState createState() => _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> {
  int _selectedIndex = 0;

  static List<Widget> _widgetOptions = <Widget>[
    Text('Home Page'),
    Text('Search Page'),
    Text('Profile Page'),
  ];

  void _onItemTapped(int index) {
    setState(() {
      _selectedIndex = index;
    });
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Bottom Navigation Example'),
      ),
      body: Center(
        child: _widgetOptions.elementAt(_selectedIndex),
      ),
      bottomNavigationBar: BottomNavigationBar(
        items: <BottomNavigationBarItem>[
          BottomNavigationBarItem(
            icon: Icon(Icons.home),
            label: 'Home',
          ),
          BottomNavigationBarItem(
            icon: Icon(Icons.search),
            label: 'Search',
          ),
          BottomNavigationBarItem(
            icon: Icon(Icons.person),
            label: 'Profile',
          ),
        ],
        currentIndex: _selectedIndex,
        onTap: _onItemTapped,
      ),
    );
  }
}

3. 바텀 네비게이션 커스터마이징

위 예제에서는 간단한 텍스트 위젯을 페이지 대신 사용했지만, 각 탭에 대한 실제 페이지를 만들고 커스터마이징할 수 있습니다. Navigator를 사용하여 탭 클릭 시 해당 페이지로 이동하도록 구현할 수 있습니다.

4. 추가 기능 및 상태 관리

앱에 따라 바텀 네비게이션에 추가 기능을 넣거나, 상태 관리 패턴을 도입하여 각 페이지의 데이터를 관리할 수 있습니다.