[flutter] 플러터 shimmer를 이용한 앱의 캘린더 뷰 애니메이션 구현 방법

11 Dec 2023

flutter

플러터(Flutter)는 iOS 및 Android 앱을 위한 빠르고 화려한 사용자 인터페이스를 구축하는 크로스 플랫폼 프레임워크입니다. 이번에는 플러터의 shimmer 효과를 이용하여 앱의 캘린더 뷰에 애니메이션을 구현하는 방법에 대해 알아보겠습니다.

캘린더 뷰 위젯 추가

먼저, 플러터의 table_calendar 패키지를 사용하여 캘린더 뷰 위젯을 앱에 추가합니다. 이 패키지는 캘린더 기능을 가진 사용자 정의 가능한 위젯을 제공하여 쉽게 캘린더를 표시하고 관리할 수 있도록 도와줍니다.

dependencies:
  table_calendar: ^2.3.3

위와 같이 pubspec.yaml 파일에 table_calendar 패키지를 추가하고, 다음과 같이 캘린더 뷰 위젯을 구현합니다.

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

class CalendarView extends StatefulWidget {
  @override
  _CalendarViewState createState() => _CalendarViewState();
}

class _CalendarViewState extends State<CalendarView> {
  CalendarController _controller;

  @override
  void initState() {
    super.initState();
    _controller = CalendarController();
  }

  @override
  Widget build(BuildContext context) {
    return TableCalendar(
      calendarController: _controller,
    );
  }
}

Shimmer 효과 추가

이제 shimmer 패키지를 사용하여 table_calendar 위젯에 shimmer 효과를 적용합니다. shimmer 패키지는 로딩 시 콘텐츠가 로드되는 것처럼 보이는 효과를 제공합니다.

dependencies:
  shimmer: ^2.0.0

pubspec.yaml 파일에 shimmer 패키지를 추가하고, 캘린더 뷰에서 shimmer 효과를 적용합니다.

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

class CalendarView extends StatefulWidget {
  @override
  _CalendarViewState createState() => _CalendarViewState();
}

class _CalendarViewState extends State<CalendarView> {
  CalendarController _controller;

  @override
  void initState() {
    super.initState();
    _controller = CalendarController();
  }

  @override
  Widget build(BuildContext context) {
    return Shimmer.fromColors(
      baseColor: Colors.grey[300],
      highlightColor: Colors.grey[100],
      child: TableCalendar(
        calendarController: _controller,
      ),
    );
  }
}

이제 빛나는 shimmer 효과가 적용된 캘린더 뷰 애니메이션을 감상할 수 있습니다.

결론

위에서는 플러터의 shimmer 패키지를 사용하여 앱의 캘린더 뷰에 쉽게 shimmer 효과를 적용하는 방법에 대해 알아보았습니다. 캘린더 뷰에 shimmer 효과를 적용함으로써 사용자에게 로딩 상태를 시각적으로 알리고, 더 나은 사용자 경험을 제공할 수 있습니다.

더 많은 플러터 및 캘린더 관련 기능 및 효과는 해당 문서를 참고하시기 바랍니다.