이번에는 Flutter를 사용하여 책벌레 랭킹 화면을 구현하는 방법에 대해 알아보겠습니다.
BookwormScreen 클래스 사용자들 중에서 가장 많은 도서를 완독한 사용자들을 보여주는 화면입니다. 이를 통해 독서 열정이 높은 사용자들을 시각적으로 확인할 수 있습니다.
아래 코드는 책벌레 랭킹 화면을 구성하는 코드입니다. 여기서는 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});
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,
),
),
),
],
),
);
},
),
),
],
),
),
),
);
}
}
사용자 랭킹 정보를 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와 연동하여 사용자 데이터를 표시할 수 있습니다.