[flutter] 플러터 앱 아이콘에 그라데이션 효과를 넣는 방법

22 Dec 2023

flutter

그라데이션 효과를 적용하기 위해 flutter_svg 패키지가 이미 설치되어 있는지 확인하세요. 만약 설치되어 있지 않다면, pubspec.yaml 파일에 다음을 추가하고 패키지를 가져오세요:

dependencies:
  flutter_svg: ^0.22.0

이제 아이콘을 표시하는 코드를 작성해봅시다.

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

class GradientIcon extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Container(
      width: 100,
      height: 100,
      child: SvgPicture.asset(
        'assets/icon.svg',
        color: Colors.white,
      ),
      decoration: BoxDecoration(
        shape: BoxShape.circle,
        gradient: LinearGradient(
          colors: [Color(0xFF00AEFF), Color(0xFF0076FF)],
          begin: Alignment.topCenter,
          end: Alignment.bottomCenter,
        ),
      ),
    );
  }
}

이 코드는 크기가 100x100인 원 모양의 컨테이너를 생성하고, 해당 컨테이너 안에 SVG 아이콘을 추가하여, 그라데이션 효과를 적용합니다. 아이콘의 색상을 흰색으로 지정하고, 그라데이션 색상은 파란색에서 푸른색으로 변경됩니다.

이제 앱을 다시 빌드하고 아이콘에 그라데이션 효과를 확인하세요.

플러터 앱에서 아이콘에 그라데이션을 적용하는 방법에 대해 자세히 알아보았습니다. 이를 통해 앱의 디자인을 더욱 풍부하고 매력적으로 만들 수 있습니다.