Trending Articles       10 Flutter Listview Examples       Flutter Custom Button Example       Flutter Audio Recording       Flutter 2.0 Autocomplete TextField       Current Location Google Maps

Auto SMS OTP Read in Flutter Android

Hello Guys, in this post we will cover how to read SMS OTP automatically. In Every mobile application there is mobile number verification feature will be available. To Verify the Mobile Numbers by sending the SMS OTP to registered mobile numbers.

When user receives the OTP he has to copy and paste the code will get irritate by users. To avoid this apps will try to read received SMS OTP and fill the TestFields automatically. To do auto read SMS OTP we have a library plugin called sms_autofill.

 

This library will handle read the received sms and fill the TestFields  with received OTP.

 

Let's get started

Step 1: Create a flutter application

Step 2: add required dependencies in pubspec.yaml file

Step 3: import packages in the dart file

 

Add widget to the UI

PinFieldAutoFill(
  decoration: UnderlineDecoration(
    textStyle: TextStyle(fontSize: 20, color: Colors.black),
    colorBuilder: FixedColorBuilder(Colors.black.withOpacity(0.3)),
  ),
 codeLength: 4,
  onCodeSubmitted: (code) {},
  onCodeChanged: (code) {
    if (code.length == 6) {
      FocusScope.of(context).requestFocus(FocusNode());
    }
  },
)

 

This widget will fill the received OTP.

 

Listen OTP Events

To listen the SMS events we need to call SMS Listener on initState() method

_listOPT()
async {
  await SmsAutoFill().listenForCode;
}

 

To read any SMS in Android it should follow the some basic requirements for the SMS format

it should follow the below format

<#> SampleApp: Your verification code is 1435
Z66b5+ou+DI

 

here Z66b5+ou+DI SMS gateway Providers code.

In this Example we are going to create an SMS Provider server by adding the below code

final signature=await SmsAutoFill().getAppSignature;
print(signature);

 

This will generate Gateway Provider name.

To test the application run the application and send SMS in the above format.

 

AUTO FILL OTP FLUTTER ANDROID

 

 

Complete code

import 'package:flutter/material.dart';
import 'package:sms_autofill/sms_autofill.dart';
import 'package:pin_input_text_field/pin_input_text_field.dart';
class Registration extends StatelessWidget{
  @override
  Widget build(BuildContext context) {

    return Scaffold(
      appBar: AppBar(title: Text("Auto SMS Read"),
        backgroundColor: Colors.purple,),
      body: Center(
        child: Container(
          child: RaisedButton(
            onPressed: () async {
              final signature=await SmsAutoFill().getAppSignature;
              print(signature);
              Navigator.push(context, MaterialPageRoute(builder: (context){

                return OTP();
              }));
            },
            color: Colors.purple,
            child: Text("Registration/Login",  style: TextStyle(fontSize: 20, color: Colors.white)),

          ),
        ),
      ),
    );
  }

}

class OTP extends StatefulWidget {
  @override
  _OTPState createState() => _OTPState();
}

class _OTPState extends State<OTP> {
  @override
  void initState() {
    // TODO: implement initState
    super.initState();
    _listOPT();
  }
  @override
  Widget build(BuildContext context) {

    return Scaffold(
      appBar: AppBar(title: Text("Auto SMS Read"),
        backgroundColor: Colors.purple,),
      body: Center(
        child: Padding(
          padding: const EdgeInsets.all(8.0),
          child: Column(
            mainAxisAlignment: MainAxisAlignment.center,
            children: [
              Text("Enter PIN"),
              Container(
                child:  PinFieldAutoFill(
                  decoration: UnderlineDecoration(
                    textStyle: TextStyle(fontSize: 20, color: Colors.black),
                    colorBuilder: FixedColorBuilder(Colors.black.withOpacity(0.3)),
                  ),
                 codeLength: 4,
                  onCodeSubmitted: (code) {},
                  onCodeChanged: (code) {
                    if (code.length == 6) {
                      FocusScope.of(context).requestFocus(FocusNode());
                    }
                  },
                ),
              )
            ],
          ),
        ),
      ),
    );
  }

  _listOPT()
  async {
    await SmsAutoFill().listenForCode;
  }
}

 

Flutter Read Inbox Message Example

 


3068 Views

Author: RRTutors

Flutter Questions

Android Questions