[flutter] 플러터 shimmer를 사용한 플로팅 액션 버튼 애니메이션 예시

11 Dec 2023

flutter

플로팅 액션 버튼은 앱의 기능을 강조하는 데 도움을 주는 중요한 요소입니다. 플로팅 액션 버튼에는 다양한 애니메이션을 적용하여 사용자 경험을 향상시킬 수 있습니다. 이 예시에서는 shimmer 애니메이션을 사용하여 플로팅 액션 버튼의 눈금을 부드럽게 변경하는 방법을 알아보겠습니다.

shimmer 패키지 추가

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

dependencies:
  shimmer: ^2.0.0

Flutter MaterialApp 설정

다음으로, MaterialApp 위젯을 설정하고 플로팅 액션 버튼을 추가합니다. 아래는 MaterialApp에서 플로팅 액션 버튼을 구현한 예시 코드입니다.

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('Shimmer Floating Action Button'),
        ),
        floatingActionButton: Shimmer.fromColors(
          period: Duration(milliseconds: 1500),
          baseColor: Colors.grey,
          highlightColor: Colors.white,
          child: FloatingActionButton(
            onPressed: () {},
            child: Icon(Icons.add),
          ),
        ),
      ),
    );
  }
}

위 코드에서 shimmer 패키지의 Shimmer.fromColors() 위젯을 사용하여 플로팅 액션 버튼을 정의합니다. period 매개변수를 사용하여 shimmer 애니메이션의 속도를 조절할 수 있습니다. 또한 baseColor 및 highlightColor 매개변수를 사용하여 shimmer 효과의 색상을 지정할 수 있습니다.

결론

shimmer 애니메이션을 사용하여 플로팅 액션 버튼을 부드럽게 변경하는 방법에 대해 알아보았습니다. 플로팅 액션 버튼을 더욱 동적이고 시각적으로 인상적으로 만들기 위해 shimmer 애니메이션을 사용해 보세요.

이 예시는 shimmer 패키지의 사용 예시에 기반하여 작성되었습니다.