[flutter] 플러터 shimmer를 이용한 메뉴 애니메이션 구현하기

11 Dec 2023

flutter

플러터(Flutter)는 아름다운 사용자 인터페이스(UI)를 구축하기 위한 강력한 프레임워크입니다. 이번에는 플러터의 Shimmer를 활용하여 메뉴 애니메이션을 구현하는 방법에 대해 알아보겠습니다.

Shimmer 소개

Shimmer는 사용자 경험을 향상시키기 위해 로딩 중인 콘텐츠를 표시하는 데 사용되는 UI 패턴입니다. 일반적으로 로딩 중인 부분이 부드럽게 번갈아 가며 밝아지고 어둡게 되는 효과를 제공하여 사용자에게 활동 중임을 시각적으로 알려줍니다.

Shimmer를 이용한 메뉴 애니메이션 구현하기

플러터에서 Shimmer 효과를 사용하기 위해서는 shimmer 패키지를 이용할 수 있습니다. 다음은 Shimmer 패키지를 사용하여 메뉴 애니메이션을 구현하는 간단한 예제 코드입니다.

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

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

class MenuAnimationApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(
          title: Text('Menu Animation'),
        ),
        body: ListView.builder(
          itemCount: 10,
          itemBuilder: (BuildContext context, int index) {
            return Shimmer.fromColors(
              baseColor: Colors.grey[300],
              highlightColor: Colors.grey[100],
              child: ListTile(
                title: Text('Menu Item $index'),
              ),
            );
          },
        ),
      ),
    );
  }
}

이 예제 코드에서는 shimmer 패키지를 사용하여 ListView의 각 항목에 Shimmer 효과를 적용합니다. 항목이 로딩 중임을 나타내는 Shimmer 효과가 부드럽게 표시됩니다.

결론

이렇게하여 플러터의 Shimmer를 활용하여 메뉴 애니메이션을 구현할 수 있습니다. Shimmer 효과를 적용함으로써 사용자는 로딩 중임을 확실히 인식할 수 있고, 이로 인해 사용자 경험이 향상될 수 있습니다.

더 많은 정보를 위해서는 shimmer 패키지를 참조하세요.