Yimaru-Mobile/lib/ui/widgets/writing_course_practice_question.dart

124 lines
4.4 KiB
Dart

import 'package:flutter/material.dart';
import 'package:stacked/stacked.dart';
import '../common/app_colors.dart';
import '../common/enmus.dart';
import '../common/ui_helpers.dart';
import '../views/course_practice_question/course_practice_question_view.form.dart';
import '../views/course_practice_question/course_practice_question_viewmodel.dart';
import 'custom_circular_progress_indicator.dart';
import 'custom_elevated_button.dart';
class WritingCoursePracticeQuestion
extends ViewModelWidget<CoursePracticeQuestionViewModel> {
final int index;
final TextEditingController answerController;
const WritingCoursePracticeQuestion(
{super.key, required this.index, required this.answerController});
@override
Widget build(
BuildContext context, CoursePracticeQuestionViewModel viewModel) =>
_buildBody(viewModel);
Widget _buildBody(CoursePracticeQuestionViewModel viewModel) => Column(
crossAxisAlignment: CrossAxisAlignment.start,
mainAxisAlignment: MainAxisAlignment.spaceBetween,
children: _buildBodyChildren(viewModel),
);
List<Widget> _buildBodyChildren(CoursePracticeQuestionViewModel viewModel) =>
[_buildColumnScroller(viewModel), _buildContinueButtonWrapper(viewModel)];
Widget _buildColumnScroller(CoursePracticeQuestionViewModel viewModel) =>
SingleChildScrollView(
child: _buildUpperColumn(viewModel),
);
Widget _buildUpperColumn(CoursePracticeQuestionViewModel viewModel) => Column(
mainAxisSize: MainAxisSize.min,
crossAxisAlignment: CrossAxisAlignment.start,
children: _buildUpperColumnChildren(viewModel),
);
List<Widget> _buildUpperColumnChildren(
CoursePracticeQuestionViewModel viewModel) =>
[
verticalSpaceMedium,
_buildTitle(viewModel),
verticalSpaceLarge,
_buildQuestionFormField(viewModel),
if (viewModel.hasAnswerValidationMessage && viewModel.focusAnswer)
verticalSpaceTiny,
if (viewModel.hasAnswerValidationMessage && viewModel.focusAnswer)
_buildQuestionValidatorWrapper(viewModel),
];
Widget _buildTitle(CoursePracticeQuestionViewModel viewModel) => Text(
'Q${index + 1}. ${viewModel.coursePracticeQuestions[index].questionText} ',
style: style16DG600,
);
Widget _buildQuestionFormField(CoursePracticeQuestionViewModel viewModel) =>
TextFormField(
maxLines: 3,
controller: answerController,
onTap: viewModel.setAnswerFocus,
decoration: inputDecoration(
hint: 'Enter Your Answer',
focus: viewModel.focusAnswer,
filled: answerController.text.isNotEmpty),
);
Widget _buildQuestionValidatorWrapper(
CoursePracticeQuestionViewModel viewModel) =>
viewModel.hasAnswerValidationMessage
? _buildQuestionValidator(viewModel)
: Container();
Widget _buildQuestionValidator(CoursePracticeQuestionViewModel viewModel) =>
Text(
viewModel.answerValidationMessage!,
style: const TextStyle(
fontSize: 12,
color: Colors.red,
fontWeight: FontWeight.w700,
),
);
Widget _buildContinueButtonWrapper(
CoursePracticeQuestionViewModel viewModel) =>
Padding(
padding: const EdgeInsets.only(bottom: 50),
child: _buildContinueButtonState(viewModel),
);
Widget _buildContinueButtonState(CoursePracticeQuestionViewModel viewModel) =>
viewModel.busy(StateObjects.coursePracticeQuestion)
? _buildProgressIndicator()
: _buildContinueButton(viewModel);
Widget _buildProgressIndicator()=>const CustomCircularProgressIndicator(color: kcPrimaryColor);
Widget _buildContinueButton(CoursePracticeQuestionViewModel viewModel) =>
CustomElevatedButton(
height: 55,
borderRadius: 12,
foregroundColor: kcWhite,
backgroundColor: answerController.text.isNotEmpty
? kcPrimaryColor
: kcPrimaryColor.withOpacity(0.1),
onTap: answerController.text.isNotEmpty
? ()async =>await viewModel.nextQuestion(
index + 1 < viewModel.coursePracticeQuestions.length
? index + 1
: index)
: null,
text: viewModel.currentQuestionIndex ==
viewModel.coursePracticeQuestions.length - 1
? 'Finish'
: 'Continue',
);
}