pin_view 0.0.1

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

PinView for Flutter #

PinView is a fully configurable package to create pin fields that can also easily be integrated with an SMS verification system.

Installation #

To install PinView, simply add the following to your dependencies in pubspec.yaml.

    dependencies:
        flutter:
            sdk: flutter
        ...
        pin_view: <latest_version>

Then run flutter packages get in your project folder from your command line or terminal.

Usage #

1. Normal Usage #

Below example creates a simple PinView.

import 'package:flutter/material.dart';
import 'package:pin_view/pin_view.dart';

class Example extends StatelessWidget {
	@override
	Widget build(BuildContext context) {
		return Scaffold (
			body: SafeArea (
				child: Container (
					padding: EdgeInsets.all(15.0),
					child: Column (
						children: <Widget> [
							Icon(Icons.sms, size:  100.0, color:  Theme.of(context).primaryColor),
							Container(margin:  EdgeInsets.symmetric(vertical:  5.0)),
							Text (
								"Simple PinView Example",
								style: TextStyle (
									fontSize: 25.0,
									fontWeight: FontWeight.bold,
									color: Theme.of(context).primaryColor
								)
							),
							Container(margin:  EdgeInsets.symmetric(vertical:  5.0)),
							PinView (
								count: 6, // describes the fields
								dashPositions: [2,4], // positions of dashes, you can add multiple
								autoFocusFirstField: false, // defaults to true,
								margin: EdgeInsets.all(2.5), // margin between the fields
								obscureText: true, // describes whether the text fields should be obscure or not, defaults to false,
								style: TextStyle (
									// style for the fields
									fontSize: 19.0,
									fontWeight: FontWeight.w500
								),
								dashStyle: TextStyle (
									// dash style
									fontSize: 25.0,
									color: Colors.grey
								),
								submit: (String pin) {
									// whenever all the fields are filled
									// submit function runs with the pin
									print(pin);
								}		
							)
						]
					)
				)
			)
		);
	}
}

2. Detecting and Processing SMS #

PinView can't listen to messages for iOS due to it's use of sms package which doesn't support iOS yet.

To use PinView with SMS detection, you first need to allow necessary READ_SMS and RECEIVE_SMS permissions for Android To accomplish this, add the following lines to your AndroidManifest.xml file.

<uses-permission android:name="android.permission.READ_SMS"/>
<uses-permission android:name="android.permission.RECEIVE_SMS"/>

After you add the following, you can try the example below.

  1. Create an SmsListener (which comes with the pin_view).
SmsListener smsListener = SmsListener (
	from: '6505551212', // address that the message will come from
	formatBody: (String body) {
		// incoming message type
		// from: "6505551212"
		// body: "Your verification code is: 123-456"
		// with this function, we format body to only contain
		// the pin itself
		
		String codeRaw = body.split(": ")[1];
		List<String> code = codeRaw.split("-");
		return code.join(); // 341430
	}
);
  1. Add your listener to the pinView's sms parameter.
Widget pinViewWithSms(BuildContext context) {
	return PinView (
		count: 6,
		dashPositions: [3],
		autoFocusFirstField: false,
		enabled: false, // this makes fields not focusable
		sms: smsListener // listener we created,
		submit: (String pin){
			// when the message comes, this function
			// will trigger
			showDialog (
				context: context,
				builder: (BuildContext context) {
					return AlertDialog (
						title: Text("Pin received successfully."),
						content: Text("Entered pin is: $pin")
					);
				}
			);
		}
	);
}
  1. Use it however you want.
import 'package:flutter/material.dart';
import 'package:pin_view/pin_view.dart';

class PinViewWithSmsExample extends StatelessWidget {

	final SmsListener smsListener = SmsListener (
		from: '6505551212', // address that the message will come from
		formatBody: (String body) {
			// in this example, the incoming message is
			// "Your verification code is: 341-430"
			// with this function, we format body to only contain
			// the pin itself
				
			String codeRaw = body.split(": ")[1];
			List<String> code = codeRaw.split("-");
			return code.join(); // 341430
		}
	);
	
	Widget pinViewWithSms(BuildContext context) {
		return PinView (
			count: 6,
			dashPositions: [3],
			autoFocusFirstField: false,
			enabled: false, // this makes fields not focusable
			sms: smsListener, // listener we created,
			submit: (String pin){
				// when the message comes, this function
				// will trigger
				showDialog (
					context: context,
					builder: (BuildContext context) {
						return AlertDialog (
							title: Text("Pin received successfully."),
							content: Text("Entered pin is: $pin")
						);
					}
				);
			}
		);
	}
	
