feat: Onboarding Screen & Category Screen

lib/main.dart

@@ -1,6 +1,9 @@
 import 'package:flutter/material.dart';
 import 'package:flutter_riverpod/flutter_riverpod.dart';
+import 'package:see_our_sounds/src/screens/category/category_card.dart';
+import 'package:see_our_sounds/src/screens/category/category_screen.dart';
 import 'package:see_our_sounds/src/screens/home/home_screen.dart';
+import 'package:see_our_sounds/src/screens/onboarding_screen.dart';
 
 void main() {
   runApp(ProviderScope(child: const MyApp()));
@@ -14,8 +17,11 @@ class MyApp extends StatelessWidget {
     return MaterialApp(
       title: 'HearSitter',
       debugShowCheckedModeBanner: false,
-      theme: ThemeData(primarySwatch: Colors.blue, fontFamily: 'NotoSansKR'),
-      home: HomseScreen(),
+      theme: ThemeData(
+          primarySwatch: Colors.blue,
+          fontFamily: 'NotoSansKR',
+          scaffoldBackgroundColor: Colors.white),
+      home: OnboardingScreen(),
     );
   }
 }

lib/src/core/app_constants.dart

@@ -1,5 +1,7 @@
 import 'dart:ui';
 
+import 'package:see_our_sounds/src/core/app_assets.dart';
+
 class AppUri {
   AppUri._();
 
@@ -26,33 +28,96 @@ class AppDatabase {
 }
 
 enum SoundCategory {
-  INFANT_CRYING,
-  CRACK_SOUND,
-  FIRE_ALARM,
-  GUN_SHOT,
-  CAR_HORN,
-  ANNOUNCEMNET,
-  NAME,
-  MAMAM_PAPA,
-  BICYCLE_BELL,
-}
-
-enum PuzzleType { MATH_PUZZLE, MEMORY_PUZZLE, BRAIN_PUZZLE }
-
-class KeyUtil {
-  static const IS_DARK_MODE = "isDarkMode";
-
-  static const String splash = 'Splash';
-  static const String dashboard = 'Dashboard';
-  static const String home = 'Home';
-
-  static const String calculator = 'Calculator';
-  static const String guessSign = 'GuessSign';
-  static const String correctAnswer = 'CorrectAnswer';
-  static const String quickCalculation = 'QuickCalculation';
-  static const String mentalArithmetic = 'MentalArithmetic';
-  static const String squareRoot = 'SquareRoot';
-  static const String mathPairs = 'MathPairs';
-  static const String magicTriangle = 'MagicTriangle';
-  static const String picturePuzzle = 'PicturePuzzle';
+  BABY_CRYING, // 아기 울음 소리
+  CRACK_SOUND, // 유리 깨지는 소리
+  FIRE_ALARM, // 화재 알람
+  GUN_SHOT, // 총소리
+  CAR_HORN, // 자동차 경적 소리
+  NAME, // 이름
+  MAMA, // 엄마
+  PAPA, // 아빠
+}
+
+String soundCategoryIconLight(SoundCategory soundCategory) {
+  switch (soundCategory) {
+    case SoundCategory.BABY_CRYING:
+      return AppAssets.infantCryingIconLight;
+    case SoundCategory.CRACK_SOUND:
+      return AppAssets.crackIconLight;
+    case SoundCategory.FIRE_ALARM:
+      return AppAssets.fireAlarmIconLight;
+    case SoundCategory.GUN_SHOT:
+      return AppAssets.gunIconLight;
+    case SoundCategory.CAR_HORN:
+      return AppAssets.carHornIconLight;
+    case SoundCategory.NAME:
+      return AppAssets.nameIconLight;
+    case SoundCategory.MAMA:
+      return AppAssets.mamaPapaIconLight;
+    case SoundCategory.PAPA:
+      return AppAssets.mamaPapaIconLight;
+  }
+}
+
+String soundCategoryIconDark(SoundCategory soundCategory) {
+  switch (soundCategory) {
+    case SoundCategory.BABY_CRYING:
+      return AppAssets.infantCryingIconDark;
+    case SoundCategory.CRACK_SOUND:
+      return AppAssets.crackIconDark;
+    case SoundCategory.FIRE_ALARM:
+      return AppAssets.fireAlarmIconDark;
+    case SoundCategory.GUN_SHOT:
+      return AppAssets.gunIconDark;
+    case SoundCategory.CAR_HORN:
+      return AppAssets.carHornIconDark;
+    case SoundCategory.NAME:
+      return AppAssets.nameIconDark;
+    case SoundCategory.MAMA:
+      return AppAssets.mamaPapaIconDark;
+    case SoundCategory.PAPA:
+      return AppAssets.mamaPapaIconDark;
+  }
+}
+
+String soundCategoryToLabel(SoundCategory soundCategory) {
+  switch (soundCategory) {
+    case SoundCategory.BABY_CRYING:
+      return 'Baby Crying';
+    case SoundCategory.CRACK_SOUND:
+      return 'Glass';
+    case SoundCategory.FIRE_ALARM:
+      return 'Fire alarm';
+    case SoundCategory.GUN_SHOT:
+      return 'Gunshot';
+    case SoundCategory.CAR_HORN:
+      return 'Car horn';
+    case SoundCategory.NAME:
+      return 'Name';
+    case SoundCategory.MAMA:
+      return 'Mama';
+    case SoundCategory.PAPA:
+      return 'Papa';
+  }
+}
+
+Color soundCategoryColor(SoundCategory soundCategory) {
+  switch (soundCategory) {
+    case SoundCategory.BABY_CRYING:
+      return const Color(0xffffd400);
+    case SoundCategory.CRACK_SOUND:
+      return const Color(0xff0072db);
+    case SoundCategory.FIRE_ALARM:
+      return const Color(0xffe94025);
+    case SoundCategory.GUN_SHOT:
+      return Color(0xff473b3d);
+    case SoundCategory.CAR_HORN:
+      return Color(0xff7c1bbb);
+    case SoundCategory.NAME:
+      return Color(0xffffa7cb);
+    case SoundCategory.MAMA:
+      return Color(0xffff6e11);
+    case SoundCategory.PAPA:
+      return Color(0xff008d62);
+  }
 }

lib/src/screens/category/category_card.dart

@@ -0,0 +1,62 @@
+import 'package:flutter/material.dart';
+import 'package:see_our_sounds/src/core/app_constants.dart';
+
+class CategoryCard extends StatelessWidget {
+  final String imgUrl;
+  final Color color;
+  final double width;
+  final String audioLabel;
+  final VoidCallback onTap;
+  final Color labelColor;
+  final bool isSelected;
+
+  const CategoryCard(
+      {Key? key,
+      required this.audioLabel,
+      required this.imgUrl,
+      required this.onTap,
+      required this.isSelected,
+      this.color = Colors.white,
+      this.labelColor = Colors.black,
+      this.width = 85})
+      : super(key: key);
+
+  @override
+  Widget build(BuildContext context) {
+    return InkWell(
+      onTap: onTap,
+      child: Container(
+        width: width,
+        height: 80,
+        decoration: BoxDecoration(
+            borderRadius: const BorderRadius.all(Radius.circular(15)),
+            color: color,
+            boxShadow: [
+              BoxShadow(
+                  color: Colors.grey.shade100, blurRadius: 3, spreadRadius: 1)
+            ]),
+        child: Column(
+          mainAxisSize: MainAxisSize.min,
+          mainAxisAlignment: MainAxisAlignment.center,
+          children: [
+            SizedBox(
+              height: 25,
+              width: 25,
+              child: Image.asset(
+                imgUrl,
+              ),
+            ),
+            const SizedBox(
+              height: 4,
+            ),
+            Text(
+              audioLabel,
+              style: TextStyle(
+                  fontSize: 13, fontWeight: FontWeight.w500, color: labelColor),
+            )
+          ],
+        ),
+      ),
+    );
+  }
+}

lib/src/screens/category/category_screen.dart

@@ -0,0 +1,130 @@
+import 'package:flutter/foundation.dart';
+import 'package:flutter/material.dart';
+import 'package:see_our_sounds/src/core/app_constants.dart';
+import 'package:see_our_sounds/src/screens/category/category_card.dart';
+
+class CategoryScreen extends StatefulWidget {
+  const CategoryScreen({Key? key}) : super(key: key);
+
+  @override
+  State<CategoryScreen> createState() => _CategoryScreenState();
+}
+
+class _CategoryScreenState extends State<CategoryScreen> {
+  @override
+  Widget build(BuildContext context) {
+    return Scaffold(
+      body: SafeArea(
+        child: Padding(
+          padding: const EdgeInsets.only(left: 20),
+          child: Column(
+            mainAxisAlignment: MainAxisAlignment.center,
+            crossAxisAlignment: CrossAxisAlignment.start,
+            children: [
+              const Text(
+                'Tell me\nwhat you wanna hear',
+                style: TextStyle(fontSize: 30, fontWeight: FontWeight.bold),
+              ),
+              const Padding(
+                padding: EdgeInsets.only(top: 5, bottom: 35),
+                child: Text(
+                  'So I can show you what you want to hear.',
+                  style: TextStyle(fontSize: 13, color: AppColor.grayColor),
+                ),
+              ),
+              Padding(
+                padding: const EdgeInsets.only(right: 20),
+                child: Align(
+                  alignment: Alignment.center,
+                  child: Wrap(
+                    alignment: WrapAlignment.center,
+                    spacing: 19,
+                    runSpacing: 13,
+                    children: [
+                      CategoryCard(
+                          color: AppColor.primaryColor,
+                          labelColor: Colors.white,
+                          audioLabel:
+                              soundCategoryToLabel(SoundCategory.BABY_CRYING),
+                          imgUrl:
+                              soundCategoryIconLight(SoundCategory.BABY_CRYING),
+                          width: 120,
+                          onTap: () {},
+                          isSelected: false),
+                      CategoryCard(
+                          audioLabel: 'Crack Sound',
+                          width: 130,
+                          imgUrl:
+                              soundCategoryIconDark(SoundCategory.CRACK_SOUND),
+                          onTap: () {},
+                          isSelected: false),
+                      CategoryCard(
+                          audioLabel:
+                              soundCategoryToLabel(SoundCategory.FIRE_ALARM),
+                          imgUrl:
+                              soundCategoryIconDark(SoundCategory.FIRE_ALARM),
+                          width: 110,
+                          onTap: () {},
+                          isSelected: false),
+                      CategoryCard(
+                          audioLabel:
+                              soundCategoryToLabel(SoundCategory.GUN_SHOT),
+                          imgUrl: soundCategoryIconDark(SoundCategory.GUN_SHOT),
+                          onTap: () {},
+                          width: 95,
+                          isSelected: false),
+                      CategoryCard(
+                          audioLabel:
+                              soundCategoryToLabel(SoundCategory.CAR_HORN),
+                          imgUrl: soundCategoryIconDark(SoundCategory.CAR_HORN),
+                          width: 100,
+                          onTap: () {},
+                          isSelected: false),
+                      CategoryCard(
+                          audioLabel: soundCategoryToLabel(SoundCategory.NAME),
+                          imgUrl: soundCategoryIconDark(SoundCategory.NAME),
+                          onTap: () {},
+                          isSelected: false),
+                      CategoryCard(
+                          audioLabel: soundCategoryToLabel(SoundCategory.MAMA),
+                          imgUrl: soundCategoryIconDark(SoundCategory.MAMA),
+                          onTap: () {},
+                          isSelected: false),
+                      CategoryCard(
+                          audioLabel: soundCategoryToLabel(SoundCategory.PAPA),
+                          imgUrl: soundCategoryIconDark(SoundCategory.PAPA),
+                          onTap: () {},
+                          isSelected: false),
+                    ],
+                  ),
+                ),
+              )
+            ],
+          ),
+        ),
+      ),
+      bottomNavigationBar: Container(
+        width: double.infinity,
+        height: 55,
+        margin: const EdgeInsets.fromLTRB(20, 0, 20, 20),
+        decoration: BoxDecoration(
+            color: AppColor.primaryColor,
+            borderRadius: const BorderRadius.all(Radius.circular(15)),
+            boxShadow: [
+              BoxShadow(
+                  color: Colors.grey.shade100, blurRadius: 2, spreadRadius: 1)
+            ]),
+        child: const Center(
+          child: Text(
+            'Done',
+            style: TextStyle(
+              color: Colors.white,
+              fontSize: 16,
+            ),
+            textAlign: TextAlign.center,
+          ),
+        ),
+      ),
+    );
+  }
+}