app_otp 1.0.2

A simple OTP widget for flutter.

example/lib/main.dart

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

void main() {
  runApp(
    const MainApp(),
  );
}

class MainApp extends StatefulWidget {
  const MainApp({super.key});

  @override
  State<MainApp> createState() => _MainAppState();
}

class _MainAppState extends State<MainApp> {
  String? _otp;
  String? _otpCompleted;
  bool _enable = true;
  AppOTPTextFieldController? _controller;

  @override
  Widget build(BuildContext context) {
    return GestureDetector(
      onTap: () => FocusManager.instance.primaryFocus?.unfocus(),
      child: MaterialApp(
        home: Scaffold(
          appBar: AppBar(
            title: const Text('APP OTP example'),
          ),
          body: Center(
            child: Column(
              mainAxisSize: MainAxisSize.min,
              children: [
                Padding(
                  padding: const EdgeInsets.symmetric(
                    horizontal: 24,
                  ),
                  child: AppOTPTextField(
                    boxHeight: 48,
                    boxWidth: 40,
                    enabled: _enable,
                    onAppOTPTextFieldCreated: (controller) {
                      _controller = controller;
                    },
                    onCompleted: (otp) {
                      setState(() {
                        _otpCompleted = otp;
                      });
                    },
                    onChanged: (otp) {
                      setState(() {
                        _otp = otp;
                      });
                    },
                  ),
                ),
                const SizedBox(
                  height: 24,
                ),
                ElevatedButton(
                  onPressed: () {
                    _controller?.clear();
                  },
                  child: const Text('Clear'),
                ),
                ElevatedButton(
                  style: ElevatedButton.styleFrom(
                    backgroundColor: _enable ? Colors.red : Colors.blue,
                  ),
                  onPressed: () {
                    setState(() {
                      _enable = !_enable;
                    });
                  },
                  child: Text(_enable ? 'disable' : 'enable'),
                ),
                const SizedBox(
                  height: 24,
                ),
                Text('enable: $_enable'),
                _otpCompleted != null
                    ? Text(
                        'onCompleted: $_otpCompleted',
                      )
                    : const SizedBox(),
                _otp != null
                    ? Text(
                        'onChanged: $_otp',
                      )
                    : const SizedBox(),
              ],
            ),
          ),
        ),
      ),
    );
  }
}