[flutter] 플러터 shimmer를 활용한 앱의 지갑 애니메이션

11 Dec 2023

flutter

플러터로 모바일 앱을 개발하고 있다면, 사용자 경험을 향상시키기 위해 애니메이션 효과를 활용하는 것이 중요합니다. 이번 블로그 포스트에서는 플러터에서 제공하는 shimmer 패키지를 사용하여 지갑 애니메이션을 어떻게 구현하는지 알아보겠습니다.

Shimmer란 무엇인가요?

shimmer는 텍스트나 이미지 등의 콘텐츠가 로딩 중일 때 사용자에게 로딩 중임을 시각적으로 알려주는 애니메이션 효과를 제공하는 패키지입니다. 이를 활용하면 사용자가 지루해하지 않고 더 나은 사용자 경험을 만들 수 있습니다.

Shimmer 패키지 설치하기

먼저, shimmer 패키지를 설치해야 합니다. 이를 위해서 pubspec.yaml 파일에 아래와 같이 패키지를 추가하세요.

dependencies:
  shimmer: ^2.0.0

그리고 터미널에서 아래 명령어를 실행하여 패키지를 가져옵니다.

flutter pub get

지갑 애니메이션 구현하기

간단한 예시를 통해 shimmer를 활용한 지갑 애니메이션을 구현해보겠습니다.

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

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(
          title: Text('Wallet Animation'),
        ),
        body: Center(
          child: Shimmer.fromColors(
            baseColor: Colors.grey[300],
            highlightColor: Colors.grey[100],
            child: Text(
              'My Wallet',
              style: TextStyle(
                fontSize: 40.0,
                fontWeight: FontWeight.bold,
              ),
            ),
          ),
        ),
      ),
    );
  }
}

위의 예시에서는 shimmer 패키지로 애니메이션 효과를 주기 위해 Shimmer.fromColors 위젯을 사용했습니다. 이를 통해 “My Wallet”이라는 텍스트에 shimmer 애니메이션을 적용했습니다.

마무리

이제 shimmer 패키지를 활용하여 지갑 애니메이션을 구현하는 방법을 알아보았습니다. 이렇게 사용자의 경험을 향상시키는 애니메이션을 활용하여 플러터 앱을 더욱 매력적으로 만들어보세요!