pinput 0.2.0-dev.1

Flutter package to create Pin code input text field with every pixel customization possibility and beautiful animations

PinPut

🔥🚀 Flutter package to create Pin code input text field with every pixel customization possibility 🎨 with beautiful animations

Enhanced Documentation coming soon 🔥

Breaking changes in version 0.2.0-dev.1 changed widget building logic so now it supports:

• Backspace on keyboard
• Every pixel customization
• Nice animations
• Form validation
• Ios auto fill - testing needed

Contents

• Overview

• Installation

• Properties

• Example

• Contribute

Overview

This widget keeps whole width of parent widget and layouts textfields in a way to create PIN code input field look it accepts string of any length and calls the onSubmit method when all fields are filled.

Installation

Install the latest version from pub.

Properties

@required this.fieldsCount,
@required this.onSubmit,
this.animationCurve = Curves.linear,
this.fieldMargin,
this.fieldPadding,
this.fieldConstraints = const BoxConstraints(minHeight: 40, minWidth: 40),
this.animationDuration = const Duration(milliseconds: 160),
this.autoFocus = false,
this.controller,
this.enabled = true,
this.submittedFieldDecoration,
this.selectedFieldDecoration,
this.pinAnimationType = PinAnimationType.slide,
this.followingFieldDecoration,
this.disabledDecoration,
this.focusNode,
this.inputDecoration = const InputDecoration(
  contentPadding: EdgeInsets.all(0),
  border: InputBorder.none,
  counterText: '',
),
this.inputFormatters,
this.keyboardAppearance,
this.keyboardType = TextInputType.number,
this.obscureText,
this.onChanged,
this.onTap,
this.slideTransitionBeginOffset,
this.onClipboardFound,
this.textCapitalization = TextCapitalization.none,
this.textInputAction,
this.textStyle = const TextStyle(fontSize: 30),
this.fieldsAlignment = MainAxisAlignment.spaceBetween,
this.toolbarOptions,
this.onSaved,
this.validator,
this.autoValidate = false,

Example

Import the package:

import 'package:flutter/material.dart';
import 'package:pinput/pin_put/pin_put.dart';

void main() => runApp(PinPutTest());

class PinPutTest extends StatefulWidget {
  @override
  PinPutTestState createState() => PinPutTestState();
}

class PinPutTestState extends State<PinPutTest> {
  final TextEditingController _pinPutController = TextEditingController();
  final FocusNode _pinPutFocusNode = FocusNode();

  @override
  void initState() {
    super.initState();
  }

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      showSemanticsDebugger: false,
      theme: ThemeData(
        primaryColor: Colors.green,
        hintColor: Colors.green,
      ),
      home: Scaffold(
        body: Builder(
          builder: (context) {
            return Center(
              child: SingleChildScrollView(
                child: Column(
                  mainAxisSize: MainAxisSize.min,
                  children: <Widget>[
                    Container(
                      padding: const EdgeInsets.symmetric(horizontal: 40.0),
                      child: Center(
                        child: PinPut(
                          fieldsCount: 5,
                          autoFocus: false,
                          controller: _pinPutController,
                          onSubmit: (String pin) => _showSnackBar(pin, context),
                        ),
                      ),
                    ),
                    Row(
                      mainAxisAlignment: MainAxisAlignment.spaceEvenly,
                      children: <Widget>[
                        RaisedButton(
                          child: Text('Unfocus'),
                          onPressed: () => FocusScope.of(context).unfocus(),
                        ),
                        RaisedButton(
                          child: Text('Focus'),
                          onPressed: () {
                            FocusScope.of(context)
                                .requestFocus(_pinPutFocusNode);
                          },
                        ),
                      ],
                    ),
                  ],
                ),
              ),
            );
          },
        ),
      ),
    );
  }

  void _showSnackBar(String pin, BuildContext context) {
    final snackBar = SnackBar(
      duration: Duration(seconds: 3),
      content: Container(
          height: 80.0,
          child: Center(
            child: Text(
              'Pin Submitted. Value: $pin',
              style: TextStyle(fontSize: 25.0),
            ),
          )),
      backgroundColor: Colors.greenAccent,
    );
    Scaffold.of(context).hideCurrentSnackBar();
    Scaffold.of(context).showSnackBar(snackBar);
  }
}

👍 Support

Contribute

1. Fork it

2. Create your feature branch (git checkout -b my-new-feature)

3. Commit your changes (git commit -am 'Add some feature')

4. Push to the branch (git push origin my-new-feature)

5. Create new Pull Request