245 모달 컴포넌트 제작

lib/presentation/alarm/screens/schedule_start_screen.dart

@@ -3,77 +3,114 @@ import 'package:flutter_svg/svg.dart';
 import 'package:go_router/go_router.dart';
 
 import 'package:on_time_front/domain/entities/schedule_entity.dart';
-
 import 'package:on_time_front/presentation/shared/components/button.dart';
+import 'package:on_time_front/presentation/shared/components/modal_component.dart';
 
-class ScheduleStart extends StatelessWidget {
+class ScheduleStartScreen extends StatefulWidget {
   final ScheduleEntity schedule;
 
-  const ScheduleStart({
+  const ScheduleStartScreen({
     super.key,
     required this.schedule,
   });
 
+  @override
+  State<ScheduleStartScreen> createState() => _ScheduleStartScreenState();
+}
+
+class _ScheduleStartScreenState extends State<ScheduleStartScreen> {
+  void _showModal(BuildContext context) {
+    showDialog(
+      context: context,
+      barrierDismissible: false,
+      builder: (BuildContext context) {
+        return ModalComponent(
+          leftPressed: () {
+            context.go('/home');
+          },
+          rightPressed: () => Navigator.of(context).pop(),
+          modalTitleText: '정말 나가시겠어요?',
+          modalDetailText: '이 화면을 나가면\n함께 약속을 준비할 수 없게 돼요.',
+          leftButtonText: '나갈래요',
+          leftButtonColor: Theme.of(context).colorScheme.surfaceContainerLow,
+          leftButtonTextColor: Theme.of(context).colorScheme.outline,
+          rightButtonText: '있을래요',
+          rightButtonColor: Theme.of(context).colorScheme.primary,
+          rightButtonTextColor: Theme.of(context).colorScheme.onPrimary,
+        );
+      },
+    );
+  }
+
   @override
   Widget build(BuildContext context) {
     return Scaffold(
-      appBar: AppBar(
-        centerTitle: true,
-      ),
-      body: Column(
+      body: Stack(
         children: [
-          Padding(
-            padding: const EdgeInsets.only(top: 90),
-            child: Center(
-              child: Column(
-                mainAxisSize: MainAxisSize.min,
-                children: [
-                  Text(
-                    schedule.scheduleName,
-                    style: const TextStyle(
-                      fontSize: 40,
-                      fontWeight: FontWeight.bold,
-                      color: Color(0xff5C79FB),
-                    ),
-                  ),
-                  const SizedBox(height: 8),
-                  Text(
-                    schedule.place.placeName,
-                    style: const TextStyle(
-                      fontSize: 25,
-                      fontWeight: FontWeight.bold,
-                    ),
-                    textAlign: TextAlign.center,
+          Column(
+            children: [
+              Padding(
+                padding: const EdgeInsets.only(top: 60),
+                child: Center(
+                  child: Column(
+                    mainAxisSize: MainAxisSize.min,
+                    children: [
+                      Text(
+                        widget.schedule.scheduleName,
+                        style: const TextStyle(
+                          fontSize: 40,
+                          fontWeight: FontWeight.bold,
+                          color: Color(0xff5C79FB),
+                        ),
+                      ),
+                      const SizedBox(height: 8),
+                      Text(
+                        widget.schedule.place.placeName,
+                        style: const TextStyle(
+                          fontSize: 25,
+                          fontWeight: FontWeight.bold,
+                        ),
+                        textAlign: TextAlign.center,
+                      ),
+                      const SizedBox(height: 15),
+                      Text(
+                        '지금 준비 시작 안하면 늦어요!',
+                        style: const TextStyle(
+                          fontSize: 15,
+                        ),
+                        textAlign: TextAlign.center,
+                      ),
+                      Padding(
+                        padding: const EdgeInsets.only(top: 50),
+                        child: SvgPicture.asset(
+                          'characters/character.svg',
+                          package: 'assets',
+                          width: 204,
+                          height: 269,
+                        ),
+                      ),
+                    ],
                   ),
-                  const SizedBox(height: 15),
-                  Text(
-                    '지금 준비 시작 안하면 늦어요!',
-                    style: const TextStyle(
-                      fontSize: 15,
-                    ),
-                    textAlign: TextAlign.center,
-                  ),
-                  Padding(
-                    padding: const EdgeInsets.only(top: 20),
-                    child: SvgPicture.asset(
-                      'characters/character.svg',
-                      package: 'assets',
-                      width: 204,
-                      height: 269,
-                    ),
-                  )
-                ],
+                ),
               ),
-            ),
+              const Spacer(),
+              Padding(
+                padding: const EdgeInsets.only(bottom: 30),
+                child: Button(
+                  text: '준비 시작',
+                  onPressed: () async {
+                    context.go('/alarmScreen', extra: widget.schedule);
+                  },
+                ),
+              ),
+            ],
           ),
-          const Spacer(),
-          Padding(
-            padding: const EdgeInsets.only(bottom: 30),
-            child: Button(
-              text: '준비 시작',
-              onPressed: () async {
-                context.go('/alarmScreen', extra: schedule);
-              },
+          Positioned(
+            top: 10,
+            right: 10,
+            child: IconButton(
+              icon: const Icon(Icons.close),
+              onPressed: () => _showModal(context),
             ),
           ),
         ],

lib/presentation/moving/screens/moving_screen.dart

@@ -0,0 +1,12 @@
+import 'package:flutter/material.dart';
+
+class MovingScreen extends StatelessWidget {
+  const MovingScreen({super.key});
+
+  @override
+  Widget build(BuildContext context) {
+    return Container(
+      child: Text('this is moving screen'),
+    );
+  }
+}

lib/presentation/shared/components/modal_component.dart

@@ -0,0 +1,127 @@
+import 'dart:ui';
+import 'package:flutter/material.dart';
+
+class ModalComponent extends StatelessWidget {
+  final VoidCallback leftPressed;
+  final VoidCallback rightPressed;
+  final String modalTitleText;
+  final String modalDetailText;
+  final String leftButtonText;
+  final String rightButtonText;
+  final Color leftButtonColor;
+  final Color leftButtonTextColor;
+  final Color rightButtonColor;
+  final Color rightButtonTextColor;
+
+  const ModalComponent({
+    super.key,
+    required this.leftPressed,
+    required this.rightPressed,
+    required this.modalTitleText,
+    required this.modalDetailText,
+    required this.leftButtonText,
+    required this.rightButtonText,
+    required this.leftButtonColor,
+    required this.leftButtonTextColor,
+    required this.rightButtonColor,
+    required this.rightButtonTextColor,
+  });
+
+  @override
+  Widget build(BuildContext context) {
+    return BackdropFilter(
+      filter: ImageFilter.blur(sigmaX: 0, sigmaY: 0),
+      child: AlertDialog(
+        backgroundColor: Colors.white,
+        contentPadding: const EdgeInsets.all(20),
+        shape: RoundedRectangleBorder(
+          borderRadius: BorderRadius.circular(12),
+        ),
+        content: SizedBox(
+          width: 276,
+          height: 145,
+          child: Column(
+            mainAxisAlignment: MainAxisAlignment.spaceBetween,
+            crossAxisAlignment: CrossAxisAlignment.start,
+            children: [
+              // Title & Description Section
+              Column(
+                crossAxisAlignment: CrossAxisAlignment.start,
+                children: [
+                  Text(
+                    modalTitleText,
+                    style: const TextStyle(
+                      fontSize: 20,
+                      fontWeight: FontWeight.bold,
+                    ),
+                  ),
+                  const SizedBox(height: 10),
+                  Text(
+                    modalDetailText,
+                    style: const TextStyle(
+                      fontSize: 13,
+                    ),
+                  ),
+                ],
+              ),
+              // Buttons Section
+              Row(
+                mainAxisAlignment: MainAxisAlignment.spaceEvenly,
+                children: [
+                  _Button(
+                    onPressed: leftPressed,
+                    text: leftButtonText,
+                    backgroundColor: leftButtonColor,
+                    textColor: leftButtonTextColor,
+                  ),
+                  const SizedBox(width: 8),
+                  _Button(
+                    onPressed: rightPressed,
+                    text: rightButtonText,
+                    backgroundColor: rightButtonColor,
+                    textColor: rightButtonTextColor,
+                  ),
+                ],
+              ),
+            ],
+          ),
+        ),
+      ),
+    );
+  }
+}
+
+class _Button extends StatelessWidget {
+  final VoidCallback onPressed;
+  final String text;
+  final Color backgroundColor;
+  final Color textColor;
+
+  const _Button({
+    required this.onPressed,
+    required this.text,
+    required this.backgroundColor,
+    required this.textColor,
+  });
+
+  @override
+  Widget build(BuildContext context) {
+    return SizedBox(
+      width: 114,
+      height: 43,
+      child: TextButton(
+        style: TextButton.styleFrom(
+          backgroundColor: backgroundColor,
+          shape: RoundedRectangleBorder(
+            borderRadius: BorderRadius.circular(8),
+          ),
+        ),
+        onPressed: onPressed,
+        child: Text(
+          text,
+          style: TextStyle(color: textColor, fontSize: 18),
+        ),
+      ),
+    );
+  }
+}

lib/presentation/shared/router/go_router.dart

@@ -11,6 +11,7 @@ import 'package:on_time_front/presentation/app/bloc/app_bloc.dart';
 import 'package:on_time_front/presentation/calendar/screens/calendar_screen.dart';
 import 'package:on_time_front/presentation/home/screens/home_screen.dart';
 import 'package:on_time_front/presentation/login/screens/sign_in_main_screen.dart';
+import 'package:on_time_front/presentation/moving/screens/moving_screen.dart';
 import 'package:on_time_front/presentation/onboarding/screens/onboarding_screen.dart';
 import 'package:on_time_front/presentation/onboarding/screens/onboarding_start_screen.dart';
 import 'package:on_time_front/presentation/schedule_create/schedule_spare_and_preparing_time/preparation_form/screens/preparation_edit_form.dart';
@@ -93,7 +94,7 @@ GoRouter goRouterConfig(AppBloc bloc) {
         path: '/scheduleStart',
         name: 'scheduleStart',
         builder: (context, state) {
-          return ScheduleStart(schedule: state.extra as ScheduleEntity);
+          return ScheduleStartScreen(schedule: state.extra as ScheduleEntity);
         },
       ),
       GoRoute(
@@ -116,6 +117,10 @@ GoRouter goRouterConfig(AppBloc bloc) {
           );
         },
       ),
+      GoRoute(
+        path: '/moving',
+        builder: (context, state) => MovingScreen(),
+      ),
     ],
   );
 }