[flutter] 플러터 shimmer를 사용한 폼 애니메이션 예시

11 Dec 2023

flutter

플러터(Flutter) 앱에서 데이터 로딩 중에 사용자에게 더 나은 사용자 경험을 제공하기 위해 shimmer 효과를 적용할 수 있습니다. 이것은 사용자에게 데이터가 로드 중임을 시각적으로 알려주는 효과가 있습니다. 이 문서에서는 플러터의 shimmer 라이브러리를 사용하여 폼 애니메이션을 구현하는 방법에 대해 설명하겠습니다.

Shimmer 라이브러리 추가

먼저, shimmer 패키지를 pubspec.yaml 파일에 추가해야 합니다. 아래와 같이 dependencies 섹션에 항목을 추가하세요.

dependencies:
  shimmer: ^2.0.0

그런 다음, 터미널에서 아래 명령어를 사용하여 패키지를 가져오세요.

flutter pub get

폼 애니메이션 구현

다음은 폼 애니메이션을 구현하는 간단한 예시입니다. 아래 코드는 이메일과 비밀번호를 입력하는 폼이며, 데이터 로딩 중에 shimmer 효과가 적용됩니다.

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

class LoginForm extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Form(
      child: Column(
        children: <Widget>[
          TextFormField(
            decoration: InputDecoration(
              labelText: 'Email',
            ),
          ),
          SizedBox(height: 20.0),
          TextFormField(
            decoration: InputDecoration(
              labelText: 'Password',
            ),
          ),
          SizedBox(height: 20.0),
          Shimmer.fromColors(
            baseColor: Colors.grey[300],
            highlightColor: Colors.grey[100],
            child: Container(
              height: 40.0,
              color: Colors.grey[300],
            ),
          ),
          SizedBox(height: 20.0),
          ElevatedButton(
            onPressed: () {
              // 로그인 로직
            },
            child: Text('Login'),
          ),
        ],
      ),
    );
  }
}

위 코드에서 Shimmer.fromColors 위젯을 사용하여 shimmer 효과를 구현하였습니다. baseColor와 highlightColor 속성을 사용하여 shimmer 효과의 색상을 지정할 수 있습니다.

결론

이제 플러터에서 shimmer를 사용하여 데이터 로딩 중에 사용자에게 시각적인 인디케이터를 제공하는 폼 애니메이션을 구현하는 방법에 대해 알아보았습니다. 사용자가 앱에서 데이터가 로드 중임을 쉽게 이해할 수 있도록 이런 유형의 시각적 효과를 구현하여 사용자 경험을 향상시킬 수 있습니다.

더 자세한 정보 및 옵션에 대해서는 shimmer 패키지 문서를 참조하시기 바랍니다.