[flutter] 플러터 shimmer를 사용한 여행 일지 앱 디자인 예시

11 Dec 2023

flutter

들어가기

여행 일지 앱은 사용자가 여행 경험을 기록하고 공유하는 데 도움을 주는데 주로 사용됩니다. 이번 글에서는 플러터의 shimmer 효과를 사용하여 사용자 경험을 향상시키는 여행 일지 앱의 디자인 예시를 살펴보겠습니다.

Shimmer 효과란?

Shimmer 효과는 요소가 로드되기 전에 일시적으로 화면 위를 흘러가는 반짝이는 효과를 말합니다. 이 효과는 사용자가 데이터가 로드되고 있다는 것을 시각적으로 인지할 수 있도록 도와줍니다.

여행 일지 앱 디자인

1. 로딩 화면

여행 일지 앱을 실행할 때, 서버에서 데이터를 가져오는 동안 shimmer 효과를 사용하여 로딩 화면을 구현할 수 있습니다. 이로써 사용자는 데이터가 로드되고 있는지를 시각적으로 확인할 수 있습니다.

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

class LoadingScreen extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: Center(
        child: Shimmer.fromColors(
          baseColor: Colors.grey[300],
          highlightColor: Colors.grey[100],
          child: Text(
            '로딩 중...',
            style: TextStyle(fontSize: 30.0, fontWeight: FontWeight.bold),
          ),
        ),
      ),
    );
  }
}

2. 일지 목록

여행 일지 목록을 표시할 때, 일지 아이템이 로드되는 동안 shimmer 효과를 적용할 수 있습니다. 이는 사용자가 일지가 로드되고 있음을 알 수 있도록 도와줍니다.

ListView.builder(
  itemCount: _journals.length,
  itemBuilder: (context, index) {
    if(_loading) {
      return Shimmer.fromColors(
        baseColor: Colors.grey[300],
        highlightColor: Colors.grey[100],
        child: ListTile(
          leading: CircleAvatar(
            backgroundColor: Colors.grey[300],
          ),
          title: Text(
            '로딩 중...',
            style: TextStyle(fontWeight: FontWeight.bold),
          ),
          subtitle: Text(
            '로딩 중...',
            style: TextStyle(fontWeight: FontWeight.bold),
          ),
        ),
      );
    } else {
      // 여행 일지 아이템 표시
    }
  },
);

3. 상세 정보

개별 여행 일지의 상세 정보를 표시할 때도 shimmer 효과를 사용하여 데이터 로드를 시각적으로 나타낼 수 있습니다.

if(_loading) {
  return Shimmer.fromColors(
    baseColor: Colors.grey[300],
    highlightColor: Colors.grey[100],
    child: Column(
      children: [
        ListTile(
          leading: CircleAvatar(
            backgroundColor: Colors.grey[300],
          ),
          title: Text(
            '로딩 중...',
            style: TextStyle(fontWeight: FontWeight.bold),
          ),
          subtitle: Text(
            '로딩 중...',
            style: TextStyle(fontWeight: FontWeight.bold),
          ),
        ),
        // 추가 상세 정보
      ],
    ),
  );
} else {
  // 상세 정보 표시
}

결론

플러터의 shimmer 효과를 활용하여 여행 일지 앱의 디자인을 더욱 매력적으로 만들 수 있습니다. 이는 사용자가 데이터 로딩 상태를 시각적으로 인지할 수 있게 해주므로 사용자 경험을 개선할 수 있습니다.

이상으로 여행 일지 앱의 shimmer 효과를 사용한 디자인 예시에 대해 알아보았습니다.

Shimmer 패키지

#flutter #shimmer #디자인 #여행 #앱