import 'package:doctor_app_flutter/config/size_config.dart'; import 'package:doctor_app_flutter/util/translations_delegate_base.dart'; import 'package:doctor_app_flutter/widgets/shared/app_texts_widget.dart'; import 'package:flutter/material.dart'; import 'package:hexcolor/hexcolor.dart'; class PageStepperWidget extends StatelessWidget { final int stepsCount; final int currentStepIndex; final Size screenSize; PageStepperWidget({this.stepsCount, this.currentStepIndex, this.screenSize}); @override Widget build(BuildContext context) { double dividerWidth = (screenSize.width / stepsCount) - (10 * stepsCount); return Container( margin: EdgeInsets.symmetric(vertical: 16.0, horizontal: 16.0), child: Column( crossAxisAlignment: CrossAxisAlignment.start, children: [ Row( children: [ for (int i = 1; i <= stepsCount; i++) if (i == currentStepIndex) StepWidget(i, true, i == stepsCount, i < currentStepIndex, dividerWidth) else StepWidget(i, false, i == stepsCount, i < currentStepIndex, dividerWidth) ], ) ], ), ); } } class StepWidget extends StatelessWidget { final int index; final bool isInProgress; final bool isFinalStep; final bool isStepFinish; final double dividerWidth; StepWidget(this.index, this.isInProgress, this.isFinalStep, this.isStepFinish, this.dividerWidth); @override Widget build(BuildContext context) { StepStatus status; if (isInProgress) { status = StepStatus.InProgress; } else { if(isStepFinish){ status = StepStatus.Completed; }else { status = StepStatus.Locked; } } return Column( crossAxisAlignment: CrossAxisAlignment.start, children: [ Row( children: [ Container( padding: EdgeInsets.all(0.0), margin: EdgeInsets.symmetric(horizontal: 1), width: 25, height: 25, decoration: BoxDecoration( color: isInProgress ? Color(0xFFCC9B14) : Color(0xFFC9C9C9), shape: BoxShape.circle, border: Border.all( color: isInProgress ? Color(0xFFCC9B14) : Color(0xFFC9C9C9), width: 1), ), child: Center( child: Icon( Icons.check, size: 20, color: status == StepStatus.InProgress ? Colors.white : status == StepStatus.Locked ? Colors.grey.shade800 : Color(0xFF359846), )), ), if (!isFinalStep) Container( width: dividerWidth, height: 2, color: Colors.grey, ), ], ), SizedBox( height: 8, ), AppText( "${TranslationBase.of(context).step} $index", fontWeight: FontWeight.bold, color: status == StepStatus.InProgress ? Colors.black : status == StepStatus.Locked ? Colors.grey : Color(0xFF359846), fontFamily: 'Poppins', fontSize: SizeConfig.textMultiplier * 1.6, ), Container( margin: EdgeInsets.symmetric(vertical: 4), padding: EdgeInsets.symmetric(horizontal: 4, vertical: 2), decoration: BoxDecoration( color: status == StepStatus.InProgress ? Color(0xFFF1E9D3) : status == StepStatus.Locked ? Color(0xFFD8E8DB) : Color(0xFFCCCCCC), borderRadius: BorderRadius.all( Radius.circular(8.0), ), border: Border.all(color: HexColor('#707070'), width: 0.30), ), child: AppText( status == StepStatus.InProgress ? "inProgress" : status == StepStatus.Locked ? "Locked" : "Completed", fontWeight: FontWeight.bold, textAlign: TextAlign.center, fontFamily: 'Poppins', fontSize: SizeConfig.textMultiplier * 1.4, color: status == StepStatus.InProgress ? Color(0xFFCC9B14) : status == StepStatus.Locked ? Color(0xFF969696) : Color(0xFF359846), ), ) ], ); } } enum StepStatus { InProgress, Locked, Completed, }