	@override
	Widget build(BuildContext context) {
		return Scaffold (
			body: SafeArea (
				child: Container (
					padding: EdgeInsets.all(15.0),
					child: pinViewWithSms(context)
				)
			)
		);
	}
	
}

Example #

You can find a fully working example in examples/example.dart in the github repo.

Dependencies #

This package uses the sms package to be able to listen to the received messages for pin entries. Since the sms package only works on the Android now, PinView's sms option only works on Android too.

Contribute #

This is my first Flutter package, it currently seems bugless but feel free contribute by sending a fork request.

Author #

I am Fatih, a self taught developer. Feel free to contact me if you have any questions/suggestions.

Fatih Çakmak cakmakfatih@outlook.com.tr

example/example.dart

import 'package:flutter/material.dart';
import 'package:pin_view/pin_view.dart';

class Example extends StatelessWidget {

  @override
  Widget build(BuildContext context) {
    return Scaffold (
      resizeToAvoidBottomPadding: false,
      body: Container (
        padding: EdgeInsets.all(10.0),
        child: Column (
          mainAxisAlignment: MainAxisAlignment.spaceBetween,
          crossAxisAlignment: CrossAxisAlignment.stretch,
          children: <Widget>[
            Flexible (
              child: Column (
                children: <Widget>[
                  Container(margin: EdgeInsets.symmetric(vertical: 15.0)),
                  Icon(Icons.phonelink_ring, size: 100.0, color: Theme.of(context).primaryColor),
                  Container(margin: EdgeInsets.symmetric(vertical: 15.0)),
                  Container (
                    width: MediaQuery.of(context).size.width * 4/5,
                    child: Text (
                      "Waiting to automatically detect an SMS sent to your mobile number.",
                      textAlign: TextAlign.center,
                      style: TextStyle (
                        fontSize: 17.0,
                        fontWeight: FontWeight.w400,
                        color: Colors.teal
                      ),
                    ),
                  ),
                  Container (
                    padding: EdgeInsets.symmetric(horizontal: 15.0),
                    child: PinView (
                      count: 6, // count of the fields, excluding dashes
                      autoFocusFirstField: false,
                      dashPositions: [3], // describes the dash positions (not indexes)
                      sms: SmsListener (
                        // this class is used to receive, format and process and an sms
                        from: "6505551212",
                        formatBody: (String body){
                          // incoming message type
                          // from: "6505551212"
                          // body: "Your verification code is: 123-456"
                          // with this function, we format body to only contain
                          // the pin itself
                          String codeRaw = body.split(": ")[1];
                          List<String> code = codeRaw.split("-");
                          return code.join();
                        }
                      ),
                      submit: (String pin){
                        showDialog (
                          context: context,
                          builder: (BuildContext context) {
                            return AlertDialog (
                              title: Text("Pin received successfully."),
                              content: Text("Entered pin is: $pin")
                            );
                          }
                        );
                      } // gets triggered when all the fields are filled
                    ),
                  ),
                ],
              )
            )
          ],
        ),
      )
    );
  }

}

Use this package as a library

1. Depend on it

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


dependencies:
  pin_view: ^0.0.1

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:pin_view/pin_view.dart';
  
Version Uploaded Documentation Archive
1.0.1 Jan 15, 2019 Go to the documentation of pin_view 1.0.1 Download pin_view 1.0.1 archive
1.0.0 Jan 15, 2019 Go to the documentation of pin_view 1.0.0 Download pin_view 1.0.0 archive
0.8.0 Jan 1, 2019 Go to the documentation of pin_view 0.8.0 Download pin_view 0.8.0 archive
0.0.1 Jan 1, 2019 Go to the documentation of pin_view 0.0.1 Download pin_view 0.0.1 archive
Popularity:
Describes how popular the package is relative to other packages. [more]
84
Health:
Code health derived from static analysis. [more]
100
Maintenance:
Reflects how tidy and up-to-date the package is. [more]
90
Overall:
Weighted score of the above. [more]
90
Learn more about scoring.

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

  • Dart: 2.3.0
  • pana: 0.12.15
  • Flutter: 1.5.8

Platforms

Detected platforms: Flutter

References Flutter, and has no conflicting libraries.

Health suggestions

Format lib/pin_view.dart.

Run flutter format to format lib/pin_view.dart.

Maintenance suggestions

Package is pre-v0.1 release. (-10 points)

While nothing is inherently wrong with versions of 0.0.*, it might mean that the author is still experimenting with the general direction of the API.

Dependencies

Package Constraint Resolved Available
Direct dependencies
Dart SDK >=2.0.0-dev.68.0 <3.0.0
flutter 0.0.0
sms ^0.2.4 0.2.4
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
Dev dependencies
flutter_test