pinput 0.1.8 copy "pinput: ^0.1.8" to clipboard
pinput: ^0.1.8 copied to clipboard

outdated

This widget keeps whole space of parent's width and lay outs text fields in a way that creats look of PIN CODE input field.

PinPut #

PIN input field widget for Flutter with paste from clipboard functionality

Contents #

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.

drawing

Installation #

Install the latest version from pub.

Properties #

Property Default/Meaning
onSubmit @required Function
fieldsCount @required number
isTextObscure false
textStyle TextStyle(fontSize: 30)
spaceBetween space between fields Default: 10.0
clearButtonIcon Icon(Icons.backspace, size: 30)
pasteButtonIcon Icon(Icons.content_paste, size: 30)
unFocusWhen Default is False, True to hide keyboard
inputDecoration Ability to style field's border, padding etc...
keybaordType number
keyboardAction next
actionButtonEnabled true
autoFocus true
textCapitalization TextCapitalization.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);
  }
}

👍 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

2427
likes
0
pub points
99%
popularity

Publisher

verified publisherfman.ge

This widget keeps whole space of parent's width and lay outs text fields in a way that creats look of PIN CODE input field.

Repository (GitHub)
View/report issues

License

unknown (LICENSE)

Dependencies

flutter

More

Packages that depend on pinput