Giter VIP home page Giter VIP logo

pin_view's Introduction

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 field number
								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) {
									// when 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 provide the necessary permissions, 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(); // 123456
	}
);
  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) {
			// 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
		}
	);
	
	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 to contribute by sending a pull request.

Author

Feel free to contact me if you have any questions/suggestions.

Fatih Çakmak [email protected]

pin_view's People

Contributors

cakmakfatih avatar gokhanoom avatar

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. 📊📈🎉

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❤️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.