[flutter] superellipse 모양을 이용한 플러터 앱의 로딩 애니메이션 구현하기

15 Dec 2023

flutter

플러터(Flutter) 앱에서 로딩 애니메이션을 만들 때 많은 선택지가 있지만, superellipse(슈퍼엘립스) 모양을 이용한 로딩 애니메이션은 시선을 사로잡는 독특한 효과를 줄 수 있습니다. 이번 글에서는 superellipse 모양을 이용하여 Flutter 앱의 로딩 애니메이션을 구현하는 방법을 알아보겠습니다.

Superellipse란 무엇인가요?

슈퍼엘립스는 일반적인 타원(Ellipse)보다는 더 깔끔하고 부드러운 외곡 모양을 나타내는 수학적 함수입니다. 일례로, iOS 앱 아이콘과 같은 둥근 모서리는 슈퍼엘립스 함수를 이용하여 만들어집니다. 이러한 형태의 로딩 애니메이션을 통해 플러터 앱에 독특한 시각적 요소를 추가할 수 있습니다.

기본 구현

첫 번째로, 필요한 패키지를 설치합니다.

flutter pub add animated_text_kit

그 다음으로, superellipse 형태의 로딩 애니메이션을 만들기 위해 AnimatedContainer와 BorderRadiusTween을 사용하여 애니메이션을 구현할 수 있습니다.

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

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(
          title: Text('Superellipse 로딩 애니메이션'),
        ),
        body: Center(
          child: LoadingAnimation(),
        ),
      ),
    );
  }
}

class LoadingAnimation extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return SizedBox(
      width: 100,
      height: 100,
      child: DefaultTextStyle(
        style: const TextStyle(
          fontSize: 40,
          color: Colors.black,
        ),
        child: AnimatedTextKit(
          animatedTexts: [
            // Superellipse 로딩 애니메이션 구현
            WavyAnimatedText('로딩 중...'),
          ],
          isRepeatingAnimation: true,
        ),
      ),
    );
  }
}

추가적인 사용자 지정

더 나아가 사용자 지정된 superellipse 로딩 애니메이션을 만들고 싶다면, CustomPaint 위젯을 사용하여 원하는 형태와 컬러, 애니메이션을 지정할 수 있습니다.

class CustomLoadingAnimation extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Center(
      child: CustomPaint(
        size: Size(100, 100),
        painter: SuperellipseLoader(
          lineColor: Colors.blue,
        ),
      ),
    );
  }
}

class SuperellipseLoader extends CustomPainter {
  SuperellipseLoader({required this.lineColor});

  final Color lineColor;

  @override
  void paint(Canvas canvas, Size size) {
    // Custom superellipse를 렌더링하는 코드
  }

  @override
  bool shouldRepaint(covariant CustomPainter oldDelegate) {
    return true;
  }
}

위에서 설명한 방법을 따라구현하면, Superellipse 모양으로 로딩 애니메이션을 원하는대로 사용자 지정할 수 있습니다.

이처럼, Superellipse 모양을 활용하여 Flutter 앱에 로딩 애니메이션을 구현하는 방법을 알아보았습니다. 이러한 독특한 시각적 효과는 사용자들의 눈길을 사로잡고, 앱의 사용자 경험을 향상시킬 수 있을 것입니다.