in , ,

PIN input field widget for Flutter with paste from clipboard functionality

PinPut

Pin input is a kind of common password strategy used in mobile applications nowadays. But implementing that kind of widget for Flutter from scratch can be time-consuming. But there are some libraries which are implemented by the Flutter community, and you can just use those to implement Pin code input screen. Now, check the PIN input field widget for Flutter with paste from clipboard functionality here. 

This widget maintains the whole width of the parent widget and layouts textfields in the optimal way to produce a PIN code input field look. It accepts strings of any length and calls the onSubmit method when all fields are filled.

PinPut

Properties

PropertyDefault/Meaning
onSubmit@required Function
fieldsCount@required number
isTextObscurefalse
textStyleTextStyle(fontSize: 30)
spaceBetweenspace between fields Default: 10.0
clearButtonIconIcon(Icons.backspace, size: 30)
pasteButtonIconIcon(Icons.content_paste, size: 30)
unFocusWhenDefault is False, True to hide keyboard
inputDecorationAbility to style field’s border, padding etc…
keybaordTypenumber
keyboardActionnext
actionButtonEnabledtrue
autoFocustrue
textCapitalizationTextCapitalization.none

Example

Import the package:

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

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

class PinPutTest extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
        theme: ThemeData(
          primaryColor: Colors.green,
          hintColor: Colors.green,
        ),
        home: Scaffold(
            body: Builder(
          builder: (context) => Padding(
                padding: const EdgeInsets.all(40.0),
                child: Center(
                  child: PinPut(
                    fieldsCount: 4,
                    onSubmit: (String pin) => _showSnackBar(pin, context),
                  ),
                ),
              ),
        )));
  }

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

GitHub

https://github.com/Tkko/Flutter_PinPut

Written by James

A Flutter package for iOS and Android for showing a passcode input screen

A flutter package that will help you to generate pin code fields