[flutter] 플러터 shimmer를 사용한 퀴즈 게임 애니메이션 예시

11 Dec 2023

flutter

이 게시물에서는 flutter를 사용하여 간단한 퀴즈 게임을 구현하고, 더욱 흥미로운 사용자 경험을 위해 shimmer 효과를 추가하는 방법을 안내하겠습니다.

시작하기

먼저, flutter 프로젝트를 생성하고 필요한 라이브러리를 설치합니다. flutter pub을 사용하여 shimmer 효과를 제공하는 라이브러리인 shimmer을 설치합니다.

flutter create quiz_game
cd quiz_game
flutter pub add shimmer

퀴즈 게임 화면 구현

퀴즈 게임 화면을 구현하기 위해 세 가지 핵심 구성 요소를 사용합니다.

질문을 표시하는 TextView
보기를 나열하는 ListView
답변을 확인하는 버튼

다음은 해당 기능을 가진 퀴즈 게임 화면을 구현한 예시 코드입니다.

import 'package:flutter/material.dart';

class QuizGameScreen extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('퀴즈 게임'),
      ),
      body: Padding(
        padding: EdgeInsets.all(16.0),
        child: Column(
          crossAxisAlignment: CrossAxisAlignment.start,
          children: <Widget>[
            Text(
              '다음 중 과일이 아닌 것은?',
              style: TextStyle(
                fontSize: 20,
                fontWeight: FontWeight.bold,
              ),
            ),
            SizedBox(height: 20),
            ListView(
              shrinkWrap: true,
              children: <Widget>[
                ListTile(
                  title: Text('사과'),
                ),
                ListTile(
                  title: Text('감'),
                ),
                ListTile(
                  title: Text('고구마'),
                ),
              ],
            ),
            SizedBox(height: 20),
            ElevatedButton(
              onPressed: () {
                // 답변 확인 로직 추가
              },
              child: Text('정답 확인'),
            ),
          ],
        ),
      ),
    );
  }
}

Shimmer 효과 추가

이제 shimmer 효과를 추가하여 퀴즈 화면을 더 동적으로 만들어 보겠습니다. ListView를 감싸는 Shimmer 위젯을 사용하여 보기 목록이 로딩 중임을 나타

목차

시작하기

퀴즈 게임 화면 구현

Shimmer 효과 추가