From a64dd50b82fe6cdad7be563f2cbf4d74407ed754 Mon Sep 17 00:00:00 2001 From: HuiChan Seo <78739194+seochan99@users.noreply.github.com> Date: Sun, 18 Feb 2024 12:58:20 +0900 Subject: [PATCH] =?UTF-8?q?=E2=9C=A8Feat:=20Word=20Headedr?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- lib/views/word/word_screen.dart | 231 ++++++++++++++++++++++++++++++++ 1 file changed, 231 insertions(+) create mode 100644 lib/views/word/word_screen.dart diff --git a/lib/views/word/word_screen.dart b/lib/views/word/word_screen.dart new file mode 100644 index 0000000..100ab51 --- /dev/null +++ b/lib/views/word/word_screen.dart @@ -0,0 +1,231 @@ +import 'package:earlips/utilities/style/color_styles.dart'; +import 'package:earlips/views/word/widget/blue_back_appbar.dart'; +import 'package:flutter/material.dart'; +import 'package:get/get.dart'; + +// word dummy Daaa +final List wordList = [ + WordCard( + id: 1, + word: "강", + speaker: "가-앙", + isDone: false, + doneDate: "2021/10/10", + video: "https://www.youtube.com/watch?v=OzHrIz-wMLA"), + WordCard( + id: 2, + word: "서", + speaker: "가-앙", + isDone: false, + doneDate: "2022/10/10", + video: "https://www.youtube.com/watch?v=OzHrIz-wMLA"), + WordCard( + id: 3, + word: "희", + speaker: "가-앙", + isDone: false, + video: "https://www.youtube.com/watch?v=OzHrIz-wMLA"), + WordCard( + id: 4, + word: "찬", + speaker: "차-안", + isDone: false, + video: "https://www.youtube.com/watch?v=OzHrIz-wMLA"), + WordCard( + id: 5, + word: "캬", + speaker: "캬", + isDone: true, + doneDate: "2023/10/10", + video: "https://www.youtube.com/watch?v=OzHrIz-wMLA"), + // Add more WordCard instances as needed +]; + +class WordCard { + final int id; + final String word; + final String speaker; + final bool isDone; + final String? doneDate; + final String video; + + WordCard( + {required this.id, + required this.word, + required this.speaker, + required this.isDone, + this.doneDate, + required this.video}); +} + +class WordScreen extends StatelessWidget { + final String title; + final int type; + + const WordScreen({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: Center( + child: Column( + children: [ + Container( + decoration: const BoxDecoration( + color: ColorSystem.main2, + borderRadius: BorderRadius.only( + bottomLeft: Radius.circular(24), + bottomRight: Radius.circular(24), + ), + ), + child: Column( + children: [ + const SizedBox(height: 20), + Padding( + padding: const EdgeInsets.fromLTRB(0, 8, 0, 0), + child: WordList(wordList: wordList), + ), + const SizedBox( + height: 70, + child: Column( + children: [ + SizedBox( + height: 15, + ), + Text( + "아래의 혀, 입술 모양을 따라 말해보세요!", + style: TextStyle( + fontSize: 16, + fontWeight: FontWeight.w600, + color: ColorSystem.white, + ), + ), + ], + ), + ), + ], + ), + ), + const Spacer(), + ], + ), + ), + ); + } +} + +class WordList extends StatefulWidget { + final List wordList; + + const WordList({super.key, required this.wordList}); + + @override + _WordListState createState() => _WordListState(); +} + +class _WordListState extends State { + late PageController _pageController; + int currentIndex = 0; + + @override + void initState() { + super.initState(); + _pageController = PageController(initialPage: currentIndex); + } + + @override + Widget build(BuildContext context) { + return SizedBox( + height: Get.height * 0.165, + child: PageView.builder( + controller: _pageController, + itemCount: widget.wordList.length, + onPageChanged: (index) { + setState(() { + currentIndex = index; + }); + }, + itemBuilder: (context, index) { + return Padding( + padding: const EdgeInsets.fromLTRB(20, 8, 20, 0), + child: Container( + decoration: BoxDecoration( + color: ColorSystem.white, + border: Border.all(color: const Color(0xffB3CBE2), width: 4), + borderRadius: BorderRadius.circular(24), + ), + child: Column( + children: [ + Container( + color: Colors.transparent, + padding: const EdgeInsets.fromLTRB(20, 10, 20, 0), + child: Row( + mainAxisAlignment: MainAxisAlignment.spaceBetween, + children: [ + Text( + '${currentIndex + 1}/${widget.wordList.length}', + style: const TextStyle( + fontSize: 14, + fontWeight: FontWeight.w600, + color: ColorSystem.gray5, + ), + ), + + // isDone 여부에 따라 다른 체크박스 아이콘을 표시합니다. + widget.wordList[index].isDone + ? Row( + children: [ + Text(widget.wordList[index].doneDate!, + style: const TextStyle( + fontSize: 14, + fontWeight: FontWeight.w600, + color: ColorSystem.gray5)), + const Icon( + Icons.check_circle_rounded, + color: ColorSystem.green, + ), + ], + ) + : const Icon( + Icons.check_circle_outline_rounded, + color: ColorSystem.green2, + ), + ], + ), + ), + ListTile( + tileColor: Colors.white, + title: Text(widget.wordList[index].word, + style: const TextStyle( + fontSize: 24, + fontWeight: FontWeight.w600, + color: ColorSystem.black, + ), + textAlign: TextAlign.center), + subtitle: Text(widget.wordList[index].speaker, + style: const TextStyle( + fontSize: 16, + fontWeight: FontWeight.w600, + color: ColorSystem.gray4, + ), + textAlign: TextAlign.center), + ), + ], + ), + ), + ); + }, + ), + ); + } + + @override + void dispose() { + _pageController.dispose(); + super.dispose(); + } +}