diff --git a/assets/icons/back.svg b/assets/icons/back.svg new file mode 100644 index 0000000..97207b4 --- /dev/null +++ b/assets/icons/back.svg @@ -0,0 +1,5 @@ + + + + + diff --git a/assets/icons/back_white.svg b/assets/icons/back_white.svg new file mode 100644 index 0000000..36520fc --- /dev/null +++ b/assets/icons/back_white.svg @@ -0,0 +1,3 @@ + + + diff --git a/lib/utilities/style/color_styles.dart b/lib/utilities/style/color_styles.dart index cb271fc..f499116 100644 --- a/lib/utilities/style/color_styles.dart +++ b/lib/utilities/style/color_styles.dart @@ -2,6 +2,7 @@ import 'package:flutter/material.dart'; class ColorSystem { static const Color main = Color(0xFF1DA1FA); + static const Color main2 = Color(0xFF1FA9DC); static const Color sub1 = Color(0xFF5588FD); static const Color sub2 = Color(0xFFC1D2FF); static const Color sub3 = Color(0xFFF1F5FE); @@ -14,6 +15,8 @@ class ColorSystem { static const Color gray1 = Color(0xFFF5F5F9); static const Color white = Color(0xFFFFFFFF); static const Color green = Color(0xFF63DC68); + static const Color green2 = Color(0xFFD5E9AA); + static const Color yellow = Color(0xFFFFC100); static const Color red = Color(0xFFFB5D5D); static const Color background = Color(0xFFF0F4F8); diff --git a/lib/views/base/default_back_appbar.dart b/lib/views/base/default_back_appbar.dart new file mode 100644 index 0000000..36248f5 --- /dev/null +++ b/lib/views/base/default_back_appbar.dart @@ -0,0 +1,46 @@ +import 'package:earlips/utilities/style/color_styles.dart'; +import 'package:flutter/material.dart'; +import 'package:flutter_svg/flutter_svg.dart'; +import 'package:get/get.dart'; + +class DefaultBackAppbar extends StatelessWidget { + final String title; + const DefaultBackAppbar({super.key, required this.title}); + + @override + Widget build(BuildContext context) { + return AppBar( + title: Text( + title, + style: const TextStyle(fontSize: 16, fontWeight: FontWeight.w600), + ), + centerTitle: true, + surfaceTintColor: ColorSystem.white, + backgroundColor: ColorSystem.white, + automaticallyImplyLeading: true, + leadingWidth: 90, + leading: TextButton.icon( + style: TextButton.styleFrom( + splashFactory: NoSplash.splashFactory, + foregroundColor: ColorSystem.white, + shape: RoundedRectangleBorder( + borderRadius: BorderRadius.circular(16.0), + ), + ), + icon: SvgPicture.asset("assets/icons/back.svg"), + label: const Text( + "뒤로", + style: TextStyle( + color: ColorSystem.gray5, + fontSize: 14, + fontWeight: FontWeight.w600, + height: 1.4, + ), + ), + onPressed: () { + Get.back(); + }, + ), + ); + } +} diff --git a/lib/views/profile/profile_account/profile_account_screen.dart b/lib/views/profile/profile_account/profile_account_screen.dart index d9cb507..74abafe 100644 --- a/lib/views/profile/profile_account/profile_account_screen.dart +++ b/lib/views/profile/profile_account/profile_account_screen.dart @@ -1,5 +1,6 @@ import 'package:earlips/utilities/style/color_styles.dart'; import 'package:earlips/views/auth/auth_dialog.dart'; +import 'package:earlips/views/base/default_back_appbar.dart'; import 'package:flutter/material.dart'; class ProfileAccountScreen extends StatelessWidget { @@ -8,8 +9,11 @@ class ProfileAccountScreen extends StatelessWidget { @override Widget build(BuildContext context) { return Scaffold( - appBar: AppBar( - title: const Text('계정 관리'), + appBar: const PreferredSize( + preferredSize: Size.fromHeight(kToolbarHeight), + child: DefaultBackAppbar( + title: "계정 관리", + ), ), body: Container( color: ColorSystem.white, diff --git a/lib/views/profile/profile_header_widget.dart b/lib/views/profile/profile_header_widget.dart index 3737646..ee54518 100644 --- a/lib/views/profile/profile_header_widget.dart +++ b/lib/views/profile/profile_header_widget.dart @@ -21,7 +21,7 @@ class ProfileHeader extends StatelessWidget { child: Container( color: ColorSystem.background, child: Padding( - padding: const EdgeInsets.fromLTRB(20, 62, 20, 24), + padding: const EdgeInsets.fromLTRB(20, 48, 20, 24), child: Row( mainAxisAlignment: MainAxisAlignment.spaceBetween, children: [ diff --git a/lib/views/profile/profile_language_setting/profile_language_setting.dart b/lib/views/profile/profile_language_setting/profile_language_setting.dart index f68ed95..ee18617 100644 --- a/lib/views/profile/profile_language_setting/profile_language_setting.dart +++ b/lib/views/profile/profile_language_setting/profile_language_setting.dart @@ -1,5 +1,6 @@ import 'package:earlips/utilities/style/color_styles.dart'; import 'package:earlips/viewModels/user/user_viewmodel.dart'; +import 'package:earlips/views/base/default_back_appbar.dart'; import 'package:flutter/material.dart'; import 'package:get/get.dart'; import 'package:easy_localization/easy_localization.dart'; @@ -17,8 +18,11 @@ class ProfileLanguageScreen extends StatelessWidget { String learningLanguage = tr('learning_language'); return Scaffold( - appBar: AppBar( - title: Text(title), + appBar: const PreferredSize( + preferredSize: Size.fromHeight(kToolbarHeight), + child: DefaultBackAppbar( + title: "언어 설정", + ), ), body: Container( width: double.infinity, diff --git a/lib/views/script/create_script_screen.dart b/lib/views/script/create_script_screen.dart index 6172099..66ab4f3 100644 --- a/lib/views/script/create_script_screen.dart +++ b/lib/views/script/create_script_screen.dart @@ -1,9 +1,12 @@ +import 'package:earlips/utilities/style/color_styles.dart'; import 'package:flutter/material.dart'; import 'package:provider/provider.dart'; import 'package:earlips/viewModels/script/create_script_viewmodel.dart'; import 'package:get/get.dart'; class CreateScriptPage extends StatelessWidget { + const CreateScriptPage({super.key}); + @override Widget build(BuildContext context) { return ChangeNotifierProvider( @@ -11,12 +14,12 @@ class CreateScriptPage extends StatelessWidget { child: Consumer( builder: (context, model, child) => Scaffold( appBar: AppBar( - title: Text('대본으로 학습하기'), + title: const Text('대본으로 학습하기'), centerTitle: true, actions: [ TextButton( onPressed: model.complete, - child: Text( + child: const Text( '완료', style: TextStyle( color: Colors.black, @@ -35,7 +38,7 @@ class CreateScriptPage extends StatelessWidget { Expanded( flex: 1, child: Padding( - padding: EdgeInsets.all(10.0), + padding: const EdgeInsets.all(10.0), child: TextField( controller: model.writedTextController, expands: true, @@ -56,9 +59,9 @@ class CreateScriptPage extends StatelessWidget { Expanded( flex: 1, child: Padding( - padding: EdgeInsets.fromLTRB(25, 20, 25, 100), + padding: const EdgeInsets.fromLTRB(25, 20, 25, 100), child: Container( - padding: EdgeInsets.all(20.0), + padding: const EdgeInsets.all(20.0), width: Get.width * 0.8, decoration: BoxDecoration( color: Colors.white, @@ -68,14 +71,14 @@ class CreateScriptPage extends StatelessWidget { color: Colors.grey.withOpacity(0.5), spreadRadius: 1, blurRadius: 6, - offset: Offset(0, 3), + offset: const Offset(0, 3), ), ], ), child: SingleChildScrollView( child: Text( model.voicedTextController.text, - style: TextStyle(fontSize: 16), + style: const TextStyle(fontSize: 16), ), ), ), @@ -99,7 +102,7 @@ class CreateScriptPage extends StatelessWidget { borderRadius: BorderRadius.circular(40), onTap: model.toggleRecording, child: Padding( - padding: EdgeInsets.all(20), + padding: const EdgeInsets.all(20), child: Icon( model.isRecording ? Icons.stop : Icons.mic, size: 30, @@ -117,4 +120,3 @@ class CreateScriptPage extends StatelessWidget { ); } } - diff --git a/lib/views/study/date_study_screen.dart b/lib/views/study/date_study_screen.dart index 30af4ab..8c06193 100644 --- a/lib/views/study/date_study_screen.dart +++ b/lib/views/study/date_study_screen.dart @@ -5,7 +5,7 @@ import 'package:earlips/viewModels/study/date_study_screen_viewmodel.dart'; class DateStudyScreen extends StatelessWidget { final DateTime date; - DateStudyScreen({Key? key, required this.date}) : super(key: key); + const DateStudyScreen({super.key, required this.date}); @override Widget build(BuildContext context) { @@ -14,7 +14,12 @@ class DateStudyScreen extends StatelessWidget { return Scaffold( appBar: AppBar( - title: Text(DateFormat('yyyy년 MM월 dd일').format(date)), // 동적으로 날짜를 표시 + title: Text(DateFormat('yyyy/MM/dd').format(date), + style: const TextStyle( + color: Colors.black, + fontSize: 18, + fontWeight: FontWeight.w500, + )), // 동적으로 날짜를 표시 centerTitle: true, ), body: ListView.separated( @@ -28,10 +33,10 @@ class DateStudyScreen extends StatelessWidget { borderRadius: BorderRadius.circular(15.0), boxShadow: [ BoxShadow( - color: Colors.grey.withOpacity(0.5), - spreadRadius: 1, + color: Colors.grey.withOpacity(0.15), + spreadRadius: 0.1, blurRadius: 10, - offset: Offset(0, 2), + offset: const Offset(0, 2), ), ], ), @@ -39,10 +44,11 @@ class DateStudyScreen extends StatelessWidget { children: [ Container( alignment: Alignment.centerLeft, - margin: EdgeInsets.only(left: 20.0, top: 16.0), + margin: const EdgeInsets.only(left: 20.0, top: 16.0), child: _SmallCard(name: session.type)), // 세션 유형을 표시 ListTile( - contentPadding: const EdgeInsets.only(left: 20, right: 20, bottom: 30), + contentPadding: + const EdgeInsets.only(left: 20, right: 20, bottom: 30), title: Container( alignment: Alignment.center, child: Text( @@ -53,9 +59,7 @@ class DateStudyScreen extends StatelessWidget { ), ), ), - onTap: () { - // TODO: 세부 대본 학습 페이지로 이동하도록 구현 - }, + onTap: () {}, ), ], ), @@ -70,27 +74,26 @@ class DateStudyScreen extends StatelessWidget { class _SmallCard extends StatelessWidget { final String name; - const _SmallCard({Key? key, required this.name}) : super(key: key); + const _SmallCard({super.key, required this.name}); @override Widget build(BuildContext context) { return Container( decoration: BoxDecoration( borderRadius: BorderRadius.circular(4.0), - color: Color(0xFF1FA9DC), + color: const Color(0xFF1FA9DC), ), alignment: Alignment.center, width: 50, - height: 20, + height: 24, child: Text( name, - style: TextStyle( + style: const TextStyle( color: Colors.white, fontSize: 14, - fontFamily: 'Pretendard-Bold', - fontWeight: FontWeight.bold, + fontWeight: FontWeight.w600, ), ), ); } -} \ No newline at end of file +} diff --git a/lib/views/study/study_main.dart b/lib/views/study/study_main.dart index ad09db3..4675810 100644 --- a/lib/views/study/study_main.dart +++ b/lib/views/study/study_main.dart @@ -1,157 +1,34 @@ -import 'package:earlips/views/base/base_widget.dart'; +import 'package:earlips/utilities/style/color_styles.dart'; +import 'package:earlips/views/study/widget/study_main_body_widget.dart'; import 'package:flutter/material.dart'; import 'package:earlips/views/base/base_screen.dart'; -import 'package:get/get.dart'; -import 'package:flutter_svg/flutter_svg.dart'; import 'package:earlips/viewModels/study/study_viewmodel.dart'; import 'package:earlips/views/study/widget/contribution.dart'; -import '../realtime/real_create_script_screen.dart'; - class StudyMain extends BaseScreen { const StudyMain({super.key}); @override Widget buildBody(BuildContext context) { return Scaffold( - appBar: AppBar( - //뒤로가기 화살표 없애기 - automaticallyImplyLeading: false, - title: Container( - alignment: Alignment.center, - child: Text('학습페이지')), - ), - body: SingleChildScrollView( + body: Container( + color: ColorSystem.white, + child: SafeArea( + top: true, + child: SingleChildScrollView( child: Column( children: [ - Container( - child: Container( - color: Color(0xFF), - child: Contribute(), - // child: ContributionWidget(), - ), + const SizedBox( + height: 40, ), Container( - - child: Column( - - children:[ - Row( - children: [ - _Card( - title: "음소 교정", - subtitle: "옴소 교정 및 발음 테스트", - imagePath: "assets/images/study/1.png", - onTap: (){ - - }, - ImgSize: 85, - ), - _Card( - title: "단어 교정", - subtitle: "단어 교정 및 발음 테스트", - imagePath: "assets/images/study/2.png", - onTap: (){ - - }, - ImgSize: 150, - ), - ], - ), - Row( - children: [ - _Card( - title: "문장 교정", - subtitle: "문장 교정 및 발음 테스트", - imagePath: "assets/images/study/3.png", - onTap: (){ - - }, - ImgSize: 85, - ), - _Card( - title: "문단 교정", - subtitle: "대본 입력 및 발음 테스트", - imagePath: "assets/images/study/4.png", - onTap: (){ - - }, - ImgSize: 85, - ), - ], - ), - ] - ) - ) + color: const Color(0x000000ff), + child: const Contribute(), + ), + const StudyNainBodyWidget(), ], ), - ) - ); - } - @override - bool get wrapWithOuterSafeArea => false; - - @override - bool get wrapWithInnerSafeArea => true; - - @override - bool get setBottomOuterSafeArea => true; -} - - -class _Card extends BaseWidget { - final String title; - final String subtitle; - final String imagePath; - final VoidCallback onTap; - final double ImgSize; - const _Card({super.key,required this.title, required this.subtitle, required this.imagePath, required this.onTap , - required this.ImgSize}); - - @override - Widget buildView(BuildContext context) { - return InkWell( - onTap: () { - Get.to(() => onTap()); - }, - child: Container( - margin: EdgeInsets.only(left: 20.0,top: 20.0), - height: Get.height * 0.21, - width: Get.width * 0.43, - decoration: BoxDecoration( - color: Color(0xFFFFFFFF), - borderRadius: BorderRadius.circular(30.0), - ), - child: Column( - children: [ - Container( - alignment: Alignment.center, - margin: EdgeInsets.only(top: 20.0, bottom: 10.0), - child: Image.asset( - imagePath, - width: ImgSize, - height: ImgSize, - ), - width: ImgSize+5, - height: 90, - ), - Text(title, - style: TextStyle( - fontFamily: 'Pretendard-Bold', - fontSize: 15, - fontWeight: FontWeight.bold, - ), - ), - Text( - subtitle, - style: TextStyle( - fontFamily: 'Pretendard-Regular', - fontSize: 12, - ), - ), - ], ), ), - ); + )); } } - diff --git a/lib/views/study/widget/contribution.dart b/lib/views/study/widget/contribution.dart index bafca8b..e691fc1 100644 --- a/lib/views/study/widget/contribution.dart +++ b/lib/views/study/widget/contribution.dart @@ -1,3 +1,4 @@ +import 'package:earlips/utilities/style/color_styles.dart'; import 'package:flutter/material.dart'; import 'package:flutter_calendar_week/flutter_calendar_week.dart'; import 'package:intl/intl.dart'; @@ -7,8 +8,7 @@ import 'package:earlips/viewModels/study/study_viewmodel.dart'; import 'package:earlips/views/study/date_study_screen.dart'; class Contribute extends StatefulWidget { - const Contribute({Key? key}) : super(key: key); - + const Contribute({super.key}); @override _ContributeState createState() => _ContributeState(); @@ -28,15 +28,30 @@ class _ContributeState extends State { return Container( width: Get.width * 0.9, color: Colors.white, - height: Get.height * 0.2, + height: Get.height * 0.175, child: CalendarWeek( controller: _controller, // Use initialized controller showMonth: true, minDate: DateTime.now().add(const Duration(days: -365)), maxDate: DateTime.now().add(const Duration(days: 365)), + pressedDateBackgroundColor: Colors.transparent, + todayDateStyle: const TextStyle( + fontWeight: FontWeight.w600, + fontSize: 16, + color: ColorSystem.white, + ), + todayBackgroundColor: ColorSystem.main, + pressedDateStyle: const TextStyle( + fontSize: 16, + color: ColorSystem.black, + fontWeight: FontWeight.w400, + ), + dateStyle: const TextStyle( + fontSize: 16, + fontWeight: FontWeight.w400, + color: ColorSystem.black, + ), onDatePressed: (DateTime datetime) { - //var data = await fetchDataForDate(datetime); - // 새로운 화면으로 이동하며 데이터 전달 Navigator.push( context, MaterialPageRoute( @@ -44,42 +59,35 @@ class _ContributeState extends State { ), ); }, - onDateLongPressed: (DateTime datetime) { - // Handle long press on date - }, - onWeekChanged: () { - // Handle week change - }, + onDateLongPressed: (DateTime datetime) {}, + onWeekChanged: () {}, monthViewBuilder: (DateTime time) => Align( alignment: FractionalOffset.center, - child: Container( - margin: const EdgeInsets.symmetric(vertical: 4), - child: Text( - DateFormat.yMMMM().format(time), - overflow: TextOverflow.ellipsis, - textAlign: TextAlign.center, - style: TextStyle( - color: Colors.blue, fontWeight: FontWeight.w600), - )), + child: Column( + children: [ + Container( + margin: const EdgeInsets.only(bottom: 15.0), + child: Text( + DateFormat.yMMMM().format(time), + overflow: TextOverflow.ellipsis, + style: const TextStyle( + fontSize: 18.0, + color: ColorSystem.black, + fontWeight: FontWeight.w600), + )), + ], + ), ), - decorations: [ - DecorationItem( - decorationAlignment: FractionalOffset.bottomRight, - date: DateTime.now(), - decoration: const Icon( - Icons.today, - color: Colors.blue, - )), - DecorationItem( - date: DateTime.now().add(const Duration(days: 3)), - decoration: const Text( - 'Holiday', - style: TextStyle( - color: Colors.brown, - fontWeight: FontWeight.w600, - ), - )), - ], + + // DecorationItem( + // date: DateTime.now().add(const Duration(days: 3)), + // decoration: const Text( + // 'Holiday', + // style: TextStyle( + // color: Colors.brown, + // fontWeight: FontWeight.w600, + // ), + // )), ), ); } diff --git a/lib/views/study/widget/study_card_widget.dart b/lib/views/study/widget/study_card_widget.dart new file mode 100644 index 0000000..6c8c94d --- /dev/null +++ b/lib/views/study/widget/study_card_widget.dart @@ -0,0 +1,63 @@ +import 'package:flutter/material.dart'; +import 'package:get/get.dart'; + +class StudyCardWidget extends StatelessWidget { + final String title; + final String subtitle; + final String imagePath; + final VoidCallback onTap; + final double imgSize; + + const StudyCardWidget( + {super.key, + required this.title, + required this.subtitle, + required this.imagePath, + required this.onTap, + required this.imgSize}); + + @override + Widget build(BuildContext context) { + return Container( + height: Get.height * 0.21, + width: Get.width * 0.43, + decoration: BoxDecoration( + color: const Color(0xFFFFFFFF), + borderRadius: BorderRadius.circular(30.0), + ), + child: InkWell( + onTap: onTap, + child: Column( + children: [ + Container( + alignment: Alignment.center, + margin: const EdgeInsets.only(top: 20.0, bottom: 10.0), + width: imgSize + 5, + height: 90, + child: Image.asset( + imagePath, + width: imgSize, + height: imgSize, + ), + ), + Text( + title, + style: const TextStyle( + fontFamily: 'Pretendard-Bold', + fontSize: 15, + fontWeight: FontWeight.bold, + ), + ), + Text( + subtitle, + style: const TextStyle( + fontFamily: 'Pretendard-Regular', + fontSize: 12, + ), + ), + ], + ), + ), + ); + } +} diff --git a/lib/views/study/widget/study_main_body_widget.dart b/lib/views/study/widget/study_main_body_widget.dart new file mode 100644 index 0000000..d0e8c7a --- /dev/null +++ b/lib/views/study/widget/study_main_body_widget.dart @@ -0,0 +1,84 @@ +import 'package:earlips/utilities/style/color_styles.dart'; +import 'package:earlips/views/study/widget/study_card_widget.dart'; +import 'package:earlips/views/word/word_screen.dart'; +import 'package:flutter/material.dart'; +import 'package:get/get.dart'; + +class StudyNainBodyWidget extends StatelessWidget { + const StudyNainBodyWidget({super.key}); + + @override + Widget build(BuildContext context) { + return Container( + color: ColorSystem.background, + child: Column(children: [ + const SizedBox( + height: 32, + ), + Row( + crossAxisAlignment: CrossAxisAlignment.center, + mainAxisAlignment: MainAxisAlignment.spaceEvenly, + children: [ + StudyCardWidget( + title: "음소 교정", + subtitle: "옴소 교정 및 발음 테스트", + imagePath: "assets/images/study/1.png", + onTap: () { + Get.to(() => const WordScreen( + title: "음소 교정", + type: 0, + )); + }, + imgSize: 85, + ), + StudyCardWidget( + title: "단어 교정", + subtitle: "단어 교정 및 발음 테스트", + imagePath: "assets/images/study/2.png", + onTap: () { + Get.to(() => const WordScreen( + title: "단어 교정", + type: 1, + )); + }, + imgSize: 150, + ), + ], + ), + const SizedBox( + height: 20, + ), + Row( + crossAxisAlignment: CrossAxisAlignment.center, + mainAxisAlignment: MainAxisAlignment.spaceEvenly, + children: [ + StudyCardWidget( + title: "문장 교정", + subtitle: "문장 교정 및 발음 테스트", + imagePath: "assets/images/study/3.png", + onTap: () { + Get.to(() => const WordScreen( + title: "문장 교정", + type: 2, + )); + }, + imgSize: 85, + ), + StudyCardWidget( + title: "문단 교정", + subtitle: "대본 입력 및 발음 테스트", + imagePath: "assets/images/study/4.png", + onTap: () { + Get.to(() => const WordScreen( + title: "문단 교정", + type: 3, + )); + }, + imgSize: 85, + ), + ], + ), + ]), + ); + } +} diff --git a/lib/views/word/widget/blue_back_appbar.dart b/lib/views/word/widget/blue_back_appbar.dart new file mode 100644 index 0000000..d41e7d9 --- /dev/null +++ b/lib/views/word/widget/blue_back_appbar.dart @@ -0,0 +1,48 @@ +import 'package:flutter/material.dart'; +import 'package:flutter_svg/flutter_svg.dart'; +import 'package:get/get.dart'; +import 'package:earlips/utilities/style/color_styles.dart'; +import 'package:earlips/views/base/default_back_appbar.dart'; + +class BlueBackAppbar extends DefaultBackAppbar { + const BlueBackAppbar({super.key, required super.title}); + + @override + Widget build(BuildContext context) { + return AppBar( + title: Text( + title, + style: const TextStyle( + fontSize: 16, + fontWeight: FontWeight.w600, + color: ColorSystem.white), + ), + centerTitle: true, + backgroundColor: ColorSystem.main2, // Set the background color to blue + automaticallyImplyLeading: true, + leadingWidth: 90, + leading: TextButton.icon( + style: TextButton.styleFrom( + splashFactory: NoSplash.splashFactory, + foregroundColor: ColorSystem.white, + shape: RoundedRectangleBorder( + borderRadius: BorderRadius.circular(16.0), + ), + ), + icon: SvgPicture.asset("assets/icons/back_white.svg"), + label: const Text( + "뒤로", + style: TextStyle( + color: ColorSystem.white, + fontSize: 14, + fontWeight: FontWeight.w600, + height: 1.4, + ), + ), + onPressed: () { + Get.back(); + }, + ), + ); + } +} 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(); + } +}