diff --git a/README.md b/README.md index 22348ca..aafee8b 100644 --- a/README.md +++ b/README.md @@ -71,6 +71,13 @@ Don't forget to give it a star ⭐ | - | - | - | | | | | +| [(Neumophic Design)](./example/lib/demo/pinput_templates/neumophic_designs.dart)| +| - | - | - | +| - | - | - | + +| + + ## Getting Started The pin has 6 states `default` `focused`, `submitted`, `following`, `disabled`, `error`, you can customize each state by specifying theme parameter. diff --git a/example/lib/demo/pinput_templates/neumophic_designs.dart b/example/lib/demo/pinput_templates/neumophic_designs.dart new file mode 100644 index 0000000..13274d6 --- /dev/null +++ b/example/lib/demo/pinput_templates/neumophic_designs.dart @@ -0,0 +1,100 @@ +import 'package:flutter_neumorphic/flutter_neumorphic.dart'; +import 'package:pinput/pinput.dart'; + +class NeumophicPinputExample extends StatefulWidget { + const NeumophicPinputExample({Key? key}) : super(key: key); + + @override + State createState() => _NeumophicPinputExampleState(); +} + +class _NeumophicPinputExampleState extends State { + final pinController = TextEditingController(); + final focusNode = FocusNode(); + final formKey = GlobalKey(); + + @override + void dispose() { + pinController.dispose(); + focusNode.dispose(); + super.dispose(); + } + + @override + Widget build(BuildContext context) { + + final defaultPinTheme = PinTheme( + width: 56, + height: 56, + textStyle: const TextStyle( + fontSize: 22, + color: Color.fromRGBO(30, 60, 87, 1), + ), + decoration: BoxDecoration( + borderRadius: BorderRadius.circular(19), + ), + ); + + /// Optionally you can use form to validate the Pinput + return Form( + key: formKey, + child: Column( + mainAxisAlignment: MainAxisAlignment.center, + children: [ + Directionality( + // Specify direction if desired + textDirection: TextDirection.ltr, + child: Pinput( + showNeumorphicDesign: true, + showCursor: false, + neumorphicStyle: NeumorphicStyle( + shape: NeumorphicShape.concave, + boxShape: + NeumorphicBoxShape.roundRect(BorderRadius.circular(19)), + depth: 1, + intensity: 5, + color: Colors.black12, + ), + controller: pinController, + focusNode: focusNode, + androidSmsAutofillMethod: + AndroidSmsAutofillMethod.smsUserConsentApi, + listenForMultipleSmsOnAndroid: true, + defaultPinTheme: defaultPinTheme, + validator: (value) { + return value == '2222' ? null : 'Pin is incorrect'; + }, + hapticFeedbackType: HapticFeedbackType.lightImpact, + onCompleted: (pin) { + debugPrint('onCompleted: $pin'); + }, + onChanged: (value) { + debugPrint('onChanged: $value'); + }, + focusedPinTheme: defaultPinTheme.copyWith( + decoration: defaultPinTheme.decoration!.copyWith( + borderRadius: BorderRadius.circular(8), + ), + ), + submittedPinTheme: defaultPinTheme.copyWith( + decoration: defaultPinTheme.decoration!.copyWith( + borderRadius: BorderRadius.circular(19), + ), + ), + errorPinTheme: defaultPinTheme.copyBorderWith( + border: Border.all(color: Colors.redAccent), + ), + ), + ), + TextButton( + onPressed: () { + focusNode.unfocus(); + formKey.currentState!.validate(); + }, + child: const Text('Validate'), + ), + ], + ), + ); + } +} diff --git a/example/pubspec.yaml b/example/pubspec.yaml index 980b345..9052a87 100644 --- a/example/pubspec.yaml +++ b/example/pubspec.yaml @@ -27,6 +27,8 @@ dependencies: path: ../ google_fonts: ^2.3.0 cupertino_icons: ^1.0.4 + flutter_neumorphic: + dev_dependencies: flutter_test: diff --git a/lib/src/pinput.dart b/lib/src/pinput.dart index 2252f29..eda9dd5 100644 --- a/lib/src/pinput.dart +++ b/lib/src/pinput.dart @@ -1,30 +1,23 @@ import 'dart:ui'; + import 'package:flutter/cupertino.dart'; -import 'package:flutter/material.dart'; -import 'package:flutter/rendering.dart'; -import 'package:flutter/services.dart'; import 'package:flutter/foundation.dart'; import 'package:flutter/gestures.dart'; +import 'package:flutter/rendering.dart'; +import 'package:flutter/services.dart'; +import 'package:flutter_neumorphic/flutter_neumorphic.dart'; import 'package:smart_auth/smart_auth.dart'; import 'package:universal_platform/universal_platform.dart'; +part 'models/pin_theme.dart'; part 'pinput_state.dart'; - part 'utils/enums.dart'; - -part 'utils/pinput_constants.dart'; - -part 'widgets/widgets.dart'; - -part 'models/pin_theme.dart'; - part 'utils/extensions.dart'; - -part 'widgets/_pin_item.dart'; - +part 'utils/pinput_constants.dart'; part 'utils/pinput_utils_mixin.dart'; - +part 'widgets/_pin_item.dart'; part 'widgets/_pinput_selection_gesture_detector_builder.dart'; +part 'widgets/widgets.dart'; /// Flutter package to create easily customizable Pin code input field, that your designers can't even draw in Figma 🤭 /// @@ -80,6 +73,7 @@ class Pinput extends StatefulWidget { this.autofocus = false, this.obscureText = false, this.showCursor = true, + this.showNeumorphicDesign = false, this.isCursorAnimationEnabled = true, this.enableSuggestions = true, this.hapticFeedbackType = HapticFeedbackType.disabled, @@ -108,6 +102,7 @@ class Pinput extends StatefulWidget { this.scrollPadding = const EdgeInsets.all(20), this.contextMenuBuilder = _defaultContextMenuBuilder, this.onTapOutside, + this.neumorphicStyle, Key? key, }) : assert(obscuringCharacter.length == 1), assert(length > 0), @@ -356,6 +351,13 @@ class Pinput extends StatefulWidget { /// This is useful if you want to unfocus the [Pinput] when user taps outside of it final TapRegionCallback? onTapOutside; + /// Whether show Neumorphic Design or not + final bool showNeumorphicDesign; + + /// Creating a new instance of the NeumorphicStyle class. + /// Enables the User to pass their own neumorphicStyle + final NeumorphicStyle? neumorphicStyle; + static Widget _defaultContextMenuBuilder( BuildContext context, EditableTextState editableTextState, @@ -730,5 +732,20 @@ class Pinput extends StatefulWidget { defaultValue: _defaultContextMenuBuilder, ), ); + + properties.add( + DiagnosticsProperty( + 'showNeumorphicDesign', + showNeumorphicDesign, + defaultValue: false, + ), + ); + properties.add( + DiagnosticsProperty( + 'neumorphicStyle', + neumorphicStyle, + defaultValue: null, + ), + ); } } diff --git a/lib/src/widgets/_pin_item.dart b/lib/src/widgets/_pin_item.dart index 1421d4b..63a6ce7 100644 --- a/lib/src/widgets/_pin_item.dart +++ b/lib/src/widgets/_pin_item.dart @@ -9,27 +9,52 @@ class _PinItem extends StatelessWidget { @override Widget build(BuildContext context) { final pinTheme = _pinTheme(index); + final showNeumorphic = state.widget.showNeumorphicDesign; + final neumorphicStyle = state.widget.neumorphicStyle; + 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, + child: showNeumorphic + ? Neumorphic( + style: neumorphicStyle ?? NeumorphicStyle( + shape: NeumorphicShape.concave, + boxShape: + NeumorphicBoxShape.roundRect(BorderRadius.circular(19)), + depth: 1, + intensity: 5, + color: Colors.white, + ), + child: inputsWithoutNeumorphic(pinTheme, showNeumorphic), + ) + : inputsWithoutNeumorphic(pinTheme, showNeumorphic), + ); + } + + AnimatedContainer inputsWithoutNeumorphic( + PinTheme pinTheme, + bool showNeumorphic, + ) { + return AnimatedContainer( + height: pinTheme.height, + width: pinTheme.width, + constraints: pinTheme.constraints, + padding: pinTheme.padding, + margin: pinTheme.margin, + decoration: showNeumorphic + ? pinTheme.decoration! + .copyWith(border: Border.all(color: Colors.transparent)) + : 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: (child, animation) { - return _getTransition(child, animation); - }, - child: _buildFieldContent(index, pinTheme), - ), + transitionBuilder: (child, animation) { + return _getTransition(child, animation); + }, + child: _buildFieldContent(index, pinTheme), ), ); } diff --git a/pubspec.yaml b/pubspec.yaml index 18eb24e..7ace9a5 100644 --- a/pubspec.yaml +++ b/pubspec.yaml @@ -22,8 +22,9 @@ dependencies: sdk: flutter smart_auth: ^1.0.8 universal_platform: ^1.0.0+1 + flutter_neumorphic: dev_dependencies: flutter_test: sdk: flutter - flutter_lints: ^2.0.1 \ No newline at end of file + flutter_lints: ^2.0.1