[flutter] 플러터 shimmer 효과를 사용한 앱 예시

11 Dec 2023

flutter

플러터(Flutter)는 Google에서 개발한 사용자 인터페이스(UI)를 작성하기 위한 소프트웨어 개발 키트(SDK)로, 아름다운 앱을 만들기 위한 다양한 기능과 라이브러리를 제공합니다. 이에 대해, 플러터의 한 가지 기능인 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(
        appBar: AppBar(
          title: Text('Shimmer 효과 예시'),
        ),
        body: Shimmer.fromColors(
          baseColor: Colors.grey[300],
          highlightColor: Colors.grey[100],
          child: Center(
            child: Text(
              '로딩 중...',
              style: TextStyle(fontSize: 24.0),
            ),
          ),
        ),
      ),
    );
  }
}

위 코드에서는 shimmer 라이브러리를 사용하여 Shimmer 효과를 적용하고, 간단한 텍스트 “로딩 중…“을 보여줍니다.

결론

플러터의 Shimmer 효과는 앱의 사용자 경험을 향상시키고 로딩 상태를 시각적으로 표현하는 데 유용한 기능입니다. 이를 활용하여 더 멋진 앱을 개발하는 데 도움이 될 것입니다.

해당 예시는 shimmer 라이브러리를 사용하여 작성되었습니다.

이상으로, 플러터에서 Shimmer 효과를 사용한 앱 예시에 대해 살펴보았습니다. 감사합니다!