[flutter] 플러터 shimmer를 이용한 앱의 탭 바 애니메이션 구현

11 Dec 2023

flutter

본 포스트에서는 플러터(Flutter) 앱의 탭 바에 Shimmer 효과를 구현하는 방법에 대해 다루겠습니다.

Shimmer 효과란?

Shimmer 효과는 앱 또는 웹사이트에서 데이터 로딩 시 사용자에게 로딩 중임을 시각적으로 표시해주는 효과입니다. 텍스트나 이미지 등의 요소에 일정한 간격으로 번갈아가며 번쩍이는 효과를 주어 로딩 중임을 알려줍니다.

플러터(Flutter) 앱에 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: DefaultTabController(
        length: 3,
        child: Scaffold(
          appBar: AppBar(
            title: Text('Shimmer Tab Bar'),
            bottom: TabBar(
              tabs: [
                Tab(
                  child: Shimmer.fromColors(
                    baseColor: Colors.grey[300],
                    highlightColor: Colors.white,
                    child: Text('Tab 1'),
                  ),
                ),
                Tab(
                  child: Shimmer.fromColors(
                    baseColor: Colors.grey[300],
                    highlightColor: Colors.white,
                    child: Text('Tab 2'),
                  ),
                ),
                Tab(
                  child: Shimmer.fromColors(
                    baseColor: Colors.grey[300],
                    highlightColor: Colors.white,
                    child: Text('Tab 3'),
                  ),
                ),
              ],
            ),
          ),
          body: TabBarView(
            children: [
              // Tab contents
            ],
          ),
        ),
      ),
    );
  }
}

위 코드에서는 shimmer 라이브러리의 Shimmer.fromColors 위젯을 사용하여 각 탭에 Shimmer 효과를 적용했습니다.

결론

본 포스트에서는 플러터 앱의 탭 바에 Shimmer 효과를 적용하는 방법에 대해 알아보았습니다. Shimmer 효과를 활용하여 앱의 로딩 상태를 시각적으로 표시함으로써 사용자 경험을 향상시킬 수 있습니다.

더 많은 정보는 shimmer 라이브러리의 문서를 참고하시기 바랍니다.