otp_verification_flutter 0.1.2

otp_verification_flutter: ^0.1.2 copied to clipboard

example/lib/main.dart

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

void main() => runApp(const ExampleApp());

class ExampleApp extends StatelessWidget {
  const ExampleApp({super.key});

  @override
  Widget build(BuildContext context) {
    return const MaterialApp(
      debugShowCheckedModeBanner: false,
      home: OtpDemoScreen(),
    );
  }
}

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

  @override
  State<OtpDemoScreen> createState() => _OtpDemoScreenState();
}

class _OtpDemoScreenState extends State<OtpDemoScreen> {
  // Longueur configurable par le développeur — ici 4, comme dans le design
  // de référence.
  late final controller = OtpController(length: 4);

  Future<void> _simulateVerification(String code) async {
    controller.setState(OtpVerificationState.verifying);
    await Future.delayed(const Duration(seconds: 1));

    // Exemple : "1234" est le code accepté, comme dans le design de référence.
    if (code == '1234') {
      controller.setState(OtpVerificationState.success);
    } else {
      controller.setState(OtpVerificationState.error);
    }
  }

  @override
  void dispose() {
    controller.dispose();
    super.dispose();
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      backgroundColor: const Color(0xFF0B0F1A),
      body: Center(
        child: OtpVerificationWidget(
          controller: controller,
          theme: OtpFieldTheme.darkGlow,
          subtitleBuilder: (context) => const Text(
            'We texted a 4-digit code to +1 415 •••0142.',
            style: TextStyle(color: Colors.white60),
          ),
          onCompleted: _simulateVerification,
          onResend: () {
            controller.reset();
          },
          onContinue: () {
            // Navigation post-vérification.
            showDialog(
              context: context,
              builder: (context) => AlertDialog(
                title: const Text('Vérification réussie'),
                content: const Text('Code correct !'),
                actions: [
                  TextButton(
                    onPressed: () => Navigator.of(context).pop(),
                    child: const Text('OK'),
                  ),
                ],
              ),
            );
          },
        ),
      ),
    );
  }
}