[flutter] cupertino_icons를 사용하여 아이콘에 이미지 필터링 효과 추가하기

30 Nov 2023

flutter

이번 포스트에서는 Flutter 프레임워크에서 cupertino_icons 패키지를 사용하여 아이콘에 이미지 필터링 효과를 추가하는 방법에 대해 알아보겠습니다.

cupertino_icons 패키지 추가하기

우선, cupertino_icons 패키지를 Flutter 프로젝트에 추가해야 합니다. pubspec.yaml 파일에 다음과 같은 코드를 추가하세요:

dependencies:
  flutter:
    sdk: flutter

  cupertino_icons: ^1.0.2

저장 후, 터미널에서 flutter packages get을 실행하여 패키지를 다운로드하고 프로젝트를 업데이트하세요.

이미지 필터링 효과 추가하기

이제 cupertino_icons 패키지를 사용하여 아이콘에 이미지 필터링 효과를 추가할 수 있습니다. 다음은 예시 코드입니다:

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

class FilteredIcon extends StatelessWidget {
  final IconData iconData;
  final Color filterColor;
  final double filterOpacity;

  FilteredIcon({
    required this.iconData,
    this.filterColor = Colors.black,
    this.filterOpacity = 0.5,
  });

  @override
  Widget build(BuildContext context) {
    return IconTheme(
      data: IconThemeData(
        color: filterColor.withOpacity(filterOpacity),
      ),
      child: Icon(
        iconData,
      ),
    );
  }
}

void main() {
  runApp(MaterialApp(
    home: Scaffold(
      appBar: AppBar(
        title: Text('Filtered Icon Example'),
      ),
      body: Center(
        child: FilteredIcon(
          iconData: CupertinoIcons.star_fill,
          filterColor: Colors.blue,
          filterOpacity: 0.8,
        ),
      ),
    ),
  ));
}

위의 코드에서는 FilteredIcon이라는 새로운 위젯을 정의하고, IconTheme을 사용하여 아이콘에 필터링 효과를 추가합니다. FilteredIcon 위젯을 사용하여 커스텀 필터링 효과가 적용된 아이콘을 만들 수 있습니다.

FilteredIcon 위젯은 iconData 매개변수로 아이콘 데이터를 받으며, filterColor와 filterOpacity 매개변수로 필터 색상 및 투명도를 설정할 수 있습니다. 기본적으로 검은색과 0.5의 투명도가 설정되어 있습니다.

위의 예시 코드를 실행하면 앱에 star_fill 아이콘이 보여지며, 파란색으로 필터링이 적용되고 0.8의 투명도를 가지게 됩니다.

이것으로 Flutter에서 cupertino_icons를 사용하여 아이콘에 이미지 필터링 효과를 추가하는 방법에 대해 알아보았습니다. 추가적인 적용 예제나 확인할 수 있는 링크는 cupertino_icons 패키지를 참조해주세요.