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

11 Dec 2023

flutter

본 포스트에서는 Flutter Shimmer 라이브러리를 활용하여 교육 앱의 디자인을 어떻게 구현할 수 있는지 살펴보겠습니다. 우리는 근사한 UI/UX를 구현하고자 하는데, 특히 사용자들의 경험을 향상시키는 교육 앱의 디자인을 고민중이었습니다.

1. Flutter Shimmer란?

Flutter Shimmer는 텍스트, 이미지, 혹은 사용자가 지정한 위젯에 일시적으로 그림자가 움직이는 듯한 효과를 주는 라이브러리입니다. 이 효과는 데이터가 로딩되는 동안에 사용자에게 로딩 중임을 시각적으로 전달해줍니다.

Flutter 프로젝트에 Shimmer 라이브러리를 추가하기 위해, 다음과 같이 pubspec.yaml 파일에 의존성을 추가할 수 있습니다:

dependencies:
  shimmer: ^2.0.0

2. 교육 앱 디자인 예시

교육 앱의 홈 화면에서 강좌 목록이 로딩되는 동안, 해당 목록에 대한 Shimmer 효과를 적용하고자 합니다.

다음은 Shimmer 효과를 적용한 강좌 목록의 예시 코드입니다:

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

class CourseListShimmer extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Shimmer.fromColors(
      baseColor: Colors.grey[300],
      highlightColor: Colors.grey[100],
      child: ListView.builder(
        itemCount: 5,
        itemBuilder: (context, index) {
          return ListTile(
            leading: CircleAvatar(),
            title: Text(''),
            subtitle: Text(''),
          );
        },
      ),
    );
  }
}

위의 코드에서, Shimmer 라이브러리를 사용하여 CourseListShimmer 위젯은 ListView.builder의 아이템들에 Shimmer 효과를 적용합니다.

이제, 교육 앱의 홈 화면에는 데이터가 로딩되는 동안 Shimmer 효과가 적용된 강좌 목록이 표시될 것입니다.

3. 결론

Flutter Shimmer 라이브러리를 사용하여 교육 앱의 디자인을 향상시킬 수 있었습니다. 사용자들은 데이터가 로딩되는 동안에도 시각적으로 풍성한 경험을 느끼게 되며, 이는 앱의 사용성과 만족도를 높일 수 있는 가능성을 열어줍니다. Shimmer 효과를 추가함으로써 사용자들에게 부드럽고 쾌적한 앱 사용 경험을 제공할 수 있는 새로운 기회를 열 수 있습니다.

4. 참고 자료

이상으로 Flutter Shimmer를 사용한 교육 앱 디자인에 대한 예시를 살펴보았습니다. 감사합니다.