Skip to content

Commit

Permalink
✨Feat: word screen
Browse files Browse the repository at this point in the history
  • Loading branch information
@seochan99
seochan99 committed Feb 18, 2024
1 parent dba822d commit 6e10aff
Showing 1 changed file with 61 additions and 169 deletions.
230 changes: 61 additions & 169 deletions lib/views/word/word_screen.dart
View file
Original file line number Diff line number Diff line change
@@ -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<WordCard> 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;
Expand All @@ -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),
Expand All @@ -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<WordViewModel>(
// Add GetBuilder here
builder: (controller) => WordList(
// viewmodel
wordDataList: controller.wordList,
pageController: pageController,
),
),
const SizedBox(
height: 70,
Expand All @@ -110,122 +67,57 @@ class WordScreen extends StatelessWidget {
],
),
),
const Spacer(),
],
),
),
);
}
}

class WordList extends StatefulWidget {
final List<WordCard> wordList;

const WordList({super.key, required this.wordList});

@override
_WordListState createState() => _WordListState();
}

class _WordListState extends State<WordList> {
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();
}
}

0 comments on commit 6e10aff

Please sign in to comment.