Flutter에서는 cupertino_icons 패키지를 사용하여 iOS 스타일의 아이콘을 쉽게 추가할 수 있습니다. 이 패키지는 다양한 iOS 아이콘을 제공하며, 아이콘에 라인 효과를 추가하는 방법을 알아보겠습니다.

1. cupertino_icons 패키지 추가

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

dependencies:
  flutter:
    sdk: flutter
  cupertino_icons: ^1.0.2

설정 후, flutter pub get 명령을 실행하여 패키지를 다운로드합니다.

2. 라인 효과 추가하기

cupertino_icons 패키지를 사용하여 아이콘에 라인 효과를 추가하는 방법은 간단합니다. 먼저, CupertinoIcons 클래스에서 원하는 아이콘을 선택합니다. 예를 들어, 전화 아이콘을 사용하려면 CupertinoIcons.phone을 선택합니다.

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

Widget build(BuildContext context) {
  return Icon(
    CupertinoIcons.phone,
    size: 48,
    color: Colors.black,
  );
}

기본적으로 Icon 위젯을 사용하여 아이콘을 표시하며, CupertinoIcons 클래스에서 선택한 아이콘을 전달합니다. size 속성을 사용하여 아이콘의 크기를 조정하고, color 속성을 사용하여 아이콘의 색상을 지정할 수 있습니다.

3. 라인 효과 스타일 변경하기

CupertinoIcons에서 제공하는 아이콘은 기본적으로 라인 효과가 있는 아이콘입니다. 그러나 아이콘의 라인 스타일을 변경하려면 Theme 위젯을 사용하여 스타일을 재정의할 수 있습니다.

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

Widget build(BuildContext context) {
  return Theme(
    data: ThemeData(
      cupertinoOverrideTheme: CupertinoThemeData(
        iconTheme: CupertinoIconThemeData(
          size: 48,
          color: Colors.black,
          decoration: TextDecoration.underline,
        ),
      ),
    ),
    child: Icon(
      CupertinoIcons.phone,
    ),
  );
}

ThemeData 클래스의 cupertinoOverrideTheme 속성을 사용하여 CupertinoThemeData를 재정의합니다. 그리고 iconTheme 속성을 사용하여 아이콘의 스타일을 변경할 수 있습니다. 위의 예제에서는 size 속성으로 아이콘의 크기를 조정하고, color 속성으로 아이콘의 색상을 지정하며, decoration 속성으로 아이콘에 밑줄을 추가합니다.

위와 같이 cupertino_icons 패키지를 사용하여 아이콘에 라인 효과를 추가할 수 있습니다. 원하는 스타일로 아이콘을 사용하여 iOS 앱을 더욱 멋지게 만들어 보세요.

참고 자료

• cupertino_icons 패키지
• CupertinoIcons 클래스