otp_field_premium 0.0.6 copy "otp_field_premium: ^0.0.6" to clipboard
otp_field_premium: ^0.0.6 copied to clipboard

This Package is ideal for developers who want to create secure and elegant OTP input experiences.

example/main.dart

import 'package:flutter/material.dart';
import 'package:otp_field_premium/config/theme/theme.dart';
import 'package:otp_field_premium/core/util/mycolor.dart';
import 'package:otp_field_premium/otp_field_premium.dart';

void main() {
  runApp(const MyApp());
}

class MyApp extends StatelessWidget {
  const MyApp({super.key});
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Demo',
      theme: AppTheme.light(),
      debugShowCheckedModeBanner: false,
      home: Scaffold(
        body: SingleChildScrollView(
          child: Padding(
            padding: const EdgeInsets.symmetric(horizontal: 20),
            child: Column(
              mainAxisAlignment: MainAxisAlignment.center,
              crossAxisAlignment: CrossAxisAlignment.stretch,
              children: [
                Image.asset("assets/v_code.jpg"),
                Text(
                  'Get Your Code',
                  textAlign: TextAlign.center,
                  style: Theme.of(context)
                      .textTheme
                      .titleLarge!
                      .copyWith(fontWeight: FontWeight.bold),
                ),
                const SizedBox(height: 5),
                Text(
                  "Please enter the 4 digit code that send to your \nphone  \"01*********\"",
                  textAlign: TextAlign.center,
                  style: Theme.of(context)
                      .textTheme
                      .bodyMedium!
                      .copyWith(color: MyColor.textThird),
                ),
                const SizedBox(height: 25),
                OtpFieldPremium(
                  length: 4,
                  onSubmit: (val) => print(val),
                  focusBorderWidth: .7,
                  focusBorderColor: MyColor.skyPrimary,
                  focusFillColor: MyColor.cardBackgroundColor,
                  unFocusBorderWidth: .3,
                  unFocusBorderColor: MyColor.inActiveColor,
                  unFocusFillColor: MyColor.cardBackgroundColor,
                  errorBorderWidth: 1,
                  errorBorderColor: Colors.red,
                  errorFillColor: MyColor.cardBackgroundColor,
                  shadowElevation: 0,
                  shodowColor: Colors.transparent,
                  hideText: false,
                  otpFiledShape: OtpFiledShape.square,
                ),
                const Padding(
                  padding: EdgeInsets.symmetric(vertical: 10),
                  child: Row(
                    mainAxisAlignment: MainAxisAlignment.center,
                    children: [
                      Text("Didn't receive any code?  ",
                          style: TextStyle(color: MyColor.textThird)),
                      Text(
                        "Resend OTP",
                        style: TextStyle(
                            fontWeight: FontWeight.bold,
                            color: MyColor.skyPrimary),
                      ),
                    ],
                  ),
                ),
                const SizedBox(height: 20),
                ElevatedButton(
                  onPressed: () {},
                  child: const Text("Submit"),
                ),
              ],
            ),
          ),
        ),
      ),
    );
  }
}
4
likes
0
points
433
downloads

Publisher

unverified uploader

Weekly Downloads

This Package is ideal for developers who want to create secure and elegant OTP input experiences.

Repository (GitHub)
View/report issues

License

unknown (license)

Dependencies

cupertino_icons, flutter

More

Packages that depend on otp_field_premium