플러터 앱을 개발할 때, 간단하고 멋진 스플래시 화면을 구현할 수 있습니다. 이번 글에서는 shimmer 효과를 사용하여 스플래시 화면을 만드는 방법에 대해 알아보겠습니다.

Shimmer 효과란?

Shimmer 효과는 콘텐츠가 로드되기 전에 사용자에게 로딩 중임을 시각적으로 표시하는 효과입니다. 이는 사용자들에게 더 나은 사용자 경험을 제공하고, 어플리케이션이 반응하고 있는 것처럼 느끼게 해줍니다.

Shimmer 패키지 설치

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

dependencies:
  shimmer: ^2.0.0

그리고 패키지를 설치해 주세요:

flutter pub get

스플래시 화면에 Shimmer 적용하기

이제 shimmer 패키지를 사용하여 스플래시 화면에 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: SplashScreen(),
    );
  }
}

class SplashScreen extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: Center(
        child: Shimmer.fromColors(
          baseColor: Colors.grey[300],
          highlightColor: Colors.grey[100],
          child: Text(
            'My Awesome App',
            style: TextStyle(fontSize: 40.0, fontWeight: FontWeight.bold),
          ),
        ),
      ),
    );
  }
}

이제 위 코드처럼 shimmer 패키지에서 제공하는 Shimmer.fromColors 위젯을 사용하여 스플래시 화면에 shimmer 효과를 적용할 수 있습니다.

위와 같이 fromColors 생성자를 통해 baseColor와 highlightColor를 설정하여 shimmer 효과의 색상을 지정할 수 있습니다.

이제 앱을 실행하면, 스플래시 화면에 shimmer 효과가 적용된 것을 확인할 수 있을 것입니다!

위 예제에서는 텍스트에 shimmer 효과를 적용하였지만, 다양한 위젯에 shimmer 효과를 적용할 수 있습니다. 이를 통해 더 멋진 및 사용자 친화적인 스플래시 화면을 만들어 보세요.

플러터 shimmer 효과에 대해 더 많은 정보를 원하신다면, shimmer 패키지 문서를 참고하세요.