💄 style/MyPage UI #11

lib/assets/colors/color.dart

@@ -7,6 +7,12 @@ const Color mainOrange = Color(0xFFFF7A5D);
 // 갈색
 const Color mainBrown = Color(0xFF754342);
 
+// 성별 색깔
+// 남
+const Color genderMale = Color(0xFFB1B9FF);
+// 여
+const Color genderFemale = Color(0xFFFFBABA);
+
 // 회색 [ 밝은 순 ]
 const Color grey1 = Color(0xFFF5F5F5);
 const Color grey2 = Color(0xFFdedede);

lib/main.dart

@@ -9,9 +9,10 @@ import 'package:schedule_with/ui/login/view/login_main.dart';
 import 'package:schedule_with/ui/login/view/login_password_reset.dart';
 import 'package:schedule_with/ui/login/view/login_password_reset_done.dart';
 import 'package:schedule_with/ui/login/view/login_read_terms.dart';
+import 'package:schedule_with/ui/mypage/view/my_page_info_modify.dart';
 import 'package:schedule_with/ui/notification/view/notification_main.dart';
 import 'package:schedule_with/ui/notification/view/notification_request_detail.dart';
-import 'package:schedule_with/widget/bottom_navigation_bar.dart';
+import 'package:schedule_with/widget/main_bottom_navigation_bar.dart';
 
 void main(){
   runApp(ScheduleWith());
@@ -37,7 +38,7 @@ class _ScheduleWithState extends State<ScheduleWith> {
         ),
         primarySwatch: Colors.blue
       ),
-      home: BottomNavigationBar2(),
+      home: MainBottomNavigationBar(),
       // Name을 지정하여 페이지 이동
       getPages: [
         GetPage(name: '/join', page: () => LoginJoin()),
@@ -50,6 +51,7 @@ class _ScheduleWithState extends State<ScheduleWith> {
         GetPage(name: '/readTerms', page: () => LoginReadTerms()),
         GetPage(name: '/notificationMain', page: () => NotificationMain()),
         GetPage(name: '/requestDetail', page: () => NotificationRequestDetail()),
+        GetPage(name: '/myPageInfoModify', page: () => MyPageInfoModify()),
       ],
     );
   }

lib/ui/home/view/home_main.dart

