From c866be749de7cfa38932ab3a9439bea67f9eafbd Mon Sep 17 00:00:00 2001
From: HuiChan Seo <78739194+seochan99@users.noreply.github.com>
Date: Sat, 4 May 2024 19:29:14 +0900
Subject: [PATCH] =?UTF-8?q?=E2=9C=A8Feat:=20=EC=9D=8C=EC=86=8C=20=ED=99=94?=
 =?UTF-8?q?=EB=A9=B4?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 lib/views/phoneme/phoneme_screen.dart       | 65 +++++++++++++++++++++
 lib/views/phoneme/widget/vowles_widget.dart | 57 ++++++++++++++++++
 2 files changed, 122 insertions(+)
 create mode 100644 lib/views/phoneme/phoneme_screen.dart
 create mode 100644 lib/views/phoneme/widget/vowles_widget.dart

diff --git a/lib/views/phoneme/phoneme_screen.dart b/lib/views/phoneme/phoneme_screen.dart
new file mode 100644
index 0000000..736a96e
--- /dev/null
+++ b/lib/views/phoneme/phoneme_screen.dart
@@ -0,0 +1,65 @@
+import 'package:earlips/models/phoneme_model.dart';
+import 'package:earlips/utilities/style/color_system.dart';
+import 'package:earlips/views/phoneme/widget/phoneme_list_widget.dart';
+import 'package:earlips/views/phoneme/widget/vowles_widget.dart';
+import 'package:earlips/views/word/widget/blue_back_appbar.dart';
+import 'package:earlips/views/word/widget/word_list_widget.dart';
+import 'package:flutter/material.dart';
+import 'package:get/get.dart';
+
+class PhonemeScreen extends StatelessWidget {
+  final String title;
+  final int type;
+
+  const PhonemeScreen({super.key, required this.title, required this.type});
+
+  @override
+  Widget build(BuildContext context) {
+    return Scaffold(
+      appBar: PreferredSize(
+        preferredSize: const Size.fromHeight(kToolbarHeight),
+        child: BlueBackAppbar(title: title),
+      ),
+      body: const SingleChildScrollView(
+        child: Padding(
+          padding: EdgeInsets.all(8.0),
+          child: Column(
+            children: [
+              Column(
+                mainAxisAlignment: MainAxisAlignment.start,
+                crossAxisAlignment: CrossAxisAlignment.start,
+                children: [
+                  SizedBox(height: 10),
+                  Padding(
+                    padding: EdgeInsets.symmetric(horizontal: 10),
+                    child: Text("Vowels", style: TextStyle(fontSize: 20)),
+                  ),
+                  VowelsWidget(
+                    type: 0,
+                  ),
+                  SizedBox(height: 20),
+                  Padding(
+                    padding: EdgeInsets.symmetric(horizontal: 10),
+                    child: Text("Consonants", style: TextStyle(fontSize: 20)),
+                  ),
+                  VowelsWidget(
+                    type: 1,
+                  ),
+                  SizedBox(height: 20),
+                  Padding(
+                    padding: EdgeInsets.symmetric(horizontal: 10),
+                    child: Text("R-Controlled vowels",
+                        style: TextStyle(fontSize: 20)),
+                  ),
+                  VowelsWidget(
+                    type: 2,
+                  ),
+                ],
+              ),
+            ],
+          ),
+        ),
+      ),
+    );
+  }
+}
diff --git a/lib/views/phoneme/widget/vowles_widget.dart b/lib/views/phoneme/widget/vowles_widget.dart
new file mode 100644
index 0000000..ea79c34
--- /dev/null
+++ b/lib/views/phoneme/widget/vowles_widget.dart
@@ -0,0 +1,57 @@
+import 'package:earlips/models/phoneme_model.dart';
+import 'package:earlips/views/phoneme/phoneme_detail_screen.dart';
+import 'package:flutter/material.dart';
+import 'package:get/get.dart';
+
+class VowelsWidget extends StatelessWidget {
+  final int type; // 0 for vowels, 1 for consonants, 2 for R-Controlled Vowels
+  const VowelsWidget({
+    required this.type,
+    super.key,
+  });
+
+  @override
+  Widget build(BuildContext context) {
+    List<Phoneme> phonemes = _getPhonemeList();
+
+    return SizedBox(
+      height: 200,
+      child: GridView.builder(
+        padding: const EdgeInsets.all(10),
+        gridDelegate: const SliverGridDelegateWithFixedCrossAxisCount(
+          crossAxisCount: 3,
+          crossAxisSpacing: 10,
+          mainAxisSpacing: 10,
+          childAspectRatio: 1,
+        ),
+        itemCount: phonemes.length,
+        itemBuilder: (context, index) {
+          return GestureDetector(
+            onTap: () {
+              Get.to(() => PhonemeDetailScreen(phoneme: phonemes[index]));
+            },
+            child: Card(
+              child: Center(
+                child: Text(phonemes[index].symbol,
+                    style: Theme.of(context).textTheme.titleLarge),
+              ),
+            ),
+          );
+        },
+      ),
+    );
+  }
+
+  List<Phoneme> _getPhonemeList() {
+    switch (type) {
+      case 0:
+        return vowels;
+      case 1:
+        return consonants;
+      case 2:
+        return rControlledVowels;
+      default:
+        return vowels; // Default to vowels if something goes wrong
+    }
+  }
+}