You cannot select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
118 lines
4.4 KiB
Dart
118 lines
4.4 KiB
Dart
import 'package:easy_localization/easy_localization.dart';
|
|
import 'package:flutter/material.dart';
|
|
import 'package:mohem_flutter_app/classes/colors.dart';
|
|
import 'package:mohem_flutter_app/classes/decorations_helper.dart';
|
|
import 'package:mohem_flutter_app/extensions/int_extensions.dart';
|
|
import 'package:mohem_flutter_app/extensions/string_extensions.dart';
|
|
import 'package:mohem_flutter_app/extensions/widget_extensions.dart';
|
|
import 'package:mohem_flutter_app/generated/locale_keys.g.dart';
|
|
import 'package:mohem_flutter_app/models/disclosure/disclosure_question_model.dart';
|
|
import 'package:mohem_flutter_app/ui/disclosure/disclosure_provider.dart';
|
|
|
|
class DisclosureProgressContainer extends StatelessWidget {
|
|
final DisclosureProvider provider;
|
|
|
|
const DisclosureProgressContainer({Key? key, required this.provider}) : super(key: key);
|
|
|
|
@override
|
|
Widget build(BuildContext context) {
|
|
return Container(
|
|
width: double.infinity,
|
|
decoration: MyDecorations.shadowDecoration,
|
|
padding: const EdgeInsets.fromLTRB(13, 5, 13, 18),
|
|
child: Column(
|
|
mainAxisSize: MainAxisSize.min,
|
|
children: <Widget>[
|
|
5.height,
|
|
Row(
|
|
mainAxisAlignment: MainAxisAlignment.spaceBetween,
|
|
children: <Widget>[
|
|
Container(
|
|
decoration: BoxDecoration(color: MyColors.greenColor, borderRadius: BorderRadius.circular(5)),
|
|
padding: const EdgeInsets.symmetric(vertical: 5, horizontal: 8),
|
|
child: "${provider.currentQuestionNumber.toString()} / ${provider.disclosureDetailsModel.totalQuestions.toString()} ${LocaleKeys.disclosure.tr()}".toText12(color: MyColors.white),
|
|
),
|
|
],
|
|
),
|
|
12.height,
|
|
stepper(
|
|
provider.currentQuestionNumber,
|
|
provider.answerStatusesList,
|
|
provider.disclosureDetailsModel.totalQuestions!,
|
|
),
|
|
8.height,
|
|
Row(
|
|
mainAxisAlignment: MainAxisAlignment.spaceBetween,
|
|
children: <Widget>[
|
|
"${provider.currentQuestionNumber == 1 ? 0 : (((provider.currentQuestionNumber - 1) / (provider.disclosureDetailsModel.totalQuestions!)) * 100).toInt()}% ${LocaleKeys.completed.tr()}".toText14(),
|
|
],
|
|
),
|
|
],
|
|
),
|
|
);
|
|
}
|
|
|
|
Color getStepColor(DisclosureQuestionCardStatus status) {
|
|
switch (status) {
|
|
case DisclosureQuestionCardStatus.question:
|
|
return MyColors.yellowColorII;
|
|
case DisclosureQuestionCardStatus.wrongAnswer:
|
|
return MyColors.lightGreyDeColor;
|
|
case DisclosureQuestionCardStatus.correctAnswer:
|
|
return MyColors.greenColor;
|
|
case DisclosureQuestionCardStatus.skippedAnswer:
|
|
return MyColors.lightGreyDeColor;
|
|
case DisclosureQuestionCardStatus.completed:
|
|
return MyColors.lightGreyDeColor;
|
|
case DisclosureQuestionCardStatus.findingWinner:
|
|
return MyColors.lightGreyDeColor;
|
|
case DisclosureQuestionCardStatus.winnerFound:
|
|
return MyColors.lightGreyDeColor;
|
|
}
|
|
}
|
|
|
|
Widget stepper(int value, List<DisclosureQuestionCardStatus> statusesList, int totalQuestions) {
|
|
return SizedBox(
|
|
width: double.infinity,
|
|
child: Row(
|
|
mainAxisAlignment: MainAxisAlignment.spaceBetween,
|
|
children: <Widget>[
|
|
for (int i = 0; i < totalQuestions; i++)
|
|
if (value <= i) roundContainer(MyColors.lightGreyDeColor, i != 0) else roundContainer(getStepColor(statusesList[i]), i != 0)
|
|
],
|
|
),
|
|
);
|
|
}
|
|
|
|
Widget roundContainer(Color color, bool isNeedLeftBorder) {
|
|
if (isNeedLeftBorder) {
|
|
return Row(
|
|
children: <Widget>[
|
|
Expanded(
|
|
child: AnimatedContainer(
|
|
duration: const Duration(milliseconds: 800), // Set animation duration
|
|
height: 6, // Change thickness if needed
|
|
color: color,
|
|
),
|
|
),
|
|
Container(
|
|
margin: EdgeInsets.zero,
|
|
padding: EdgeInsets.zero,
|
|
width: 10,
|
|
height: 10,
|
|
decoration: BoxDecoration(shape: BoxShape.circle, color: color, border: Border.all(color: color, width: 2)),
|
|
),
|
|
],
|
|
).expanded;
|
|
}
|
|
|
|
return Container(
|
|
margin: EdgeInsets.zero,
|
|
padding: EdgeInsets.zero,
|
|
width: 10,
|
|
height: 10,
|
|
decoration: BoxDecoration(shape: BoxShape.circle, color: color, border: Border.all(color: color, width: 2)),
|
|
);
|
|
}
|
|
}
|