import 'package:flutter/material.dart';
import 'package:flutter_otp_text_field/flutter_otp_text_field.dart';
import 'package:openclosenew/colors.dart';
import 'package:openclosenew/fontsize.dart';
import 'package:openclosenew/thankyou.dart';

import 'FontFamily.dart';

class verification extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      backgroundColor: Colors.white,
      body: SafeArea(
        child: Padding(
          padding: EdgeInsets.only(left: 24, right: 24, bottom: 24),
          child: Column(
            crossAxisAlignment: CrossAxisAlignment.start,
            mainAxisAlignment: MainAxisAlignment.center,
            children: [
              Spacer(),
              Padding(
                padding: const EdgeInsets.only(bottom: 30),
                child: IconButton(
                  icon: Icon(Icons.arrow_back_ios, size: 24),
                  onPressed: () {
                    Navigator.pop(context);
                  },
                ),
              ),
              Spacer(),
              Text(
                'Verification',
                style: TextStyle(
                  fontFamily: Font,
                  fontSize: TitleText,
                  color: primaryColor,
                ),
              ),
              Spacer(),
              Text(
                'Enter Verification code',
                style: TextStyle(
                  fontFamily: Font,
                  fontSize: SubText,
                ),
              ),
              Row(
                children: [
                  Padding(
                    padding: const EdgeInsets.only(top: 15),
                    child: OtpTextField(
                      numberOfFields: 5,
                      borderColor: DarkGray,
                    ),
                  ),
                ],
              ),
              Padding(
                padding: const EdgeInsets.only(top: 20),
                child: RichText(
                  textAlign: TextAlign.center,
                  text: TextSpan(
                    children: [
                      TextSpan(
                        text: 'Didn’t receive code? ',
                        style: TextStyle(
                          fontFamily: Font,
                          fontSize: SubText,
                          color: DarkGray,
                        ),
                      ),
                      TextSpan(
                        text: ' Resend OTP ',
                        style: TextStyle(
                          color: primaryColor,
                          decoration: TextDecoration.underline,
                        ),
                      ),
                    ],
                  ),
                ),
              ),
              Spacer(),
              Text(
                'By clicking “Verify” you are accepting our Terms & Conditions',
                style: TextStyle(
                  fontSize: SubText,
                  fontFamily: Font,
                ),
              ),
              SizedBox(height: 20),
              MaterialButton(
                height: 50,
                minWidth: double.infinity,
                color: primaryColor,
                shape: RoundedRectangleBorder(
                    borderRadius: BorderRadius.circular(4)),
                onPressed: () {
                  Navigator.push(
                      context, MaterialPageRoute(builder: (_) => thankyou()));
                },
                child: Text(
                  'Verify',
                  style: TextStyle(
                    color: White,
                    fontSize: HeadText,
                    fontFamily: Font,
                  ),
                ),
              ),
            ],
          ),
        ),
      ),
    );
  }
}