[flutter] cupertino_icons를 이용한 네비게이션 바 아이콘 설정하기

30 Nov 2023

flutter

개요

네비게이션 바는 사용자가 앱 내에서 다양한 화면 사이를 전환할 수 있도록 도와주는 중요한 구성 요소입니다. 네비게이션 바에 아이콘을 설정하면 사용자가 어떤 기능을 수행하는지 더 쉽게 파악할 수 있습니다. Flutter에서는 cupertino_icons 패키지를 사용하여 아이콘을 설정할 수 있습니다. 이번 포스트에서는 cupertino_icons를 이용하여 Flutter 앱의 네비게이션 바 아이콘을 설정하는 방법에 대해 알아보겠습니다.

세팅하기

먼저, pubspec.yaml 파일에 cupertino_icons 패키지를 추가해야 합니다. 아래와 같이 dependencies 섹션에 패키지를 추가합니다.

dependencies:
  flutter:
    sdk: flutter
  cupertino_icons: ^1.0.2

이제 패키지를 추가했으니, 프로젝트를 업데이트하기 위해 터미널에서 flutter pub get 명령을 실행합니다.

아이콘 설정하기

먼저, 사용할 네비게이션 바 아이콘의 이름을 찾아야 합니다. cupertino_icons 패키지 문서에서 사용 가능한 아이콘 목록을 확인할 수 있습니다. 예를 들어, ‘book’ 아이콘을 사용하려면 ‘book’을 아이콘 이름으로 사용합니다.
다음으로, 아이콘을 네비게이션 바에 추가하는 코드를 작성해야 합니다. 아래는 bottomNavigationBar에 기본적으로 제공되는 네비게이션 바를 설정하는 예시 코드입니다.

import 'package:flutter/cupertino.dart';
import 'package:flutter/material.dart';
import 'package:cupertino_icons/cupertino_icons.dart';


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

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

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

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

  final List<Widget> _children = [
    HomeWidget(),
    FavoritesWidget(),
    SettingsWidget(),
  ];

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: Text('Navigation Bar Example')),
      body: _children[_currentIndex],
      bottomNavigationBar: CupertinoTabBar(
        currentIndex: _currentIndex,
        items: [
          BottomNavigationBarItem(
            icon: Icon(CupertinoIcons.home),
            label: 'Home',
          ),
          BottomNavigationBarItem(
            icon: Icon(CupertinoIcons.heart),
            label: 'Favorites',
          ),
          BottomNavigationBarItem(
            icon: Icon(CupertinoIcons.settings),
            label: 'Settings',
          ),
        ],
        onTap: (index) {
          setState(() {
            _currentIndex = index;
          });
        },
      ),
    );
  }
}

class HomeWidget extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Center(
      child: Text(
        'Home',
        style: TextStyle(fontSize: 24),
      ),
    );
  }
}

class FavoritesWidget extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Center(
      child: Text(
        'Favorites',
        style: TextStyle(fontSize: 24),
      ),
    );
  }
}

class SettingsWidget extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Center(
      child: Text(
        'Settings',
        style: TextStyle(fontSize: 24),
      ),
    );
  }
}

위 코드에서 CupertinoTabBar의 items 속성에 BottomNavigationBarItem 위젯을 추가하고, icon 속성에 Icon 위젯을 사용하여 각각의 아이콘을 설정합니다. 여기서는 ‘home’, ‘heart’, ‘settings’ 아이콘을 설정해보았습니다. 원하는 아이콘을 설정하려면 해당 아이콘의 이름을 사용하면 됩니다.

중요한 점은 cupertino_icons 패키지를 import하고, Icon 위젯의 CupertinoIcons 클래스를 사용하여 아이콘을 설정해야 한다는 것입니다.

요약

cupertino_icons 패키지를 이용하여 Flutter 앱의 네비게이션 바 아이콘을 설정할 수 있습니다. 해당 패키지를 프로젝트에 추가한 후, 원하는 아이콘을 CupertinoTabBar의 items 속성에 추가하면 됩니다. 이를 통해 사용자가 쉽게 기능을 식별하고 앱 내에서 원하는 기능을 빠르게 이용할 수 있게 됩니다.

더 자세한 내용은 cupertino_icons 패키지 문서를 참고하세요.