[Flutter] Flutter를 활용한 책벌레 랭킹 화면 구현 : BookwormScreen 클래스

이번에는 Flutter를 사용하여 책벌레 랭킹 화면을 구현하는 방법에 대해 알아보겠습니다.

BookwormScreen 클래스 소개 ✨

BookwormScreen 클래스 사용자들 중에서 가장 많은 도서를 완독한 사용자들을 보여주는 화면입니다. 이를 통해 독서 열정이 높은 사용자들을 시각적으로 확인할 수 있습니다.

주요 기능과 코드 분석 🎭

1. 화면 레이아웃 구성

아래 코드는 책벌레 랭킹 화면을 구성하는 코드입니다. 여기서는 Scaffold, AppBar, Drawer 등의 위젯을 사용하여 전체적인 화면 레이아웃을 구성하고, ListView.builder를 사용하여 책벌레 랭킹 목록을 동적으로 생성합니다.

import 'package:flutter/material.dart';
import 'package:flutter_svg/flutter_svg.dart';
import 'package:cloud_firestore/cloud_firestore.dart';

class BookwormScreen extends StatelessWidget {
  const BookwormScreen({Key? key});

  @override
  Widget build(BuildContext context) {
    // 화면 크기 계산
    double deviceWidth = MediaQuery.of(context).size.width;
    double deviceHeight = MediaQuery.of(context).size.height;
    double widthRatio = deviceWidth / 375;
    double heightRatio = deviceHeight / 812;

    return Scaffold(
      appBar: AppBar(
        title: Text('책벌레 랭킹'),
      ),
      drawer: Drawer(
        // 사용자 메뉴 구현
        child: DrawerWidget(),
      ),
      body: Center(
        child: Container(
          // 배경 설정
          decoration: BoxDecoration(
            gradient: LinearGradient(
              begin: Alignment.topCenter,
              end: Alignment.bottomCenter,
              colors: [Color(0xA545B0C5), Color(0xFF4580C5), Color(0xFF4580C5)],
            ),
          ),
          child: Column(
            children: [
              // 네비게이션 바
              NavWidget(),
              // 책벌레 랭킹 목록
              Expanded(
                child: ListView.builder(
                  itemCount: 10, // 상위 10명의 책벌레를 표시
                  itemBuilder: (BuildContext context, int index) {
                    return Container(
                      // 각 사용자 정보를 나타내는 컨테이너
                      padding: EdgeInsets.all(10),
                      margin: EdgeInsets.symmetric(vertical: 10, horizontal: 20),
                      decoration: BoxDecoration(
                        color: Colors.white,
                        borderRadius: BorderRadius.circular(20),
                      ),
                      child: Row(
                        children: [
                          // 순위 아이콘
                          SvgPicture.asset(
                            "assets/app_icon/No.${index + 1}_icon.svg",
                            width: 50,
                            height: 50,
                          ),
                          SizedBox(width: 10),
                          // 사용자 닉네임 및 부대 정보
                          Column(
                            crossAxisAlignment: CrossAxisAlignment.start,
                            children: [
                              Text(
                                "사용자 닉네임",
                                style: TextStyle(
                                  fontWeight: FontWeight.bold,
                                  fontSize: 18,
                                ),
                              ),
                              SizedBox(height: 5),
                              Text(
                                "소속 부대",
                                style: TextStyle(
                                  color: Colors.grey,
                                ),
                              ),
                            ],
                          ),
                          Spacer(),
                          // 도서 소유 수 표시
                          Container(
                            padding: EdgeInsets.symmetric(vertical: 5, horizontal: 10),
                            decoration: BoxDecoration(
                              color: Color(0xFF67A2E8),
                              borderRadius: BorderRadius.circular(20),
                            ),
                            child: Text(
                              "20권", // 도서 소유 수
                              style: TextStyle(
                                color: Colors.white,
                                fontWeight: FontWeight.bold,
                              ),
                            ),
                          ),
                        ],
                      ),
                    );
                  },
                ),
              ),
            ],
          ),
        ),
      ),
    );
  }
}

2. 데이터베이스 연동

사용자 랭킹 정보를 Firestore 데이터베이스에서 가져오는 코드입니다.

Future<List<Map<dynamic, dynamic>>> getUserRanker() async {
  QuerySnapshot<Map<String, dynamic>> querysnapshot = await FirebaseFirestore.instance
    .collection('users')
    .orderBy('bookCount', descending: true)
    .limit(10)
    .get();

  if (querysnapshot.docs.isNotEmpty) {
    // 상위 10명의 사용자 정보를 리스트로 변환하여 반환
    List<Map<String, dynamic>> topRankers = querysnapshot.docs.map((doc) => doc.data()).toList();
    return topRankers;
  } else {
    return [];
  }
}

위 함수는 Firestore에서 사용자 데이터를 가져오는 비동기 함수입니다. orderBy를 사용하여 도서 보유량에 따라 내림차순으로 정렬하고, limit을 사용하여 상위 10명의 사용자만 가져옵니다. 가져온 데이터는 리스트로 변환하여 반환됩니다.

이렇게 책벌레 랭킹 화면을 구현하고 Firestore와 연동하여 사용자 데이터를 표시할 수 있습니다.