[flutter] 플러터 shimmer를 사용한 날씨 앱 디자인 예시

11 Dec 2023

flutter

이번에는 플러터를 사용하여 Shimmer 효과를 적용한 날씨 앱 디자인을 살펴보겠습니다. Shimmer 효과는 사용자 인터페이스에서 로딩 중인 콘텐츠를 강조하는 데 사용되며, 사용자에게 로딩 중임을 시각적으로 알려줍니다.

Shimmer 효과란?

Shimmer 효과는 부드러운 애니메이션으로 로딩 중인 콘텐츠를 표시하는 효과입니다. 텍스트나 이미지와 같은 사용자 인터페이스 요소가 로딩 중임을 나타내기 위해 주로 사용됩니다.

Shimmer 효과를 플러터 앱에 적용하기

Shimmer 효과를 플러터로 구현하려면 shimmer 패키지를 사용할 수 있습니다. 해당 패키지를 이용하면 간단한 코드 몇 줄로 Shimmer 효과를 구현할 수 있습니다.

아래는 예시 코드입니다.

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

void main() {
  runApp(MaterialApp(
    home: WeatherApp(),
  ));
}

class WeatherApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('날씨'),
      ),
      body: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: <Widget>[
            Shimmer.fromColors(
              baseColor: Colors.grey[300],
              highlightColor: Colors.grey[100],
              child: Column(
                children: <Widget>[
                  Container(
                    width: 200.0,
                    height: 20.0,
                    color: Colors.white,
                  ),
                  SizedBox(height: 10),
                  Container(
                    width: 150.0,
                    height: 20.0,
                    color: Colors.white,
                  ),
                ],
              ),
            ),
          ],
        ),
      ),
    );
  }
}

위 코드에서 shimmer 패키지를 임포트하고, Shimmer.fromColors 위젯을 사용하여 Shimmer 효과를 구현하고 있습니다.

위와 같이 간단한 코드로 Shimmer 효과를 쉽게 적용할 수 있습니다.

결론

플러터를 사용하여 Shimmer 효과를 적용한 날씨 앱을 설계하고 구현하는 방법에 대해 알아보았습니다. Shimmer 효과는 로딩 중인 콘텐츠를 사용자에게 시각적으로 알려주어 사용자 경험을 향상시킬 수 있는 강력한 도구입니다. Shimmer 효과를 사용하여 앱의 로딩 화면이나 데이터 로딩 중인 콘텐츠를 디자인하는 데 적극적으로 활용해 보세요.

더 많은 정보는 shimmer 패키지 문서를 참고하시기 바랍니다.