[flutter] cupertino_icons를 이용한 아이콘에 텍스트 추가하기

30 Nov 2023

flutter

Flutter는 많은 아이콘을 제공하는 cupertino_icons 패키지를 포함하고 있습니다. 이 패키지를 사용하여 아이콘 위에 텍스트를 추가하는 방법을 알아보겠습니다.

1. cupertino_icons 패키지 추가하기

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

dependencies:
  flutter:
    sdk: flutter
  cupertino_icons: ^1.0.2        # 버전은 최신 버전으로 변경해주세요

pubspec.yaml 파일을 저장한 후, 터미널에서 flutter pub get 명령어를 실행하여 패키지를 다운로드 받습니다.

2. 아이콘 위에 텍스트 추가하기

아이콘 위에 텍스트를 추가하기 위해서는 Stack 위젯을 사용합니다. Stack 위젯은 다른 위젯들을 겹쳐서 배치할 때 유용한 위젯입니다.

다음과 같은 코드를 사용하여 아이콘 위에 텍스트를 추가할 수 있습니다.

import 'package:flutter/material.dart';
import 'package:cupertino_icons/cupertino_icons.dart';   // cupertino_icons 임포트

class IconWithText extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Stack(
      alignment: Alignment.center,
      children: <Widget>[
        Icon(CupertinoIcons.bell),   // 사용할 아이콘
        Positioned(
          bottom: 0,
          child: Text(
            'Notification',   // 텍스트 내용
            style: TextStyle(
              fontSize: 16,
              fontWeight: FontWeight.bold,
              color: Colors.black,
            ),
          ),
        ),
      ],
    );
  }
}

위의 코드에서 IconWithText 위젯은 Stack 위젯을 사용하여 Icon 위에 Text를 배치하고 있습니다. Positioned 위젯을 사용하여 텍스트의 위치를 지정하였습니다. 이 경우 bottom: 0으로 설정하여 아이콘 아래에 텍스트가 표시되도록 했습니다.

3. 사용 예시

위에서 정의한 IconWithText 위젯을 화면에 사용하기 위해서는 다음과 같이 코드를 작성합니다.

import 'package:flutter/material.dart';

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(
          title: Text('Icon With Text'),
        ),
        body: Center(
          child: IconWithText(),   // IconWithText 위젯 사용
        ),
      ),
    );
  }
}

위의 코드에서 IconWithText 위젯을 Center 위젯 내부에 배치하여 화면을 가운데로 정렬하고 있습니다.

결론

이제 Flutter에서 cupertino_icons 패키지를 사용하여 아이콘 위에 텍스트를 추가하는 방법을 알아보았습니다. Stack 위젯과 Positioned 위젯을 적절히 사용하여 다양한 디자인 요구에 맞춰서 아이콘과 텍스트를 배치하실 수 있습니다.

더 많은 아이콘과 기능을 사용하려면 cupertino_icons 패키지 문서를 참고해주세요.