이번에는 Flutter를 사용하여 작성한 개인 페이지 화면을 소개하겠습니다.
MyPageScreen 클래스 ✨
MyPageScreen 클래스는 사용자의 계정 정보, 티어, 그리고 다양한 기능을 제공합니다. 코드를 살펴보면서 각 부분에 대해 자세히 알아보겠습니다.
주요 기능과 코드 분석 🎭
1. 전체 코드
아래 코드는 Flutter를 사용하여 개인 페이지 화면을 구성하는 코드입니다. 각 구성 요소에 대한 설명과 기능을 확인할 수 있습니다. 각 버튼을 클릭했을 때, Navigator.pushNamed()를 활용하여 화면을 전환시켜줍니다. 상단의 소개문구에 들어가는 이름과 티어는 현재 로그인한 사용자의 정보를 Firestore Authentication를 통해 가져와서 출력합니다.
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;
String tier = "Gold"; // 사용자의 티어 정보
return Scaffold(
appBar: AppBar(
leading: IconButton(
icon: Icon(Icons.arrow_back),
onPressed: () {
Navigator.pop(context); // 뒤로가기 버튼 클릭 시 이전 화면으로 이동
},
),
backgroundColor: Color(0xA545B0C5),
),
body: Center(
child: Container(
decoration: BoxDecoration(
gradient: LinearGradient(
begin: Alignment(-0.00, -1.00),
end: Alignment(0, 1),
colors: [Color(0xA545B0C5), Color(0xFF4681C6), Color(0xFF4681C6)],
),
),
child: Column(
children: [
// 계정 정보
Container(
margin: EdgeInsets.only(left: widthRatio * 53),
child: Row(
children: [
Image.asset(
"assets/app_logo.png",
width: widthRatio * 64,
height: heightRatio * 64,
),
Container(
margin: EdgeInsets.only(left: widthRatio * 15),
alignment: Alignment.centerLeft,
child:FutureBuilder<dynamic>(
future: getCurrentUser(), // 현재 로그인한 사용자 정보를 가져옵니다.
builder: (context, snapshot) {
if (snapshot.connectionState == ConnectionState.waiting) {
return const CircularProgressIndicator();
} else if (snapshot.hasError) {
return Text('Error: ${snapshot.error}');
} else {
final bool isLogin = snapshot.data != '';
return Text(
'${snapshot.data['username']}님, 안녕하세요!\n회원님의 티어는 ${tier}입니다.',
style: TextStyle(
color: Colors.black,
fontSize: 16,
fontFamily: 'GowunBatang',
fontWeight: FontWeight.w400,
height: 0,
letterSpacing: -0.40,
),
);
}
},
),
),
],
),
),
// 티어 기준표 버튼
Container(
margin: EdgeInsets.only(
left: widthRatio * 280,
right: widthRatio * 25,
),
width: widthRatio * 81,
height: heightRatio * 24,
alignment: Alignment.center,
decoration: ShapeDecoration(
color: Color(0x7F666666),
shape: RoundedRectangleBorder(
borderRadius: BorderRadius.circular(12),
),
),
child: Text(
'티어기준표',
style: TextStyle(
color: Colors.black,
fontSize: 14,
fontFamily: 'GowunBatang',
fontWeight: FontWeight.w400,
height: 0,
letterSpacing: -0.35,
),
),
),
// 기능 버튼
Container(
margin: EdgeInsets.only(top: heightRatio * 30),
width: widthRatio * 375,
height: heightRatio * 516,
decoration: ShapeDecoration(
color: Colors.white.withOpacity(0.30000001192092896),
shape: RoundedRectangleBorder(
borderRadius: BorderRadius.circular(50),
),
),
child: Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: [
// 계정 정보 수정 버튼
Row(
children: [
Container(
margin: EdgeInsets.only(
top: heightRatio * 80, left: widthRatio * 67),
width: widthRatio * 82,
height: heightRatio * 74,
child: Column(
children: [
SvgPicture.asset(
'assets/my_page_screen_icon/edit_account_btn.svg'),
SizedBox(height: heightRatio * 8,),
Text(
'계정 정보 수정',
style: TextStyle(
color: Colors.black,
fontSize: 14,
fontFamily: 'GowunBatang',
fontWeight: FontWeight.w400,
height: 0,
letterSpacing: -0.35,
),
),
],
),
),
// 관리자 기능 버튼 (관리자 계정만 표시)
Container(
child: FirebaseAuth.instance.currentUser?.uid == "XeiP4lpq3pQwYfSr41f6DWp0Tc72" ? GestureDetector(
child: Container(
margin: EdgeInsets.only(
top: heightRatio * 80, left: widthRatio * 78),
width: widthRatio * 82,
height: heightRatio * 74,
child: Column(
children: [
Icon(
Icons.manage_accounts,
color: Colors.white,
size: 36,
),
SizedBox(height: heightRatio * 8,),
Text(
'관리자 기능',
style: TextStyle(
color: Colors.black,
fontSize: 14,
fontFamily: 'GowunBatang',
fontWeight: FontWeight.w400,
height: 0,
letterSpacing: -0.35,
),
),
],
),
),
onTap: () async{
Navigator.pushNamed(context, '/admin'); // 관리자 페이지로 이동
},
) : Container(),
)
],
),
// 찜한 도서, 최근에 본 책 버튼
Row(
children: [
// 찜한 도서 버튼
Container(
margin: EdgeInsets.only(
top: heightRatio * 70, left: widthRatio * 67),
width: widthRatio * 82,
height: heightRatio * 74,
child: Column(
children: [
SvgPicture.asset(
'assets/my_page_screen_icon/bx_heart.svg'),
SizedBox(height: heightRatio * 8,),
Text(
'찜한 도서',
style: TextStyle(
color: Colors.black,
fontSize: 14,
fontFamily: 'GowunBatang',
fontWeight: FontWeight.w400,
height: 0,
letterSpacing: -0.35,
),
),
],
),
),
// 최근에 본 책 버튼
Container(
margin: EdgeInsets.only(
top: heightRatio * 70, left: widthRatio * 78),
width: widthRatio * 82,
height: heightRatio * 74,
child: Column(
children: [
SvgPicture.asset(
'assets/my_page_screen_icon/recent_book.svg'),
SizedBox(height: heightRatio * 8,),
Text(
'최근에 본 책',
style: TextStyle(
color: Colors.black,
fontSize: 14,
fontFamily: 'GowunBatang',
fontWeight: FontWeight.w400,
height: 0,
letterSpacing: -0.35,
),
),
],
),
),
],
),
// 다독자 랭킹 보기, 완독한 책 버튼
Row(
children: [
// 다독자 랭킹 보기 버튼
GestureDetector(
child: Container(
margin: EdgeInsets.only(
top: heightRatio * 70, left: widthRatio * 60),
width: widthRatio * 95,
height: heightRatio * 74,
child: Column(
children: [
SvgPicture.asset(
'assets/my_page_screen_icon/octicon_trophy_24.svg'),
SizedBox(height: heightRatio * 8,),
Text(
'다독자 랭킹 보기',
style: TextStyle(
color: Colors.black,
fontSize: 14,
fontFamily: 'GowunBatang',
fontWeight: FontWeight.w400,
height: 0,
letterSpacing: -0.35,
),
),
],
),
),
onTap:(){
Navigator.pushNamed(context, '/finishedBook'); // 완독한 책 페이지로 이동
}
),
// 완독한 책 버튼
GestureDetector(
child: Container(
margin: EdgeInsets.only(
top: heightRatio * 70, left: widthRatio * 72),
width: widthRatio * 82,
height: heightRatio * 74,
child: Column(
children: [
SvgPicture.asset(
'assets/my_page_screen_icon/book_icon.svg'),
SizedBox(height: heightRatio * 8,),
Text(
'완독한 책',
style: TextStyle(
color: Colors.black,
fontSize: 14,
fontFamily: 'GowunBatang',
fontWeight: FontWeight.w400,
height: 0,
letterSpacing: -0.35,
),
),
],
),
),
onTap: (){
Navigator.pushNamed(context, '/finishedBook'); // 완독한 책 페이지로 이동
},
)
],
),
],
),
),
],
),
),
),
);
}
컴공 대학생이 군대에서 작성하는 앱 개발 블로그