@@ -37,6 +37,7 @@ class _HomeMainState extends State<HomeMain> {
       supportedLocales: [
         const Locale("ko","KO")
       ],
+      debugShowCheckedModeBanner: false,
       home: Scaffold(
         // 화면 배경색 설정
         backgroundColor: Colors.white,

lib/ui/mypage/view/my_page_info_modify.dart

@@ -0,0 +1,76 @@
+import 'package:flutter/cupertino.dart';
+import 'package:flutter/material.dart';
+import 'package:flutter_svg/svg.dart';
+import 'package:get/get.dart';
+import 'package:get/get_core/src/get_main.dart';
+import 'package:schedule_with/assets/colors/color.dart';
+import 'package:schedule_with/widget/main_profile.dart';
+
+class MyPageInfoModify extends StatefulWidget {
+  const MyPageInfoModify({super.key});
+
+  @override
+  State<MyPageInfoModify> createState() => _MyPageInfoModifyState();
+}
+
+class _MyPageInfoModifyState extends State<MyPageInfoModify> {
+  @override
+  Widget build(BuildContext context) {
+    return Scaffold(
+      // 상단 툴바 설정
+      appBar: PreferredSize(
+        preferredSize: Size.fromHeight(50),
+        child: AppBar(
+          backgroundColor: Colors.white,
+          // 뒤로가기 버튼
+          leading: IconButton(
+            padding: EdgeInsets.zero,
+            icon: SvgPicture.asset("lib/assets/icon/icon_angel_brackets.svg"),
+            onPressed: () {
+              Get.back();
+            },
+          ),
+          // 타이틀
+          centerTitle: true,
+          title: Container(
+            padding: EdgeInsets.only(bottom: 8),
+            child: Text(
+              "개인정보 수정",
+              style: TextStyle(fontSize: 16, fontWeight: FontWeight.bold),
+            ),
+          ),
+          // 완료 버튼
+          actions: [
+            InkWell(
+              onTap: () {
+
+              },
+              child: Container(
+                padding: EdgeInsets.fromLTRB(0, 0, 10, 8),
+                child: Text("완료",style: TextStyle(fontSize: 16,fontWeight: FontWeight.bold,color: mainOrange),),
+              ),
+            )
+          ],
+        ),
+      ),
+      // 개인정보 수정 화면
+      body: Column(
+        children: [
+          // 프로필 배경 및 프로필 사진 및 이름 + 수정 아이콘 설정
+          Expanded(
+            flex: 2,
+              child: MainProfile()
+          ),
+          Expanded(
+            flex: 3,
+              child: Container(
+                color: Colors.green,
+                child: Text("zz"),
+              )
+          )
+
+        ],
+      ),
+    );
+  }
+}

lib/ui/mypage/view/my_page_main.dart

@@ -0,0 +1,169 @@
+import 'package:flutter/material.dart';
+import 'package:flutter_svg/flutter_svg.dart';
+import 'package:get/get.dart';
+import 'package:schedule_with/assets/colors/color.dart';
+import 'package:schedule_with/widget/main_button.dart';
+
+import '../../../widget/main_app_bar.dart';
+
+class MyPageMain extends StatefulWidget {
+  const MyPageMain({super.key});
+
+  @override
+  State<MyPageMain> createState() => _MyPageMainState();
+}
+
+class _MyPageMainState extends State<MyPageMain> {
+  @override
+  Widget build(BuildContext context) {
+    return Scaffold(
+      // 화면 배경색 설정
+      backgroundColor: Colors.white,
+      // 상단 툴바
+      appBar: PreferredSize(
+        preferredSize: Size.fromHeight(50),
+        child: MainAppBar(),
+      ),
+      body: Column(
+        children: [
+          // 프로필 사진 + 닉네임 + 상세내용 보기 아이콘 + 화면이동 설정
+          InkWell(
+            onTap: () {
+              // 개인정보 수정 화면으로 이동
+              Get.toNamed('/myPageInfoModify');
+            },
+            // 프로필 사진 + 닉네임 + 상세내용 보기 아이콘 설정
+            child: Container(
+              margin: EdgeInsets.fromLTRB(20, 15, 20, 15),
+              child: Row(
+                mainAxisAlignment: MainAxisAlignment.spaceBetween,
+                children: [
+                  // 프로필 사진 + 닉네임 설정
+                  Row(
+                    children: [
+                      SvgPicture.asset(
+                          "lib/assets/icon/icon_profile.svg",
+                          color: genderMale
+                      ),
+                      Padding(padding: EdgeInsets.only(right: 10)),
+                      Text("닉네임",style: TextStyle(fontSize: 16))
+                    ],
+                  ),
+                  // 상세내용 아이콘 설정
+                  SvgPicture.asset("lib/assets/icon/icon_detail_open.svg")
+                ],
+              ),
+            ),
+          ),
+          // 디바이더 설정
+          Container(
+            padding: EdgeInsets.symmetric(horizontal: 10),
+            child: Divider(
+              thickness: 1,
+              height: 1,
+              color: grey2,
+            ),
+          ),
+          // 설정 화면 이동 + "설정" 텍스트 설정
+          InkWell(
+            // 설정 화면 이동
+            onTap: () {
+              // 설정 화면 이동
+            },
+            // "설정" 텍스트 설정
+            child: Container(
+              width: double.infinity,
+              child: Container(
+                padding: EdgeInsets.fromLTRB(20, 15, 0, 15),
+                child: Text("설정"),
+              ),
+            ),
+          ),
+          // 공지사항 화면 이동 + "공지사항" 텍스트 설정
+          InkWell(
+            // 공지사항 화면 이동
+            onTap: () {
+              // 설정 화면 이동
+            },
+            // "공지사항" 텍스트 설정
+            child: Container(
+              width: double.infinity,
+              child: Container(
+                padding: EdgeInsets.fromLTRB(20, 15, 0, 15),
+                child: Text("공지사항"),
+              ),
+            ),
+          ),
+          // 정보 화면 이동 + "정보" 텍스트 설정
+          InkWell(
+            // 정보 화면 이동
+            onTap: () {
+              // 설정 화면 이동
+            },
+            // "정보" 텍스트 설정
+            child: Container(
+              width: double.infinity,
+              child: Container(
+                padding: EdgeInsets.fromLTRB(20, 15, 0, 15),
+                child: Text("정보"),
+              ),
+            ),
+          ),
+          // 문의 화면 이동 + "문의" 텍스트 설정
+          InkWell(
+            // 문의 화면 이동
+            onTap: () {
+              // 설정 화면 이동
+            },
+            // "문의" 텍스트 설정
+            child: Container(
+              width: double.infinity,
+              child: Container(
+                padding: EdgeInsets.fromLTRB(20, 15, 0, 15),
+                child: Text("문의"),
+              ),
+            ),
+          ),
+          // 디바이더 설정
+          Container(
+            padding: EdgeInsets.symmetric(horizontal: 10),
+            child: Divider(
+              thickness: 1,
+              height: 0.5,
+              color: grey2,
+            ),
+          ),
+          // 버전 정보 + "버전" 텍스트 설정
+          Container(
+            width: double.infinity,
+            margin: EdgeInsets.fromLTRB(20, 15, 20, 15),
+            // 버전 정보 + "버전" 텍스트 설정
+            child: Row(
+              mainAxisAlignment: MainAxisAlignment.spaceBetween,
+              children: [
+                Text("버전"),
+                Text("1.1.1")
+              ],
+            ),
+          ),
+          // 로그아웃 팝업창 + "로그아웃" 텍스트 설정
+          InkWell(
+            // 로그아웃 팝업창 설정
+            onTap: () {
+              // 로그아웃 팝업창
+            },
+            // "로그아웃" 텍스트 설정
+            child: Container(
+              width: double.infinity,
+              child: Container(
+                padding: EdgeInsets.fromLTRB(20, 15, 0, 15),
+                child: Text("로그아웃"),
+              ),
+            ),
+          ),
+        ],
+      ),
+    );
+  }
+}
+

lib/widget/bottom_navigation_bar.dart → lib/widget/main_bottom_navigation_bar.dart

@@ -4,14 +4,15 @@ import 'package:get/get.dart';
 import 'package:schedule_with/assets/colors/color.dart';
 import 'package:schedule_with/ui/home/view/home_main.dart';
 import 'package:schedule_with/ui/login/view/login_main.dart';
+import 'package:schedule_with/ui/mypage/view/my_page_main.dart';
 import 'package:schedule_with/ui/notification/view/notification_main.dart';
 import 'package:stylish_bottom_bar/stylish_bottom_bar.dart';
 
 class BottomNavigationBarController extends GetxController {
   var tabIndex = 2.obs;
 }
 
-class BottomNavigationBar2 extends StatelessWidget {
+class MainBottomNavigationBar extends StatelessWidget {
   final BottomNavigationBarController controller = Get.put(BottomNavigationBarController());
 
   final List<Widget> pages = [
@@ -24,7 +25,7 @@ class BottomNavigationBar2 extends StatelessWidget {
     // 알람 메인 화면
     HomeMain(),
     // 더보기 메인 화면
-    HomeMain(),
+    MyPageMain(),
   ];
 
   @override

lib/widget/main_profile.dart

@@ -0,0 +1,67 @@
+import 'package:flutter/material.dart';
+import 'package:flutter_svg/svg.dart';
+
+import '../assets/colors/color.dart';
+
+class MainProfile extends StatelessWidget {
+  const MainProfile({super.key});
+
+  @override
+  Widget build(BuildContext context) {
+    return Stack(
+      children: [
+        // 배경 이미지
+        Padding(
+          padding: EdgeInsets.only(bottom: 35),
+          child: Container(
+            width: double.infinity,
+            color: grey2,
+            // child 로 배경 이미지 설정
+            child: Image.asset("lib/assets/image/profile.png",fit: BoxFit.cover,),
+          ),
+        ),
+        Positioned(
+            bottom: 0,
+            left: 16,
+            child: Row(
+              crossAxisAlignment: CrossAxisAlignment.end,
+              children: [
+                Container(
+                    width: 70,
+                    height: 70,
+                    decoration: BoxDecoration(
+                        borderRadius: BorderRadius.circular(40),
+                        color: Colors.white,
+                        border: Border.all(color: grey2,width: 0.5)
+                    ),
+                    margin: EdgeInsets.only(bottom: 5),
+                    child: FittedBox(
+                        fit: BoxFit.cover,
+                        child: SvgPicture.asset(
+                            "lib/assets/icon/icon_profile.svg",
+                            color: genderMale
+                        )
+                    )
+                ),
+                Padding(
+                    padding: EdgeInsets.fromLTRB(5, 0, 0, 10),
+                    child: Row(
+                      crossAxisAlignment: CrossAxisAlignment.end,
+                      mainAxisAlignment: MainAxisAlignment.spaceBetween,
+                      children: [
+                        Text("이름",style: TextStyle(fontSize: 18,fontWeight: FontWeight.bold),),
+                        Padding(
+                          padding: EdgeInsets.fromLTRB(5, 0, 0, 2),
+                          child: SvgPicture.asset("lib/assets/icon/icon_pen.svg"),
+                        ),
+
+                      ],
+                    )
+                ),
+              ],
+            )
+        ),
+      ],
+    );
+  }
+}