watermanagement-book-a-tanker/lib/otp.dart

import 'package:bookatanker/signup.dart';
import 'package:flutter/material.dart';
import 'common/settings.dart';
import 'createpassword.dart';


class OtpScreen extends StatefulWidget {
  final String mobileNumber;

  const OtpScreen({
    Key? key,
    required this.mobileNumber,
  }) : super(key: key);

  @override
  State<OtpScreen> createState() => _OtpScreenState();
}

class _OtpScreenState extends State<OtpScreen> {

  final List<TextEditingController> _controllers =
  List.generate(6, (_) => TextEditingController());

  @override
  void dispose() {
    for (var controller in _controllers) {
      controller.dispose();
    }
    super.dispose();
  }

  String maskMobileNumber(String number) {
    if (number.length < 3) return number;
    final stars = '*' * (number.length - 3);
    final lastThree = number.substring(number.length - 3);
    return '$stars$lastThree';
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      backgroundColor: Colors.white,

      body: SafeArea(
        child: Padding(
          padding: const EdgeInsets.all(24.0),

          child: Column(
            crossAxisAlignment: CrossAxisAlignment.center,
            children: [

              const SizedBox(height: 100),

              /// Title
              Text(
                "Enter Confirmation Code",
                style: fontTextStyle(
                    16,
                    const Color(0xFF101214),
                    FontWeight.w600),
              ),

              const SizedBox(height: 8),

              /// Mobile Text
              Text(
                'A 6-digit code was sent to\n+91 ${maskMobileNumber(widget.mobileNumber)}',
                textAlign: TextAlign.center,
                style: fontTextStyle(
                    12,
                    const Color(0xFF7E7F80),
                    FontWeight.w400),
              ),

              const SizedBox(height: 30),

              /// OTP Boxes
              Row(
                mainAxisAlignment:
                MainAxisAlignment.spaceEvenly,
                children: List.generate(
                  6,
                      (index) => SizedBox(
                    width: 45,

                    child: TextField(
                      controller:
                      _controllers[index],

                      textAlign: TextAlign.center,

                      keyboardType:
                      TextInputType.number,

                      maxLength: 1,

                      style: fontTextStyle(
                          14,
                          const Color(0xFF2A2A2A),
                          FontWeight.w400),

                      decoration:
                      InputDecoration(
                        counterText: "",

                        border:
                        OutlineInputBorder(
                          borderRadius:
                          BorderRadius.circular(
                              8),
                        ),
                      ),

                      onChanged: (value) {

                        if (value.isNotEmpty &&
                            index < 5) {

                          FocusScope.of(context)
                              .nextFocus();

                        }

                        else if (value.isEmpty &&
                            index > 0) {

                          FocusScope.of(context)
                              .previousFocus();

                        }
                      },
                    ),
                  ),
                ),
              ),

              const SizedBox(height: 40),

              /// Resend Code
              TextButton(
                onPressed: () {

                  Navigator.push(
                    context,
                    MaterialPageRoute(
                      builder: (_) =>
                      const CreatePasswordScreen(),
                    ),
                  );

                },

                child: Text(
                  "Resend Code",

                  style: fontTextStyle(
                      14,
                      const Color(0XFF1D7AFC),
                      FontWeight.w600),
                ),
              ),

              const SizedBox(height: 20),

              /// Continue Button
              SizedBox(
                width: double.infinity,

                child: ElevatedButton(
                  onPressed: () {

                    final otp =
                    _controllers
                        .map((c) => c.text)
                        .join();

                    if (otp.length == 6) {

                      Navigator.pushReplacement(
                        context,

                        MaterialPageRoute(
                          builder: (_) =>
                          const SignUpScreen(),
                        ),
                      );

                    }

                    else {

                      ScaffoldMessenger.of(
                          context)
                          .showSnackBar(
                        const SnackBar(
                          content: Text(
                              "Please enter 6 digit OTP"),
                        ),
                      );
                    }
                  },

                  style: ElevatedButton
                      .styleFrom(
                    backgroundColor:
                    const Color(
                        0XFF1D7AFC),

                    padding:
                    const EdgeInsets
                        .symmetric(
                        vertical: 16),

                    shape:
                    RoundedRectangleBorder(
                      borderRadius:
                      BorderRadius.circular(
                          30),
                    ),
                  ),

                  child: Text(
                    "Continue",

                    style: fontTextStyle(
                        14,
                        Colors.white,
                        FontWeight.w600),
                  ),
                ),
              ),
            ],
          ),
        ),
      ),
    );
  }
}