[flutter] cupertino_icons를 사용하여 탭 바에 아이콘 표시하기

30 Nov 2023

flutter

Flutter는 iOS와 같은 아이콘을 쉽게 사용할 수 있는 cupertino_icons 패키지를 제공합니다. 이 패키지를 사용하여 탭 바에 아이콘을 표시하는 방법에 대해 알아보겠습니다.

먼저 pubspec.yaml 파일의 dependencies 섹션에 다음과 같이 cupertino_icons를 추가해주세요.

dependencies:
  flutter:
    sdk: flutter
  cupertino_icons: ^1.0.2

그런 다음 상단에 import 'package:flutter/cupertino.dart'; 구문을 추가해주세요.

TabBar에 아이콘을 추가하려면 bottomNavigationBar 속성을 사용해야 합니다. 다음은 간단한 예제입니다.

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

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(
          title: Text('Tab Bar with Icons'),
        ),
        bottomNavigationBar: CupertinoTabBar(
          items: [
            BottomNavigationBarItem(
              icon: Icon(CupertinoIcons.home),
              label: 'Home',
            ),
            BottomNavigationBarItem(
              icon: Icon(CupertinoIcons.search),
              label: 'Search',
            ),
            BottomNavigationBarItem(
              icon: Icon(CupertinoIcons.settings),
              label: 'Settings',
            ),
          ],
        ),
      ),
    );
  }
}

위의 예제에서는 CupertinoTabBar 위젯을 사용하여 탭 바를 구성했습니다. items 속성에는 BottomNavigationBarItem 목록을 정의하고, 각 항목에는 해당 아이콘과 라벨을 지정합니다.

이제 앱을 실행하면 탭 바에 홈, 검색 및 설정 아이콘이 표시됩니다.

cupertino_icons 패키지에는 iOS 시스템 아이콘 외에도 추가적인 아이콘들이 포함되어 있으므로, 필요에 따라 다른 아이콘을 찾아 사용할 수도 있습니다.

더 많은 정보와 사용 가능한 아이콘 목록은 cupertino_icons 패키지 페이지를 참조하시기 바랍니다.