From 6e10aff3b277514e17f28ade781eded74990ead0 Mon Sep 17 00:00:00 2001 From: HuiChan Seo <78739194+seochan99@users.noreply.github.com> Date: Sun, 18 Feb 2024 17:53:58 +0900 Subject: [PATCH] =?UTF-8?q?=E2=9C=A8Feat:=20word=20screen?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- lib/views/word/word_screen.dart | 230 +++++++++----------------------- 1 file changed, 61 insertions(+), 169 deletions(-) diff --git a/lib/views/word/word_screen.dart b/lib/views/word/word_screen.dart index 100ab51..d7167a8 100644 --- a/lib/views/word/word_screen.dart +++ b/lib/views/word/word_screen.dart @@ -1,62 +1,10 @@ import 'package:earlips/utilities/style/color_styles.dart'; +import 'package:earlips/viewModels/word/word_viewmodel.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'; - -// 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}); -} +import 'package:youtube_player_flutter/youtube_player_flutter.dart'; class WordScreen extends StatelessWidget { final String title; @@ -66,6 +14,11 @@ class WordScreen extends StatelessWidget { @override Widget build(BuildContext context) { + final wordViewModel = Get.put(WordViewModel()); + + final PageController pageController = + PageController(initialPage: wordViewModel.currentIndex.value); + return Scaffold( appBar: PreferredSize( preferredSize: const Size.fromHeight(kToolbarHeight), @@ -85,9 +38,13 @@ class WordScreen extends StatelessWidget { child: Column( children: [ const SizedBox(height: 20), - Padding( - padding: const EdgeInsets.fromLTRB(0, 8, 0, 0), - child: WordList(wordList: wordList), + GetBuilder( + // Add GetBuilder here + builder: (controller) => WordList( + // viewmodel + wordDataList: controller.wordList, + pageController: pageController, + ), ), const SizedBox( height: 70, @@ -110,122 +67,57 @@ class WordScreen extends StatelessWidget { ], ), ), - 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, - ), - ), + const Spacer(), + // wordViewModel final String video로 영상 유튜브 링크를 바로 볼 수 있게 하기 + ElevatedButton( + onPressed: () { + Get.toNamed( + '/video', + arguments: wordViewModel + .wordList[wordViewModel.currentIndex.value] + .wordCard + .video, + ); + }, + child: const Text("영상 보기"), + ), + ElevatedButton( + onPressed: () async { + await wordViewModel.markWordAsDone(wordViewModel + .wordList[wordViewModel.currentIndex.value].wordCard); - // 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), + Get.dialog( + AlertDialog( + title: const Text('학습 완료'), + content: const Text('다음으로 넘어가려면 아래 버튼을 눌러주세요.'), + actions: [ + ElevatedButton( + onPressed: () { + Get.back(); + if (wordViewModel.currentIndex.value < + wordViewModel.wordList.length - 1) { + pageController.animateToPage( + wordViewModel.currentIndex.value + 1, + duration: const Duration(milliseconds: 300), + curve: Curves.ease, + ); + wordViewModel.currentIndex.value = + wordViewModel.currentIndex.value + 1; + } + }, + child: const Text('다음으로 넘어가기'), + ), + ], ), - ], - ), + ); + }, + child: const Text("학습 완료"), ), - ); - }, + const SizedBox(height: 80), + ], + ), ), ); } - - @override - void dispose() { - _pageController.dispose(); - super.dispose(); - } }