import 'dart:async'; 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/ui/marathon/marathon_provider.dart'; import 'package:mohem_flutter_app/ui/marathon/widgets/marathon_header.dart'; import 'package:mohem_flutter_app/ui/marathon/widgets/question_card.dart'; import 'package:provider/provider.dart'; import 'package:steps_indicator/steps_indicator.dart'; class MarathonScreen extends StatelessWidget { const MarathonScreen({Key? key}) : super(key: key); @override Widget build(BuildContext context) { MarathonProvider provider = context.watch(); return Scaffold( body: SingleChildScrollView( child: Column( children: [ const MarathonHeader(), 21.height, MarathonProgressContainer(provider: provider) .paddingOnly(left: 21, right: 21), QuestionCard(provider: provider), ], ), ), ); } } class MarathonProgressContainer extends StatefulWidget { final MarathonProvider provider; const MarathonProgressContainer({Key? key, required this.provider}) : super(key: key); @override State createState() => _MarathonProgressContainerState(); } class _MarathonProgressContainerState extends State { final int totalQuestions = 10; final int currentQuestion = 04; @override void initState() { scheduleMicrotask(() { widget.provider.startTimer(); }); super.initState(); } @override void dispose() { widget.provider.cancelTimer(); super.dispose(); } @override Widget build(BuildContext context) { return Container( width: double.infinity, decoration: MyDecorations.shadowDecoration, padding: const EdgeInsets.symmetric(vertical: 15, horizontal: 20), child: Column( mainAxisSize: MainAxisSize.min, children: [ Row( mainAxisAlignment: MainAxisAlignment.spaceBetween, children: [ Container( decoration: BoxDecoration( color: MyColors.greenColor, borderRadius: BorderRadius.circular(12), ), padding: const EdgeInsets.symmetric(vertical: 5, horizontal: 8), child: "${currentQuestion.toString()} / ${totalQuestions.toString()} ${LocaleKeys.question.tr()}" .toText12(color: MyColors.white), ), "23 ${LocaleKeys.marathoners.tr()}".toText14(), "00:${widget.provider.start < 10 ? "0${widget.provider.start}" : widget.provider.start}" .toText18(isBold: true), ], ), 15.height, const StepsIndicator( lineLength: 23, nbSteps: 10, selectedStep: 6, doneLineColor: MyColors.greenColor, doneStepColor: MyColors.greenColor, doneLineThickness: 6, undoneLineThickness: 6, selectedStepSize: 10, unselectedStepSize: 10, doneStepSize: 10, selectedStepColorIn: MyColors.greenColor, selectedStepColorOut: MyColors.greenColor, unselectedStepColorIn: MyColors.lightGreyDeColor, unselectedStepColorOut: MyColors.lightGreyDeColor, undoneLineColor: MyColors.lightGreyDeColor, enableLineAnimation: true, enableStepAnimation: true, ), 12.height, Row( children: [ "25% ${LocaleKeys.completed.tr()}".toText18(isBold: true), ], ), ], ), ); } }