[flutter] 플러터 shimmer를 사용한 헬스케어 앱 디자인 예시

11 Dec 2023

flutter

플러터(Flutter)를 사용하여 헬스케어 앱을 디자인할 때는 사용자 경험을 개선하고 앱의 시각적인吏는 중요하다. 이 예시에서는 shimmer 효과를 사용하여 헬스케어 앱을 디자인하는 방법을 살펴볼 것이다.

Shimmer 효과란?

Shimmer 효과는 콘텐츠가 로딩되는 동안 예상되는 내용에 임시의 반짝이는 효과를 부여하는 것이다. 이를 통해 사용자는 현재 콘텐츠가 로딩 중임을 알 수 있고, 기다리는 동안에도 시각적으로 흥미로운 경험을 할 수 있다.

헬스케어 앱에 Shimmer 효과 적용하기

헬스케어 앱의 예시에서는 사용자의 건강 상태에 대한 정보를 로딩하는 동안 Shimmer 효과를 사용하여 사용자의 대기 시간을 보다 유익하게 만들어볼 것이다.

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

class HealthCareApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Health Care'),
      ),
      body: ListView(
        children: <Widget>[
          ListTile(
            leading: Shimmer.fromColors(
              baseColor: Colors.grey[300],
              highlightColor: Colors.grey[100],
              child: CircleAvatar(
                backgroundColor: Colors.white,
              ),
            ),
            title: Shimmer.fromColors(
              baseColor: Colors.grey[300],
              highlightColor: Colors.grey[100],
              child: Container(
                height: 15,
                color: Colors.white,
              ),
            ),
            subtitle: Shimmer.fromColors(
              baseColor: Colors.grey[300],
              highlightColor: Colors.grey[100],
              child: Container(
                height: 10,
                color: Colors.white,
              ),
            ),
          ),
        ],
      ),
    );
  }
}

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

위의 예시 코드에서는 shimmer 패키지를 사용하여 CircelAvatar, title, subtitle 등의 항목들이 로딩되는 동안 shimmer 효과를 적용했다.

흥미로운 콘텐츠가 로딩되는 동안 사용자는 심심하지 않게 기다릴 수 있으며, 시각적인 요소가 추가되어 사용자가 앱을 보다 더 즐거운 경험을 할 수 있게 도와준다.

결론

플러터를 사용하여 헬스케어 앱을 디자인할 때는 shimmer 효과를 활용하여 사용자에게 더 나은 경험을 제공할 수 있다. Shimmer 효과를 적용하여 앱의 로딩 시간을 좀 더 흥미롭게 만들어보자.