added the functionality to enable neumophic design

README.md

@@ -71,6 +71,13 @@ Don't forget to give it a star ⭐
 | - | - | - |
 | <img width="300" src="https://user-images.githubusercontent.com/26390946/155600099-d0a02f55-09e6-4142-92de-066cd71cf211.gif"/> | <img width="300" src="https://user-images.githubusercontent.com/26390946/155600276-0380b3b4-3d9c-4ea8-87d0-4f7ebd86e460.gif"/> | <img width="300" src="https://user-images.githubusercontent.com/26390946/155600427-901c1eae-e565-4cf8-a338-8ac40eb1149c.gif"/> |
 
+| [(Neumophic Design)](./example/lib/demo/pinput_templates/neumophic_designs.dart)|
+| - | - | - |
+| - | - | - |
+
+| <img width="300" src="https://user-images.githubusercontent.com/32597034/214843044-7183c4ab-8f87-48f2-a8bb-6bf03726bb24.png"/>
+
+
 ## Getting Started
 
 The pin has 6 states `default` `focused`, `submitted`, `following`, `disabled`, `error`, you can customize each state by specifying theme parameter.

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<NeumophicPinputExample> createState() => _NeumophicPinputExampleState();
+}
+
+class _NeumophicPinputExampleState extends State<NeumophicPinputExample> {
+  final pinController = TextEditingController();
+  final focusNode = FocusNode();
+  final formKey = GlobalKey<FormState>();
+
+  @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'),
+          ),
+        ],
+      ),
+    );
+  }
+}

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:

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<bool>(
+        'showNeumorphicDesign',
+        showNeumorphicDesign,
+        defaultValue: false,
+      ),
+    );
+    properties.add(
+      DiagnosticsProperty<NeumorphicStyle>(
+        'neumorphicStyle',
+        neumorphicStyle,
+        defaultValue: null,
+      ),
+    );
   }
 }

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),
       ),
     );
   }

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
+  flutter_lints: ^2.0.1