// SPDX-FileCopyrightText: 2022 Iconica // // SPDX-License-Identifier: BSD-3-Clause import 'dart:async'; import 'dart:collection'; import 'package:flutter/material.dart'; import 'package:flutter_registration/flutter_registration.dart'; /// A widget for handling multi-step authentication processes. class AuthScreen extends StatefulWidget { /// Constructs an [AuthScreen] object. /// /// [appBarTitle] specifies the title of the app bar. /// /// [onFinish] is a function called upon completion of the authentication process. /// /// [steps] is a list of authentication steps to be completed. /// /// [submitBtnTitle] specifies the title of the submit button. /// /// [nextBtnTitle] specifies the title of the next button. /// /// [previousBtnTitle] specifies the title of the previous button. /// /// [customAppBar] allows customization of the app bar. /// /// [buttonMainAxisAlignment] specifies the alignment of the buttons. /// /// [customBackgroundColor] allows customization of the background color. /// /// [nextButtonBuilder] allows customization of the next button. /// /// [previousButtonBuilder] allows customization of the previous button. /// /// [titleWidget] specifies a custom widget to be displayed at the top of the screen. /// /// [loginButton] specifies a custom login button widget. /// /// [titleFlex] specifies the flex value for the title widget. /// /// [formFlex] specifies the flex value for the form widget. /// /// [beforeTitleFlex] specifies the flex value before the title widget. /// /// [afterTitleFlex] specifies the flex value after the title widget. /// /// [isLoading] indicates whether the screen is in a loading state. const AuthScreen({ required this.appBarTitle, required this.steps, required this.submitBtnTitle, required this.nextBtnTitle, required this.previousBtnTitle, required this.onFinish, this.customAppBar, this.buttonMainAxisAlignment, this.customBackgroundColor, this.nextButtonBuilder, this.previousButtonBuilder, this.titleWidget, this.loginButton, this.titleFlex, this.formFlex, this.beforeTitleFlex, this.afterTitleFlex, this.isLoading = false, Key? key, }) : assert(steps.length > 0, 'At least one step is required'), super(key: key); final String appBarTitle; final Future Function({ required HashMap values, required void Function(int? pageToReturn) onError, }) onFinish; final List steps; final String submitBtnTitle; final String nextBtnTitle; final String previousBtnTitle; final AppBar? customAppBar; final MainAxisAlignment? buttonMainAxisAlignment; final Color? customBackgroundColor; final Widget Function(Future Function()? onPressed, String label, int step, bool enabled)? nextButtonBuilder; final Widget? Function(VoidCallback onPressed, String label, int step)? previousButtonBuilder; final Widget? titleWidget; final Widget? loginButton; final int? titleFlex; final int? formFlex; final int? beforeTitleFlex; final int? afterTitleFlex; final bool isLoading; @override State createState() => _AuthScreenState(); } /// The state for [AuthScreen]. class _AuthScreenState extends State { final _formKey = GlobalKey(); final _pageController = PageController(); final _animationDuration = const Duration(milliseconds: 300); final _animationCurve = Curves.ease; bool _formValid = false; /// Gets the app bar. AppBar get _appBar => widget.customAppBar ?? AppBar( title: Text(widget.appBarTitle), ); /// Handles previous button press. void onPrevious() { FocusScope.of(context).unfocus(); _validate(_pageController.page!.toInt() - 1); _pageController.previousPage( duration: _animationDuration, curve: _animationCurve, ); } /// Handles next button press. Future onNext(AuthStep step) async { if (!_formKey.currentState!.validate()) { return; } _formKey.currentState!.save(); FocusScope.of(context).unfocus(); if (widget.steps.last == step) { var values = HashMap(); for (var step in widget.steps) { for (var field in step.fields) { values[field.name] = field.value; } } await widget.onFinish( values: values, onError: (int? pageToReturn) => _pageController.animateToPage( pageToReturn ?? 0, duration: _animationDuration, curve: _animationCurve, ), ); return; } else { _validate(_pageController.page!.toInt() + 1); _pageController.nextPage( duration: _animationDuration, curve: _animationCurve, ); } } /// Validates the current step. void _validate(int currentPage) { bool isStepValid = true; // Loop through each field in the current step for (var field in widget.steps[currentPage].fields) { for (var validator in field.validators) { String? validationResult = validator(field.value); if (validationResult != null) { // If any validator returns an error, mark step as invalid and break isStepValid = false; break; } } if (!isStepValid) { break; // No need to check further fields if one is already invalid } } setState(() { _formValid = isStepValid; }); } @override Widget build(BuildContext context) { return widget.isLoading ? const Center( child: SizedBox( height: 120, width: 120, child: CircularProgressIndicator(), ), ) : Scaffold( backgroundColor: widget.customBackgroundColor ?? Colors.white, appBar: _appBar, body: Form( key: _formKey, child: PageView( physics: const NeverScrollableScrollPhysics(), controller: _pageController, children: [ for (var i = 0; i < widget.steps.length; i++) Column( mainAxisSize: MainAxisSize.min, mainAxisAlignment: MainAxisAlignment.spaceBetween, children: [ if (widget.titleWidget != null) ...[ Expanded( flex: widget.titleFlex ?? 1, child: Column( mainAxisAlignment: MainAxisAlignment.start, mainAxisSize: MainAxisSize.min, children: [ Expanded( flex: widget.beforeTitleFlex ?? 3, child: Container(), ), widget.titleWidget!, Expanded( flex: widget.afterTitleFlex ?? 2, child: Container(), ), ], ), ), Column( children: [ Row( mainAxisAlignment: widget .buttonMainAxisAlignment != null ? widget.buttonMainAxisAlignment! : (widget.previousButtonBuilder != null && widget.previousButtonBuilder?.call( onPrevious, widget.previousBtnTitle, i, ) == null) ? MainAxisAlignment.start : widget.steps.first != widget.steps[i] ? MainAxisAlignment.center : MainAxisAlignment.end, children: [ if (widget.previousButtonBuilder == null) ...[ if (widget.steps.first != widget.steps[i]) ElevatedButton( onPressed: onPrevious, child: Row( children: [ const Icon( Icons.arrow_back, size: 18, ), Padding( padding: const EdgeInsets.only( left: 4.0), child: Text(widget.previousBtnTitle), ), ], ), ), ] else if (widget.previousButtonBuilder?.call( onPrevious, widget.previousBtnTitle, i) != null) ...[ widget.previousButtonBuilder!.call( onPrevious, widget.previousBtnTitle, i)! ], widget.nextButtonBuilder?.call( !_formValid ? null : () async { await onNext(widget.steps[i]); }, widget.steps.last == widget.steps[i] ? widget.submitBtnTitle : widget.nextBtnTitle, i, _formValid, ) ?? ElevatedButton( onPressed: !_formValid ? null : () async { await onNext(widget.steps[i]); }, child: Row( children: [ Text( widget.steps.last == widget.steps[i] ? widget.submitBtnTitle : widget.nextBtnTitle, ), const Padding( padding: EdgeInsets.only(left: 4.0), child: Icon( Icons.arrow_forward, size: 18, ), ), ], ), ), ], ), if (widget.loginButton != null) Padding( padding: const EdgeInsets.only(top: 20.0), child: widget.loginButton!, ), ], ), ], ], ), ], ), ), ); } }