Read OTP from SMS in flutter

In this comprehensive guide, we’ll explore the process of integrating incoming message reading capabilities into Flutter apps, we will look how to read OTP from sms and auto fill the OTP field. From sending sms in emulator to message retrieval and processing, we’ll cover all the essential steps to seamlessly implement this functionality.

Need for SMS Reading
Imagine a scenario where a user needs to verify their identity using a one-time password (OTP) sent via SMS. Traditionally, users would have to switch between their messaging app and the authentication screen, manually entering the OTP. This process is not only cumbersome but also prone to errors. By enabling Flutter apps to read incoming messages, developers can streamline such interactions, offering users a more intuitive and efficient experience.

Before we dive into the code, you can also check our Flutter app development company page.

Implementation

1. Firstly, create a new project and add dependency (sms_autofill) into pubspec.yaml file as

sms_autofill: ^2.3.1

1	sms_autofill: ^2.3.1

2. Create a basic User interface to show the OTP and submit button as below code

@override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: const Text('Read OTP SMS'),
      ),
      body: Padding(
        padding: const EdgeInsets.all(30.0),
        child: Column(
          crossAxisAlignment: CrossAxisAlignment.stretch,
          children: [
            const Text(
              "Verification Code",
              textAlign: TextAlign.center,
              style: TextStyle(
                  fontSize: 28.0,
                  color: Colors.black,
                  fontWeight: FontWeight.bold),
            ),
            const SizedBox(height: 60),
            const Text(
              "Please enter the OTP sent\non your registered Email ID.",
              textAlign: TextAlign.center,
              style: TextStyle(
                  fontSize: 18.0,
                  color: Colors.black,
                  fontWeight: FontWeight.w600),
            ),
            const SizedBox(height: 50),
            Center(
              child: PinFieldAutoFill(
                currentCode: otpCode,
                codeLength: 6,
                onCodeChanged: (code) {
                  print("on CodeChanged called $code");
                    otpCode = code.toString();
                },
                  decoration: BoxLooseDecoration(
                    strokeColorBuilder: PinListenColorBuilder(Colors.blue.shade300, Colors.black26),
                    bgColorBuilder: const FixedColorBuilder(Colors.white),
                    strokeWidth: 1,
                  )
              ),
            ),
            const SizedBox(height: 50),
            ElevatedButton(onPressed: (){}, child: const Text("Verify OTP"))
          ],
        ),
      ),
    );
  }

@override

