[flutter] cupertino_icons를 이용한 아이콘에 로딩 효과 추가하기

30 Nov 2023

flutter

flutter

안녕하세요! Flutter 개발자 여러분들에게 유용한 팁을 알려드리는 이번 포스트에서는 cupertino_icons 패키지를 사용하여 로딩 효과를 아이콘에 추가하는 방법에 대해 알아보겠습니다.

1. cupertino_icons 패키지 추가하기

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

dependencies:
  cupertino_icons: ^1.0.2

패키지 추가가 완료되면, flutter pub get 명령을 통해 패키지를 다운로드하십시오.

2. 아이콘에 로딩 효과 추가하기

cupertino_icons 패키지에는 로딩 효과에 사용할 수 있는 여러 아이콘이 제공됩니다. 이 중에서 자신에게 맞는 아이콘을 선택하여 사용하면 됩니다.

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

class LoadingButton extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return RaisedButton(
      onPressed: () {
        // 버튼을 눌렀을 때의 동작
      },
      child: Row(
        children: [
          Icon(CupertinoIcons.refresh),
          SizedBox(width: 5),
          Text('로딩'),
        ],
      ),
    );
  }
}

위의 코드에서는 RaisedButton 위젯을 사용하여 로딩 버튼을 만들었습니다. 버튼에는 로딩 아이콘과 ‘로딩’이라는 텍스트가 함께 표시됩니다. 이와 같이 원하는 아이콘을 선택하고 텍스트와 함께 배치하면 됩니다.

3. 로딩 효과 적용하기

로딩 효과를 아이콘에 적용하려면 변화를 주어야 합니다. 일반적으로 로딩 중일 때 아이콘을 회전시키는 효과를 주어 사용자에게 로딩 중임을 알리는 것이 일반적입니다.

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

class LoadingButton extends StatefulWidget {
  @override
  _LoadingButtonState createState() => _LoadingButtonState();
}

class _LoadingButtonState extends State<LoadingButton>
    with SingleTickerProviderStateMixin {
  Animation<double> animation;
  AnimationController controller;

  @override
  void initState() {
    super.initState();
    controller = AnimationController(
      duration: const Duration(milliseconds: 1000),
      vsync: this,
    )..repeat(reverse: true);
    animation = CurvedAnimation(
      parent: controller,
      curve: Curves.easeInOut,
    );
  }

  @override
  Widget build(BuildContext context) {
    return RaisedButton(
        onPressed: () {
          // 버튼을 눌렀을 때의 동작
        },
        child: Row(
          children: [
            RotationTransition(
              turns: animation,
              child: Icon(CupertinoIcons.refresh),
            ),
            SizedBox(width: 5),
            Text('로딩')
          ],
        ));
  }

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

위의 코드에서는 StatefulWidget을 사용하여 로딩 버튼을 구현합니다. AnimationController를 사용하여 로딩 아이콘의 회전 애니메이션을 설정하고, RotationTransition 위젯을 사용하여 회전 애니메이션을 적용합니다. 이렇게하면 버튼을 누를 때마다 로딩 아이콘이 회전하는 효과를 얻을 수 있습니다.

4. 결론

이번 포스트에서는 cupertino_icons 패키지를 사용하여 Flutter 앱의 아이콘에 로딩 효과를 추가하는 방법을 알아보았습니다. cupertino_icons 패키지를 사용하면 다양한 아이콘을 쉽게 추가할 수 있으며, 애니메이션을 적용하여 아이콘에 동적인 효과를 줄 수도 있습니다.

더 많은 Flutter 팁과 튜토리얼을 찾으려면 다음 링크를 확인해보세요:

Flutter 공식 문서

Happy coding!