[flutter] 플러터 shimmer를 이용한 앱의 로그인 화면 애니메이션 구현 방법

11 Dec 2023

flutter

플러터는 매우 강력한 UI 라이브러리를 제공하며, 그 중에는 사용자가 화면을 기다리는 동안 로딩 시각적 효과를 제공하는 shimmer도 포함되어 있습니다.

이번 포스트에서는 shimmer를 사용하여 플러터를 이용해 앱의 로그인 화면에 부드러운 애니메이션을 구현하는 방법을 살펴보겠습니다.

1. Shimmer 패키지 추가

먼저, shimmer 패키지를 pubspec.yaml 파일에 추가해야 합니다. 다음과 같이 해당 패키지를 추가합니다.

dependencies:
  shimmer: ^2.0.0

이후, pubspec.yaml 파일이 저장된 위치에서 터미널을 열고 아래 명령을 실행하여 패키지를 설치합니다.

flutter pub get

2. 로그인 화면 설계

플러터에서 shimmer를 사용하여 로그인 화면에 애니메이션을 추가해 보겠습니다.

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

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

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

위의 예시 코드는 간단한 로그인 화면을 구현하고, 해당 부분을 shimmer 애니메이션으로 감싸고 있습니다.

여기서 Shimmer.fromColors 위젯을 사용하여 기본 색상과 강조 색상을 설정하고, 텍스트 위젯을 감싸고 있습니다. 이러한 간단한 설정으로 로딩 시각적 효과를 나타낼 수 있습니다.

이제 메인 화면에서 LoginScreen 위젯을 렌더링하는 방법에 대해 알아봅니다.既存の文言にリンクを含めることができます。具体的には、テキスト.