[flutter] 플러터 아이콘 효과 추가

18 Dec 2023

flutter

플러터를 사용하면 앱에 다양한 아이콘을 추가하여 사용자 경험을 향상시킬 수 있습니다. 하지만 가장 흔한 문제 중 하나는 아이콘들이 너무 단조롭게 보일 수 있다는 점입니다.

이러한 문제를 해결하기 위해 아이콘에 효과를 추가하여 더 동적이고 시각적으로 매력적인 앱을 만들 수 있습니다.

그림자 효과 추가

그림자는 아이콘에 깊이와 현실적인 느낌을 줄 수 있는 훌륭한 효과입니다. 플러터에서는 BoxDecoration을 사용하여 아이콘에 그림자를 쉽게 추가할 수 있습니다.

다음은 플러터에서 아이콘에 그림자 효과를 추가하는 예제입니다.

Container(
  width: 100,
  height: 100,
  decoration: BoxDecoration(
    shape: BoxShape.circle,
    boxShadow: [
      BoxShadow(
        color: Colors.grey.withOpacity(0.5),
        spreadRadius: 5,
        blurRadius: 7,
        offset: Offset(0, 3), // changes position of shadow
      ),
    ],
  ),
  child: Icon(Icons.person, size: 50),
)

위 코드에서는 Container 위젯에 BoxDecoration을 사용하여 그림자 효과를 추가하고, 내부에 Icon 위젯을 넣어 아이콘을 표시합니다.

회전 효과 추가

또 다른 흥미로운 효과는 회전 효과입니다. 이를 통해 아이콘이 더 생동감 있고 재미있는 느낌을 줄 수 있습니다.

다음은 플러터에서 아이콘에 회전 효과를 추가하는 예제입니다.

class RotatingIcon extends StatefulWidget {
  @override
  _RotatingIconState createState() => _RotatingIconState();
}

class _RotatingIconState extends State<RotatingIcon> with TickerProviderStateMixin {
  late AnimationController _controller;

  @override
  void initState() {
    super.initState();
    _controller = AnimationController(
      vsync: this,
      duration: Duration(seconds: 2),
    )..repeat();
  }

  @override
  Widget build(BuildContext context) {
    return RotationTransition(
      turns: _controller,
      child: Icon(Icons.refresh, size: 50),
    );
  }

  @override
  void dispose() {
    _controller.dispose();
    super.dispose();
  }
}

위 코드에서는 RotationTransition 위젯을 사용하여 아이콘에 회전 효과를 추가하고, 애니메이션을 제어하기 위해 AnimationController를 이용합니다.

요약

플러터를 사용하여 아이콘에 다양한 효과를 추가하여 앱을 더 동적이고 시각적으로 매력적으로 만들 수 있습니다. 그림자와 회전 효과는 그저 시작에 불과하며, 더 많은 효과를 찾아보고 적용해보세요.

더 많은 정보를 원하시면 플러터 공식 문서를 참고하세요: 플러터 공식 문서