[flutter] 플러터 shimmer를 사용한 메신저 앱 디자인 예시

11 Dec 2023

flutter

이번에는 Flutter와 Shimmer 패키지를 사용하여 메신저 앱의 디자인을 구현하는 방법에 대해 알아보겠습니다. Shimmer는 사용자가 데이터를 기다리고 있다는 시각적인 피드백을 제공하는 데 사용되며, 인기 있는 애플리케이션에서 많이 사용됩니다. 이를 통해 사용자 경험을 향상시킬 수 있습니다.

Shimmer란 무엇인가요?

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: Scaffold(
        body: Center(
          child: Column(
            mainAxisAlignment: MainAxisAlignment.center,
            children: <Widget>[
              Shimmer.fromColors(
                baseColor: Colors.grey[300],
                highlightColor: Colors.grey[100],
                child: Container(
                  width: 200.0,
                  height: 50.0,
                  color: Colors.white,
                ),
              ),
              SizedBox(height: 20),
              Shimmer.fromColors(
                baseColor: Colors.grey[300],
                highlightColor: Colors.grey[100],
                child: Container(
                  width: 200.0,
                  height: 150.0,
                  color: Colors.white,
                ),
              ),
            ],
          ),
        ),
      ),
    );
  }
}

위 코드는 Shimmer 패키지를 사용하여 메시지 입력창과 메시지 목록을 구현한 예시입니다. Shimmer.fromColors를 사용하여 Shimmer 효과의 baseColor와 highlightColor를 설정하고, 해당 효과를 적용할 컨테이너를 정의합니다.

이렇게 구현된 화면은 사용자가 메시지를 입력할 때나 새로운 메시지를 받을 때, 로딩 상태를 나타내어 사용자 경험을 향상시킬 수 있습니다.

마무리

이처럼 Flutter와 Shimmer를 사용하여 메신저 앱의 디자인을 구현할 수 있습니다. Shimmer 효과를 적절히 활용하면 사용자에게 더 나은 경험을 제공할 수 있습니다. 애니메이션 효과를 활용하여 로딩 상태를 시각적으로 나타내는 것은 사용자 경험에 긍정적인 영향을 줄 수 있습니다.

더 많은 정보나 사용 예시는 Shimmer 패키지 공식 문서를 참고하시기 바랍니다.