[flutter] cupertino_icons를 통해 아이콘의 그림자 효과 추가하기

30 Nov 2023

flutter

Flutter에서 아이콘은 앱의 디자인을 향상시키고 사용자 인터페이스를 보완하는데 매우 중요합니다. cupertino_icons는 Flutter에서 iOS 스타일의 아이콘을 제공하는 패키지입니다. 이 패키지를 사용하여 아이콘에 그림자 효과를 추가하는 방법에 대해 알아보겠습니다.

cupertino_icons 패키지 추가하기

먼저, pubspec.yaml 파일을 열고 아래와 같이 cupertino_icons 패키지를 추가합니다.

dependencies:
  flutter:
    sdk: flutter
  cupertino_icons: ^1.0.0

flutter pub get 명령어를 실행하여 변경 사항을 적용합니다.

그림자 효과를 추가할 아이콘 생성하기

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

class ShadowIcon extends StatelessWidget {
  final IconData icon;
  final double size;
  final Color color;
  final Color shadowColor;

  const ShadowIcon({
    Key? key,
    required this.icon,
    this.size = 24,
    this.color = Colors.black,
    this.shadowColor = Colors.grey,
  }) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return Container(
      child: Column(
        children: [
          Icon(
            icon,
            size: size,
            color: color,
          ),
          SizedBox(height: 4), // 그림자를 위한 여백
          Icon(
            icon,
            size: size,
            color: shadowColor,
          ),
        ],
      ),
    );
  }
}

위의 코드에서는 ShadowIcon 클래스를 생성하여 그림자 효과가 있는 아이콘을 생성합니다. icon 파라미터는 표시할 아이콘의 데이터를 나타내며, size, color, shadowColor 파라미터는 각각 아이콘의 크기, 색상, 그림자 색상을 설정하는 데 사용됩니다. 그림자를 생성하기 위해 두 개의 Icon 위젯을 사용하며, 그 사이에는 적절한 여백을 설정합니다.

그림자 효과를 추가한 아이콘 사용하기

import 'package:flutter/material.dart';

import 'shadow_icon.dart';

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Shadow Icon Example',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: Scaffold(
        appBar: AppBar(
          title: Text('Shadow Icon Example'),
        ),
        body: Center(
          child: ShadowIcon(
            icon: Icons.favorite,
            size: 48,
            color: Colors.red,
            shadowColor: Colors.black.withOpacity(0.3),
          ),
        ),
      ),
    );
  }
}

위의 코드에서는 ShadowIcon을 사용하여 그림자 효과가 있는 아이콘을 생성하고, 해당 아이콘을 앱의 가운데에 배치합니다. icon 파라미터를 통해 원하는 아이콘을 선택하고, size, color, shadowColor 파라미터를 조정하여 아이콘의 모양을 원하는 대로 변경할 수 있습니다.

이제 앱을 실행하면 선택한 아이콘에 그림자 효과가 적용된 것을 확인할 수 있습니다.

위의 코드는 cupertino_icons 패키지와 그림자 효과를 추가하는 방법에 대한 간단한 예제입니다. 이를 바탕으로 여러분은 Flutter 앱에서 아이콘에 다양한 스타일과 효과를 적용할 수 있습니다.