[flutter] 플러터 shimmer를 이용한 UI 디자인 팁

11 Dec 2023

flutter

플러터(Flutter)는 아름다운 UI(User Interface)를 만들 수 있는 강력한 도구입니다. UI에 쉽게 적용할 수 있는 효과 중 하나는 Shimmer입니다. 이 글에서는 Shimmer를 이용하여 플러터 앱의 UI 디자인을 개선하는 방법에 대해 알아보겠습니다.

Shimmer란 무엇인가요?

Shimmer는 UI에 반짝이는 효과를 주는 애니메이션 기술입니다. 텍스트나 이미지 등의 요소가 로딩 중일 때 화면을 화려하게 반짝이는 효과를 주어 사용자 경험을 향상시킬 수 있습니다.

Shimmer를 이용해 UI 디자인 개선하기

플러터에서 Shimmer 효과를 구현하려면 shimmer 패키지를 사용하면 됩니다. 이 패키지를 사용하여 로딩 중인 UI 요소를 반짝이는 효과로 꾸밀 수 있습니다.

예제 코드

아래는 Shimmer를 사용하여 플러터 앱의 Text 위젯에 반짝이는 효과를 주는 예제 코드입니다.

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(
        appBar: AppBar(
          title: Text('Shimmer 예제'),
        ),
        body: Center(
          child: Shimmer.fromColors(
            baseColor: Colors.grey[300],
            highlightColor: Colors.grey[100],
            child: Text(
              '로딩 중...',
              style: TextStyle(fontSize: 40.0, fontWeight: FontWeight.bold),
            ),
          ),
        ),
      ),
    );
  }
}

위 코드에서 Shimmer.fromColors 위젯을 사용하여 로딩 중인 텍스트에 Shimmer 효과를 주었습니다.

결론

Shimmer 효과를 통해 앱의 로딩 시간 동안 사용자에게 더 나은 시각적 효과를 제공할 수 있습니다. 플러터의 Shimmer 기능을 활용하여 UI를 더욱 생동감 있게 만들어 보세요!

더 많은 Shimmer 효과 예제 및 활용 방법은 shimmer 패키지의 문서를 참고하시기 바랍니다.