Merge pull request #181 from adrianFarkas/feat/placeholder

Add hint/placeholder feature

Author: adar2378

README.md

@@ -216,6 +216,15 @@ A flutter package which will help you to generate pin code fields with beautiful
   /// Use external [AutoFillGroup]
   final bool useExternalAutoFillGroup;
 
+  /// Displays a hint or placeholder in the field if it's value is empty.
+  /// It only appears if it's not null. Single character is recommended.
+  final String? hintCharacter;
+
+  /// the style of the [hintCharacter], default is [fontSize: 20, fontWeight: FontWeight.bold]
+  /// and it also uses the [textStyle]'s properties 
+  /// [TextStyle.color] is [Colors.grey]
+  final TextStyle? hintStyle;
+
 ```
 
 **PinTheme**

lib/src/pin_code_fields.dart

@@ -171,6 +171,15 @@ class PinCodeTextField extends StatefulWidget {
   /// Use external [AutoFillGroup]
   final bool useExternalAutoFillGroup;
 
+  /// Displays a hint or placeholder in the field if it's value is empty.
+  /// It only appears if it's not null. Single character is recommended.
+  final String? hintCharacter;
+
+  /// the style of the [hintCharacter], default is [fontSize: 20, fontWeight: FontWeight.bold]
+  /// and it also uses the [textStyle]'s properties 
+  /// [TextStyle.color] is [Colors.grey]
+  final TextStyle? hintStyle;
+
   PinCodeTextField({
     Key? key,
     required this.appContext,
@@ -220,6 +229,8 @@ class PinCodeTextField extends StatefulWidget {
     this.cursorColor,
     this.cursorWidth = 2,
     this.cursorHeight,
+    this.hintCharacter,
+    this.hintStyle,
 
     /// Default for [AutofillGroup]
     this.onAutoFillDisposeAction = AutofillContextAction.commit,
@@ -271,6 +282,14 @@ class _PinCodeTextFieldState extends State<PinCodeTextField>
         fontWeight: FontWeight.bold,
       ).merge(widget.textStyle);
 
+  TextStyle get _hintStyle => _textStyle
+      .copyWith(
+        color: _pinTheme.disabledColor,
+      )
+      .merge(widget.hintStyle);
+
+  bool get _hintAvailable => widget.hintCharacter != null;
+
   @override
   void initState() {
     // if (!kReleaseMode) {
@@ -490,10 +509,18 @@ class _PinCodeTextFieldState extends State<PinCodeTextField>
       }
     }
 
+    if (_inputList[index!].isEmpty && _hintAvailable) {
+      return Text(
+        widget.hintCharacter!,
+        key: ValueKey(_inputList[index]),
+        style: _hintStyle,
+      );
+    }
+
     return Text(
-      widget.obscureText && _inputList[index!].isNotEmpty && showObscured
+      widget.obscureText && _inputList[index].isNotEmpty && showObscured
           ? widget.obscuringCharacter
-          : _inputList[index!],
+          : _inputList[index],
       key: ValueKey(_inputList[index]),
       style: _textStyle,
     );