Widget build(BuildContext context) {

return Scaffold(

appBar: AppBar(

title: const Text('Read OTP SMS'),

body: Padding(

padding: const EdgeInsets.all(30.0),

child: Column(

crossAxisAlignment: CrossAxisAlignment.stretch,

children: [

const Text(

"Verification Code",

textAlign: TextAlign.center,

style: TextStyle(

fontSize: 28.0,

color: Colors.black,

fontWeight: FontWeight.bold),

const SizedBox(height: 60),

const Text(

"Please enter the OTP sent\non your registered Email ID.",

textAlign: TextAlign.center,

style: TextStyle(

fontSize: 18.0,

color: Colors.black,

fontWeight: FontWeight.w600),

const SizedBox(height: 50),

Center(

child: PinFieldAutoFill(

currentCode: otpCode,

codeLength: 6,

onCodeChanged: (code) {

print("on CodeChanged called $code");

otpCode = code.toString();

decoration: BoxLooseDecoration(

strokeColorBuilder: PinListenColorBuilder(Colors.blue.shade300, Colors.black26),

bgColorBuilder: const FixedColorBuilder(Colors.white),

strokeWidth: 1,

)

const SizedBox(height: 50),

ElevatedButton(onPressed: (){}, child: const Text("Verify OTP"))

);

}

In above code we have created UI view with the help of :

Text widgets to show the message on screen
PinFieldAutoFill widget to show the OTP input fields and added some decoration in input fields.
Elevated button to show the verify code text and the implementation of this button is not defined yet, as we are not verifying the OTP.

format the textFormField input in Flutter

3. Create a method (listenOtp) to register a listener that listen for incoming sms and call from initState as :

 @override
  void initState() {
    super.initState();
    listenOtp();
  }

  void listenOtp() async {
    var appSignatureID = await SmsAutoFill().getAppSignature;
    await SmsAutoFill().listenForCode();
    print("appSignatureID -- $appSignatureID");
  }

@override

void initState() {

super.initState();

listenOtp();

}

void listenOtp() async {

var appSignatureID = await SmsAutoFill().getAppSignature;

await SmsAutoFill().listenForCode();

print("appSignatureID -- $appSignatureID");

}

listenOtp method initialize a listener that listen for incoming OTP :

getAppSignature : It will return your app signature in a String format, you have to add it at the end of your sms while sending sms to this device.

listenForCode : create and register a listener.

4. Unregister the listener in dispose method with (unregisterListener) :

 @override
  void dispose() {
    SmsAutoFill().unregisterListener();
    super.dispose();
  }

@override

void dispose() {

SmsAutoFill().unregisterListener();

super.dispose();

}

Complete code

Complete code for the implementation

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

class VerifyOTPScreen extends StatefulWidget {
  const VerifyOTPScreen({Key? key}) : super(key: key);

  @override
  State<VerifyOTPScreen> createState() => _VerifyOTPScreenState();
}

class _VerifyOTPScreenState extends State<VerifyOTPScreen> {
  String otpCode = "";

  @override
  void initState() {
    super.initState();
    listenOtp();
  }

  void listenOtp() async {
    var appSignatureID = await SmsAutoFill().getAppSignature;
    await SmsAutoFill().listenForCode();
    print("appSignatureID -- $appSignatureID");
  }

  @override
  void dispose() {
    SmsAutoFill().unregisterListener();
    super.dispose();
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: const Text('Read OTP SMS'),
      ),
      body: Padding(
        padding: const EdgeInsets.all(30.0),
        child: Column(
          crossAxisAlignment: CrossAxisAlignment.stretch,
          children: [
            const Text(
              "Verification Code",
              textAlign: TextAlign.center,
              style: TextStyle(
                  fontSize: 28.0,
                  color: Colors.black,
                  fontWeight: FontWeight.bold),
            ),
            const SizedBox(height: 60),
            const Text(
              "Please enter the OTP sent\non your registered Email ID.",
              textAlign: TextAlign.center,
              style: TextStyle(
                  fontSize: 18.0,
                  color: Colors.black,
                  fontWeight: FontWeight.w600),
            ),
            const SizedBox(height: 50),
            Center(
              child: PinFieldAutoFill(
                currentCode: otpCode,
                codeLength: 6,
                onCodeChanged: (code) {
                  print("on CodeChanged called $code");
                    otpCode = code.toString();
                },
                  decoration: BoxLooseDecoration(
                    strokeColorBuilder: PinListenColorBuilder(Colors.blue.shade300, Colors.black26),
                    bgColorBuilder: const FixedColorBuilder(Colors.white),
                    strokeWidth: 1,
                  )
              ),
            ),
            const SizedBox(height: 50),
            ElevatedButton(onPressed: (){}, child: const Text("Verify OTP"))
          ],
        ),
      ),
    );
  }
}

import 'package:flutter/material.dart';

import 'package:sms_autofill/sms_autofill.dart';

class VerifyOTPScreen extends StatefulWidget {

const VerifyOTPScreen({Key? key}) : super(key: key);

@override

State<VerifyOTPScreen> createState() => _VerifyOTPScreenState();

}

class _VerifyOTPScreenState extends State<VerifyOTPScreen> {

String otpCode = "";

@override

void initState() {

super.initState();

listenOtp();

}

void listenOtp() async {

var appSignatureID = await SmsAutoFill().getAppSignature;

await SmsAutoFill().listenForCode();

print("appSignatureID -- $appSignatureID");

}

@override

void dispose() {

SmsAutoFill().unregisterListener();

super.dispose();

}

@override

Widget build(BuildContext context) {

return Scaffold(

appBar: AppBar(

title: const Text('Read OTP SMS'),

body: Padding(

padding: const EdgeInsets.all(30.0),

child: Column(

crossAxisAlignment: CrossAxisAlignment.stretch,

children: [

const Text(

"Verification Code",

textAlign: TextAlign.center,

style: TextStyle(

fontSize: 28.0,

color: Colors.black,

fontWeight: FontWeight.bold),

const SizedBox(height: 60),

const Text(

"Please enter the OTP sent\non your registered Email ID.",

textAlign: TextAlign.center,

style: TextStyle(

fontSize: 18.0,

color: Colors.black,

fontWeight: FontWeight.w600),

const SizedBox(height: 50),

Center(

child: PinFieldAutoFill(

currentCode: otpCode,

codeLength: 6,

onCodeChanged: (code) {

print("on CodeChanged called $code");

otpCode = code.toString();

decoration: BoxLooseDecoration(

strokeColorBuilder: PinListenColorBuilder(Colors.blue.shade300, Colors.black26),

bgColorBuilder: const FixedColorBuilder(Colors.white),

strokeWidth: 1,

)

const SizedBox(height: 50),

ElevatedButton(onPressed: (){}, child: const Text("Verify OTP"))

);

}

Output of the example code

Read OTP From sms

For sending the OTP in emulator you can use the emulator control settings options, choose phone option from left menu and then write your message click on send message button as shown below :

Send sms in emulator

Conclusion

Thanks for reading this article ❤️

I hope this blog will help you to learn about how to read OTP from sms in Flutter and you will be able to implement it. For more updates, make sure to keep following Mobikul Blogs to learn more about mobile app development.

Happy Learning ✍️

Other blogs you may like…

Firebase phone OTP authentication

SMS retrieval API in android