From 883391d94dabfdefece2b33755d68498fcdd88c1 Mon Sep 17 00:00:00 2001 From: NunoOliveiraP Date: Fri, 26 Jan 2024 16:52:19 +0100 Subject: [PATCH] Changed Pinput UI to a Wrap --- lib/src/pinput.dart | 10 +++++----- lib/src/pinput_state.dart | 2 +- lib/src/widgets/_pin_item.dart | 32 +++++++++++++++----------------- lib/src/widgets/widgets.dart | 12 +++++------- 4 files changed, 26 insertions(+), 30 deletions(-) diff --git a/lib/src/pinput.dart b/lib/src/pinput.dart index 23d5255..b55c717 100644 --- a/lib/src/pinput.dart +++ b/lib/src/pinput.dart @@ -67,7 +67,7 @@ class Pinput extends StatefulWidget { this.senderPhoneNumber, this.androidSmsAutofillMethod = AndroidSmsAutofillMethod.none, this.listenForMultipleSmsOnAndroid = false, - this.mainAxisAlignment = MainAxisAlignment.center, + this.mainAxisAlignment = WrapAlignment.center, this.crossAxisAlignment = CrossAxisAlignment.start, this.pinContentAlignment = Alignment.center, this.animationCurve = Curves.easeIn, @@ -207,8 +207,8 @@ class Pinput extends StatefulWidget { /// If null SizedBox(width: 8) will be used final JustIndexedWidgetBuilder? separatorBuilder; - /// Defines how [Pinput] fields are being placed inside [Row] - final MainAxisAlignment mainAxisAlignment; + /// Defines how [Pinput] fields are being placed inside [Wrap] + final WrapAlignment mainAxisAlignment; /// Defines how [Pinput] and ([errorText] or [errorBuilder]) are being placed inside [Column] final CrossAxisAlignment crossAxisAlignment; @@ -513,10 +513,10 @@ class Pinput extends StatefulWidget { ); properties.add( - DiagnosticsProperty( + DiagnosticsProperty( 'mainAxisAlignment', mainAxisAlignment, - defaultValue: MainAxisAlignment.center, + defaultValue: WrapAlignment.center, ), ); properties.add( diff --git a/lib/src/pinput_state.dart b/lib/src/pinput_state.dart index 94b849b..6d4365d 100644 --- a/lib/src/pinput_state.dart +++ b/lib/src/pinput_state.dart @@ -300,7 +300,7 @@ class _PinputState extends State assert(debugCheckHasMaterial(context)); assert(debugCheckHasMaterialLocalizations(context)); assert(debugCheckHasDirectionality(context)); - final isDense = widget.mainAxisAlignment == MainAxisAlignment.center; + final isDense = widget.mainAxisAlignment == WrapAlignment.center; return isDense ? IntrinsicWidth(child: _buildPinput()) : _buildPinput(); } diff --git a/lib/src/widgets/_pin_item.dart b/lib/src/widgets/_pin_item.dart index 1a3e161..d8eb127 100644 --- a/lib/src/widgets/_pin_item.dart +++ b/lib/src/widgets/_pin_item.dart @@ -10,24 +10,22 @@ class _PinItem extends StatelessWidget { Widget build(BuildContext context) { final pinTheme = _pinTheme(index); - return Flexible( - child: AnimatedContainer( - height: pinTheme.height, - width: pinTheme.width, - constraints: pinTheme.constraints, - padding: pinTheme.padding, - margin: pinTheme.margin, - decoration: pinTheme.decoration, - alignment: state.widget.pinContentAlignment, + return AnimatedContainer( + height: pinTheme.height, + width: pinTheme.width, + constraints: pinTheme.constraints, + padding: pinTheme.padding, + margin: pinTheme.margin, + decoration: pinTheme.decoration, + alignment: state.widget.pinContentAlignment, + duration: state.widget.animationDuration, + curve: state.widget.animationCurve, + child: AnimatedSwitcher( + switchInCurve: state.widget.animationCurve, + switchOutCurve: state.widget.animationCurve, duration: state.widget.animationDuration, - curve: state.widget.animationCurve, - child: AnimatedSwitcher( - switchInCurve: state.widget.animationCurve, - switchOutCurve: state.widget.animationCurve, - duration: state.widget.animationDuration, - transitionBuilder: _getTransition, - child: _buildFieldContent(index, pinTheme), - ), + transitionBuilder: _getTransition, + child: _buildFieldContent(index, pinTheme), ), ); } diff --git a/lib/src/widgets/widgets.dart b/lib/src/widgets/widgets.dart index f0d24d5..5c2bd2b 100644 --- a/lib/src/widgets/widgets.dart +++ b/lib/src/widgets/widgets.dart @@ -21,7 +21,7 @@ class _PinputFormField extends FormField { class _SeparatedRaw extends StatelessWidget { final List children; - final MainAxisAlignment mainAxisAlignment; + final WrapAlignment mainAxisAlignment; final JustIndexedWidgetBuilder? separatorBuilder; const _SeparatedRaw({ @@ -35,12 +35,10 @@ class _SeparatedRaw extends StatelessWidget { Widget build(BuildContext context) { final itemCount = max(0, children.length * 2 - 1); final indexedList = [for (int i = 0; i < itemCount; i += 1) i]; - return Row( - crossAxisAlignment: CrossAxisAlignment.center, - mainAxisAlignment: mainAxisAlignment, - mainAxisSize: mainAxisAlignment == MainAxisAlignment.center - ? MainAxisSize.min - : MainAxisSize.max, + return Wrap( + direction: Axis.horizontal, + crossAxisAlignment: WrapCrossAlignment.center, + alignment: mainAxisAlignment, children: indexedList.map((index) { final itemIndex = index ~/ 2; return index.isEven ? children[itemIndex] : _separator(itemIndex);