pinput 0.1.6

  • README.md
  • CHANGELOG.md
  • Example
  • Installing
  • Versions
  • 90

PinPut #

100% Dart based and lightweight PIN input field widget for Flutter

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 #

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

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

Changelog #

0.1.6 -01/17/2019 #

  • Added Properties ability to hide keyboard & custumize more
PropertyDefault/Meaning
clearButtonIconIcon(Icons.backspace, size: 30)
pasteButtonIconIcon(Icons.content_paste, size: 30)
unFocusWhenDefault is False, True to hide keyboard
textStyleTextStyle(fontSize: 30)
spaceBetweenspace between fields Default: 10.0
inputDecorationAbility to style field's border, padding etc...

0.1.5 - 12/17/2018 #

  • Added Copy From Clipboard fnctionality if copied text length is equal to fields count
PropertyDefault
pasteButtonIconIcons.content_paste

*Note that

clearButtonEnabled will change with actionButtonEnabled in next release, right now if it is true both clear and paste functinality works

0.1.4 - 10/31/2018 #

  • Added
PropertyDefault
autoFocustrue

0.1.3+1 - 11026/2018 #

  • Minor fixes

0.1.3 - 10/26/2018 #

  • Transformed plugin to MVVM pattern
  • Fixed onSubmit call when all fieds aren't filled
  • Updated Demo
  • Added
PropertyDefault
clearButtonIconIcons.backspace
clearButtonEnabledtrue
clearButtonColor0xFF66BB6A

0.1.2 - 10/24/2018 #

  • Added
PropertyDefault
borderRadius5.0
keybaordTypenumber
keyboardActionnext

0.1.1 - 10/24/2018 #

  • Added
PropertyDefault
onSubmitFunction
fieldsCount4
isTextObscurefalse
fontSize40.0

0.0.1 - 10/24/2018 #

  • Initial release, working base functionality

example/README.md

example #

PinPut widget Example

Getting Started #

For help getting started with Flutter, view our online documentation.

Use this package as a library

1. Depend on it

Add this to your package's pubspec.yaml file:


dependencies:
  pinput: ^0.1.6

2. Install it

You can install packages from the command line:

with Flutter:


$ flutter packages get

Alternatively, your editor might support flutter packages get. Check the docs for your editor to learn more.

3. Import it

Now in your Dart code, you can use:


import 'package:pinput/pin_put/pin_put.dart';
import 'package:pinput/pin_put/pin_put_bloc.dart';
import 'package:pinput/pin_put/pin_put_state.dart';
  
Version Uploaded Documentation Archive
0.1.6 Jan 17, 2019 Go to the documentation of pinput 0.1.6 Download pinput 0.1.6 archive
0.1.5 Dec 17, 2018 Go to the documentation of pinput 0.1.5 Download pinput 0.1.5 archive
0.1.4 Oct 31, 2018 Go to the documentation of pinput 0.1.4 Download pinput 0.1.4 archive
0.1.3+1 Oct 26, 2018 Go to the documentation of pinput 0.1.3+1 Download pinput 0.1.3+1 archive
0.1.3 Oct 26, 2018 Go to the documentation of pinput 0.1.3 Download pinput 0.1.3 archive
0.1.2 Oct 25, 2018 Go to the documentation of pinput 0.1.2 Download pinput 0.1.2 archive
0.1.1 Oct 25, 2018 Go to the documentation of pinput 0.1.1 Download pinput 0.1.1 archive
0.0.1 Oct 24, 2018 Go to the documentation of pinput 0.0.1 Download pinput 0.0.1 archive
Popularity:
Describes how popular the package is relative to other packages. [more]
79
Health:
Code health derived from static analysis. [more]
100
Maintenance:
Reflects how tidy and up-to-date the package is. [more]
100
Overall:
Weighted score of the above. [more]
90
Learn more about scoring.

We analyzed this package on Apr 16, 2019, and provided a score, details, and suggestions below. Analysis was completed with status completed using:

  • Dart: 2.2.0
  • pana: 0.12.14
  • Flutter: 1.4.7

Platforms

Detected platforms: Flutter

References Flutter, and has no conflicting libraries.

Dependencies

Package Constraint Resolved Available
Direct dependencies
Dart SDK >=2.0.0-dev.28.0 <3.0.0
flutter 0.0.0
Transitive dependencies
collection 1.14.11
meta 1.1.6 1.1.7
sky_engine 0.0.99
typed_data 1.1.6
vector_math 2.0.8