음성추가 카테고리추가 (#16)

* change color and theme * add
blueberry-team · Aug 28, 2024 · e2db427 · e2db427
1 parent 94277dc
commit e2db427
Show file tree

Hide file tree

Showing 30 changed files with 220 additions and 205 deletions.
diff --git a/assets/images/1_smile.svg b/assets/images/1_smile.svg
diff --git a/assets/images/2_angry.svg b/assets/images/2_angry.svg
diff --git a/assets/images/3_funny.svg b/assets/images/3_funny.svg
diff --git a/assets/images/smile.svg b/assets/images/smile.svg
diff --git a/assets/voice/voice_1.mp3 b/assets/voice/voice_1.mp3
diff --git a/assets/voice/voice_1.wav b/assets/voice/voice_1.wav
diff --git a/assets/voice/voice_2.mp3 b/assets/voice/voice_2.mp3
diff --git a/assets/voice/voice_2.wav b/assets/voice/voice_2.wav
diff --git a/assets/voice/voice_3.mp3 b/assets/voice/voice_3.mp3
diff --git a/assets/voice/voice_3.wav b/assets/voice/voice_3.wav
diff --git a/assets/voice/voice_4.mp3 b/assets/voice/voice_4.mp3
diff --git a/lib/core/SplashScreen.dart b/lib/core/SplashScreen.dart
@@ -1,3 +1,4 @@
+import 'package:blueberry_flutter_template/core/TopScreen.dart';
 import 'package:blueberry_flutter_template/feature/onboarding/OnboardingScreen.dart';
 import 'package:blueberry_flutter_template/gen/assets.gen.dart';
 import 'package:flutter/material.dart';
@@ -37,7 +38,7 @@ class _SplashScreenState extends State<SplashScreen> {
       // 초기화 완료 후 메인 화면으로 전환
       if (mounted) {
         hasSeenOnboarding
-                ? context.goNamed(OnboardingScreen.name) // 온보딩 화면을 본 경우
+                ? context.goNamed(TopScreen.name) // 온보딩 화면을 본 경우
                 : context.goNamed(OnboardingScreen.name) // 온보딩 화면을 보지 않은 경우
             ;
       }
@@ -61,7 +62,6 @@ class _SplashScreenState extends State<SplashScreen> {
   Widget build(BuildContext context) {
     // 모바일인 경우 스플래쉬 스크린 표시
     return Scaffold(
-      backgroundColor: Colors.white, // 배경색 설정
       body: Center(
         child: Column(
           mainAxisAlignment: MainAxisAlignment.center,

diff --git a/lib/core/TopScreen.dart b/lib/core/TopScreen.dart
@@ -1,6 +1,7 @@
 import 'package:blueberry_flutter_template/feature/send/SendMessageScreen.dart';
 import 'package:blueberry_flutter_template/feature/setting/SettingScreen.dart';
 import 'package:blueberry_flutter_template/feature/voiceOutput/VoiceOutputScreen.dart';
+import 'package:blueberry_flutter_template/utils/AppColors.dart';
 import 'package:flutter/material.dart';
 import 'package:flutter_riverpod/flutter_riverpod.dart';
 
@@ -53,52 +54,54 @@ class CustomBottomNavigationBar extends StatelessWidget {
 
   @override
   Widget build(BuildContext context) {
-    return Container(
-      margin: EdgeInsets.only(bottom: 60.0),
-      padding: EdgeInsets.symmetric(horizontal: 20.0),
-      decoration: BoxDecoration(
-        color: Colors.white,
-        borderRadius: BorderRadius.vertical(top: Radius.circular(16)),
-      ),
-      child: Row(
-        mainAxisAlignment: MainAxisAlignment.spaceEvenly,
-        children: List.generate(3, (index) {
-          return Material(
-            color: Colors.transparent,
-            child: InkWell(
-                onTap: () => onPageChanged(index),
-                customBorder: const CircleBorder(),
-                child: Container(
-                  width: 100,
-                  height: 100,
-                  child: Column(
-                    mainAxisAlignment: MainAxisAlignment.center,
-                    children: [
-                      Container(
-                        width: 30,
-                        height: 30,
-                        decoration: BoxDecoration(
-                          shape: BoxShape.circle,
-                          color:
-                              index == currentIndex ? Colors.blue : Colors.grey,
-                        ),
-                      ),
-                      const SizedBox(
-                        height: 3,
-                      ),
-                      if (index == currentIndex)
+    return Padding(
+      padding: const EdgeInsets.symmetric(horizontal: 40.0),
+      child: Container(
+        margin: const EdgeInsets.only(bottom: 60.0),
+        decoration: BoxDecoration(
+          color: accentColor,
+          borderRadius: BorderRadius.circular(28.0),
+        ),
+        child: Row(
+          mainAxisAlignment: MainAxisAlignment.spaceEvenly,
+          children: List.generate(3, (index) {
+            return Material(
+              color: Colors.transparent,
+              child: InkWell(
+                  onTap: () => onPageChanged(index),
+                  customBorder: const CircleBorder(),
+                  child: SizedBox(
+                    width: 100,
+                    height: 80,
+                    child: Column(
+                      mainAxisAlignment: MainAxisAlignment.center,
+                      children: [
                         Container(
-                          width: 20,
-                          height: 6,
+                          width: 30,
+                          height: 30,
                           decoration: BoxDecoration(
-                              color: Colors.blue,
-                              borderRadius: BorderRadius.circular(10)),
+                            shape: BoxShape.circle,
+                            color:
+                                index == currentIndex ? Colors.white : accentColor2,
+                          ),
+                        ),
+                        const SizedBox(
+                          height: 3,
                         ),
-                    ],
-                  ),
-                )),
-          );
-        }),
+                        if (index == currentIndex)
+                          Container(
+                            width: 20,
+                            height: 6,
+                            decoration: BoxDecoration(
+                                color: Colors.white,
+                                borderRadius: BorderRadius.circular(10)),
+                          ),
+                      ],
+                    ),
+                  )),
+            );
+          }),
+        ),
       ),
     );
   }

diff --git a/lib/feature/onboarding/OnboardingData.dart b/lib/feature/onboarding/OnboardingData.dart
@@ -21,7 +21,7 @@ class OnboardingData {
     {
       title: AppStrings.onboardingTitle3,
       description: AppStrings.onboardingDescription3,
-      image: Assets.images.sample
+      image: Assets.images.smile
     },
   ];
 }
diff --git a/lib/feature/onboarding/OnboardingScreen.dart b/lib/feature/onboarding/OnboardingScreen.dart
@@ -1,5 +1,6 @@
 import 'package:blueberry_flutter_template/core/TopScreen.dart';
 import 'package:blueberry_flutter_template/feature/onboarding/widgets/OnboardingPageViewBuilder.dart';
+import 'package:blueberry_flutter_template/utils/AppColors.dart';
 import 'package:flutter/material.dart';
 import 'package:flutter_custom_page_steps_indication/CustomPageStepsIndication.dart';
 import 'package:go_router/go_router.dart';
@@ -70,9 +71,9 @@ class _OnboardingScreenState extends State<OnboardingScreen> {
                 StepProgress(
                   totalSteps: OnboardingData.pageDataList.length,
                   currentStep: _currentPage,
-                  continueButtonColor: Colors.black,
-                  backButtonColor: Colors.blue,
-                  finishButtonColor: Colors.red,
+                  continueButtonColor: accentColor,
+                  backButtonColor: textColor,
+                  finishButtonColor: accentColor,
                   enableFinishButtonGlow: false,
                   onNext: (int) {
                     _onNextPressed();

diff --git a/lib/feature/send/SendMessageScreen.dart b/lib/feature/send/SendMessageScreen.dart
@@ -36,7 +36,7 @@ class SendMessageTitleText extends StatelessWidget {
   Widget build(BuildContext context) {
     return const Text(
       '경찰서에 문자하기',
-      style: black24TextStyle,
+      style: black28boldTextStyle,
     );
   }
 }

diff --git a/lib/feature/send/widget/SendMessageButton.dart b/lib/feature/send/widget/SendMessageButton.dart
@@ -1,4 +1,5 @@
 import 'package:blueberry_flutter_template/feature/send/provider/messageIndexProvider.dart';
+import 'package:blueberry_flutter_template/utils/AppColors.dart';
 import 'package:blueberry_flutter_template/utils/AppStrings.dart';
 import 'package:flutter/material.dart';
 import 'package:flutter_riverpod/flutter_riverpod.dart';
@@ -11,7 +12,7 @@ class SendMessageButton extends ConsumerWidget {
   Widget build(BuildContext context, WidgetRef ref) {
     final index = ref.watch(messageIndexProvider);
     return CircleAvatar(
-      backgroundColor: Colors.black,
+      backgroundColor: accentColor,
       radius: 50,
       child: IconButton(
         onPressed: () async {

diff --git a/lib/feature/send/widget/SendMessagePreview.dart b/lib/feature/send/widget/SendMessagePreview.dart
@@ -1,4 +1,5 @@
 import 'package:blueberry_flutter_template/feature/send/provider/messageIndexProvider.dart';
+import 'package:blueberry_flutter_template/utils/AppTextStyle.dart';
 import 'package:flutter/material.dart';
 import 'package:flutter_riverpod/flutter_riverpod.dart';
 
@@ -19,10 +20,7 @@ class SendMessagePreview extends ConsumerWidget {
             Text(
               messages[index],
               textAlign: TextAlign.center,
-              style: TextStyle(
-                fontSize: 32.0,
-                fontWeight: FontWeight.bold,
-              ),
+              style: black28boldTextStyle,
             ),
             SizedBox(height: 60),
 

diff --git a/lib/feature/send/widget/SendMessagePreviewChangeButton.dart b/lib/feature/send/widget/SendMessagePreviewChangeButton.dart
@@ -1,4 +1,5 @@
 import 'package:blueberry_flutter_template/feature/send/provider/messageIndexProvider.dart';
+import 'package:blueberry_flutter_template/utils/AppTextStyle.dart';
 import 'package:flutter/material.dart';
 import 'package:flutter_riverpod/flutter_riverpod.dart';
 
@@ -18,7 +19,7 @@ class SendMessagePreviewChangeButton extends ConsumerWidget {
             // 텍스트 변경
           },
         ),
-        Text('메시지 텍스트 변경하기', style: TextStyle(fontSize: 24.0)),
+        Text('메시지 텍스트 변경하기', style: black16TextStyle),
       ],
     );
   }

diff --git a/lib/feature/voiceOutput/VoiceOutputScreen.dart b/lib/feature/voiceOutput/VoiceOutputScreen.dart
@@ -35,7 +35,7 @@ class VoiceOutputTitleText extends StatelessWidget {
   Widget build(BuildContext context) {
     return const Text(
       '남자 음성 출력 하기',
-      style: black24TextStyle,
+      style: black28boldTextStyle,
     );
   }
 }
diff --git a/lib/feature/voiceOutput/widget/VoiceOutputButton.dart b/lib/feature/voiceOutput/widget/VoiceOutputButton.dart
@@ -1,27 +1,29 @@
+import 'package:audioplayers/audioplayers.dart';
 import 'package:blueberry_flutter_template/feature/voiceOutput/provider/CategoryIondexProvider.dart';
+import 'package:blueberry_flutter_template/utils/AppColors.dart';
 import 'package:flutter/material.dart';
 import 'package:flutter_riverpod/flutter_riverpod.dart';
 
+final player = AudioPlayer();
+
 class VoiceOutputButton extends ConsumerWidget {
   const VoiceOutputButton({super.key});
 
   @override
   Widget build(BuildContext context, WidgetRef ref) {
     final categoryIndex = ref.watch(categoryIndexProvider);
-
     return CircleAvatar(
-      backgroundColor: Colors.black,
+      backgroundColor: accentColor,
       radius: 50,
       child: IconButton(
         onPressed: () {
-          print('음성 출력: ${categoryIndex}');
+          player.play(AssetSource('voice/voice_${categoryIndex + 1}.wav'));
         },
         icon: const Icon(Icons.volume_up),
+        color: Colors.white,
         // 마이크 아이콘
         iconSize: 50,
         // 아이콘 크기
-        color: Colors.white,
-        // 아이콘 색상
         splashRadius: 30, // 클릭 반경
       ),
     );

diff --git a/lib/feature/voiceOutput/widget/VoiceOutputCategoryListView.dart b/lib/feature/voiceOutput/widget/VoiceOutputCategoryListView.dart
@@ -1,15 +1,19 @@
 import 'package:blueberry_flutter_template/feature/voiceOutput/provider/CategoryIondexProvider.dart';
+import 'package:blueberry_flutter_template/gen/assets.gen.dart';
+import 'package:blueberry_flutter_template/utils/AppColors.dart';
 import 'package:flutter/material.dart';
 import 'package:carousel_slider/carousel_slider.dart';
 import 'package:flutter_riverpod/flutter_riverpod.dart';
+import 'package:flutter_svg/flutter_svg.dart';
 
 class VoiceOutputCategoryListView extends ConsumerWidget {
   const VoiceOutputCategoryListView({super.key});
 
   @override
   Widget build(BuildContext context, WidgetRef ref) {
     // 카테고리 데이터를 리스트로 정의
-    final categories = ['화내는 남편', '놀러온 남자', '데이트 준비중', '조직폭력배 남자'];
+    final categories = ['마중 나온 남자', '약간 다투는 남자', '혼자 이야기 하는 남자'];
+    final svgImages = [Assets.images.a1Smile, Assets.images.a2Angry, Assets.images.a3Funny];
 
     return CarouselSlider(
       options: CarouselOptions(
@@ -31,14 +35,11 @@ class VoiceOutputCategoryListView extends ConsumerWidget {
                   flex: 2, // 여유 공간의 2/3 사용
                   child: CircleAvatar(
                     radius: 80, // 원의 크기 조정
-                    backgroundColor: Colors.blue, // 원의 배경색
-                    child: Text(
-                      category[0], // 카테고리 이름의 첫 글자
-                      style: const TextStyle(
-                        color: Colors.white, // 텍스트 색상
-                        fontSize: 40, // 텍스트 크기
-                        fontWeight: FontWeight.bold, // 텍스트 두께
-                      ),
+                    backgroundColor: primaryColor, // 원의 배경색
+                    child: SvgPicture.asset(
+                      svgImages[categories.indexOf(category)], // SVG 이미지 표시
+                      width: 100, // SVG 이미지 너비
+                      height: 100, // SVG 이미지 높이
                     ),
                   ),
                 ),

diff --git a/lib/feature/voiceOutput/widget/VoiceOutputDescriptionTextBox.dart b/lib/feature/voiceOutput/widget/VoiceOutputDescriptionTextBox.dart
@@ -1,4 +1,5 @@
 import 'package:blueberry_flutter_template/feature/voiceOutput/provider/CategoryIondexProvider.dart';
+import 'package:blueberry_flutter_template/utils/AppColors.dart';
 import 'package:flutter/material.dart';
 import 'package:flutter_riverpod/flutter_riverpod.dart';
 
@@ -11,19 +12,14 @@ class VoiceOutputDescriptionTextBox extends ConsumerWidget {
   Widget build(BuildContext context, WidgetRef ref) {
     final categoryIndex = ref.watch(categoryIndexProvider);
 
-    final descriptionList = [
-      '너는 항상 왜 그러는 거야?',
-      '늦었네..?',
-      '오늘도 수고 많았어~',
-      '뭐? 어떤 놈인데?',
-    ];
+    final descriptionList = ['잘 갔다 왔어? 오늘 좀 늦었네?', '왔어? 우리 이야기 좀 하자', '아~ 진짜 드디어 왔네..'];
 
     return Padding(
-      padding: const EdgeInsets.symmetric(horizontal: 60),
+      padding: const EdgeInsets.symmetric(horizontal: 20),
       child: Container(
           width: double.infinity,
           decoration: BoxDecoration(
-            color: Colors.grey.shade300,
+            color: accentColor,
             borderRadius: BorderRadius.circular(14),
           ),
           child: Center(
@@ -37,7 +33,7 @@ class VoiceOutputDescriptionTextBox extends ConsumerWidget {
                   descriptionList[categoryIndex],
                   style: const TextStyle(
                     fontSize: 16,
-                    color: Colors.black,
+                    color: textColor,
                   ),
                 ),
                 const SizedBox(width: 16),