dynamic_pin_keyboard 0.0.4

This is a flutter package that gives you a custom and reusable keyboard experience for one time password widgets, transaction pin widgets and simple login widgets.

example/lib/main.dart

import 'package:dynamic_pin_keyboard/dynamic_pin_keyboard.dart';
import 'package:example/core/app_assets.dart';
import 'package:example/core/app_colors.dart';
import 'package:flutter/gestures.dart';
import 'package:flutter/material.dart';
import 'package:flutter_svg/svg.dart';
import 'package:pin_code_fields/pin_code_fields.dart';

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

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

  // This widget is the root of your application.
  @override
  Widget build(BuildContext context) {
    return const MaterialApp(
      title: 'Flutter Demo',
      home: MyHomePage(),
    );
  }
}

class MyHomePage extends StatefulWidget {
  const MyHomePage({
    super.key,
  });
  // how it looks.

  @override
  State<MyHomePage> createState() => _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> {
  final _pinCodeController = TextEditingController();
  final int pinLength = 6;

  @override
  Widget build(BuildContext context) {
    return Scaffold(
        backgroundColor: AppColors.white,
        body: SafeArea(
          child: Column(
            children: [
              Expanded(
                child: Column(
                  children: [
                    const SizedBox(
                      height: 40,
                    ),
                    SvgPicture.asset(
                      AppAssets.newPasswordLock,
                      height: 70,
                      width: 70,
                    ),
                    const SizedBox(
                      height: 32,
                    ),
                    const Text(
                      'Welcome Back',
                      textAlign: TextAlign.center,
                      style: TextStyle(
                          fontSize: 20,
                          color: AppColors.black4,
                          fontWeight: FontWeight.w600),
                    ),
                    const SizedBox(
                      height: 30,
                    ),
                    const Text(
                      'Jackson Don',
                      style: TextStyle(
                        fontWeight: FontWeight.w500,
                        fontSize: 16,
                        color: AppColors.black4,
                      ),
                    ),
                    const SizedBox(
                      height: 24,
                    ),
                    SizedBox(
                      width: MediaQuery.of(context).size.width * 0.7,
                      child: PinCodeTextField(
                        length: 6,
                        keyboardType: TextInputType.none,
                        appContext: context,
                        autoDisposeControllers: false,
                        obscureText: true,
                        animationType: AnimationType.none,
                        showCursor: false,
                        readOnly: true,
                        textStyle: const TextStyle(
                          fontSize: 20,
                          color: AppColors.primaryColor,
                          fontWeight: FontWeight.w500,
                        ),
                        controller: _pinCodeController,
                        pastedTextStyle: const TextStyle(
                          fontSize: 40,
                          color: AppColors.primaryColor,
                        ),
                        enableActiveFill: true,
                        pinTheme: PinTheme(
                          fieldWidth: 40,
                          shape: PinCodeFieldShape.circle,
                          inactiveBorderWidth: 10,
                          inactiveColor: AppColors.white,
                          inactiveFillColor: AppColors.deactivatedColor,
                          activeFillColor: AppColors.white,
                          activeColor: AppColors.white,
                          selectedColor: AppColors.white,
                          selectedFillColor: AppColors.white,
                        ),
                        onChanged: (String value) async {
                          if (_pinCodeController.text.length == 6) {}
                        },
                      ),
                    ),
                    const Padding(
                      padding: EdgeInsets.all(12),
                      child: Text(
                        'Enter your Account unlock code',
                        textAlign: TextAlign.center,
                        style: TextStyle(
                          fontWeight: FontWeight.w500,
                          fontSize: 16,
                          color: AppColors.black4,
                        ),
                      ),
                    ),
                    const SizedBox(
                      height: 36,
                    ),
                    Container(
                      decoration: const BoxDecoration(
                        color: Colors.white,
                        borderRadius: BorderRadius.only(
                          topLeft: Radius.circular(8),
                          topRight: Radius.circular(8),
                        ),
                      ),
                      width: double.infinity,
                      child: Padding(
                        padding: const EdgeInsets.symmetric(
                          horizontal: 40,
                        ),
                        child: DynamicPinKeyboard(
                          biometric: true,
                          biometricIcon: SvgPicture.asset(
                            AppAssets.fingerPrint,
                            // ignore: deprecated_member_use
                            color: AppColors.primaryColor,
                            height: 52,
                            width: 52,
                          ),
                          numberOne: (p0) {
                            if (_pinCodeController.text.length < pinLength) {
                              setState(() {
                                _pinCodeController.text =
                                    _pinCodeController.text + p0;
                              });
                            }
                          },
                          numberTwo: (p0) {
                            if (_pinCodeController.text.length < pinLength) {
                              setState(() {
                                _pinCodeController.text =
                                    _pinCodeController.text + p0;
                              });
                            }
                          },
                          numberThree: (p0) {
                            if (_pinCodeController.text.length < pinLength) {
                              setState(() {
                                _pinCodeController.text =
                                    _pinCodeController.text + p0;
                              });
                            }
                          },
                          numberFour: (p0) {
                            if (_pinCodeController.text.length < pinLength) {
                              setState(() {
                                _pinCodeController.text =
                                    _pinCodeController.text + p0;
                              });
                            }
                          },
                          numberFive: (p0) {
                            if (_pinCodeController.text.length < pinLength) {
                              setState(() {
                                _pinCodeController.text =
                                    _pinCodeController.text + p0;
                              });
                            }
                          },
                          numberSix: (p0) {
                            if (_pinCodeController.text.length < pinLength) {
                              setState(() {
                                _pinCodeController.text =
                                    _pinCodeController.text + p0;
                              });
                            }
                          },
                          numberSeven: (p0) {
                            if (_pinCodeController.text.length < pinLength) {
                              setState(() {
                                _pinCodeController.text =
                                    _pinCodeController.text + p0;
                              });
                            }
                          },
                          numberEight: (p0) {
                            if (_pinCodeController.text.length < pinLength) {
                              setState(() {
                                _pinCodeController.text =
                                    _pinCodeController.text + p0;
                              });
                            }
                          },
                          numberNine: (p0) {
                            if (_pinCodeController.text.length < pinLength) {
                              setState(() {
                                _pinCodeController.text =
                                    _pinCodeController.text + p0;
                              });
                            }
                          },
                          numberZero: (p0) {
                            if (_pinCodeController.text.length < pinLength) {
                              setState(() {
                                _pinCodeController.text =
                                    _pinCodeController.text + p0;
                              });
                            }
                          },
                          removePin: () {
                            if (_pinCodeController.text.isNotEmpty) {
                              setState(() {
                                _pinCodeController.text =
                                    _pinCodeController.text.substring(
                                  0,
                                  _pinCodeController.text.length - 1,
                                );
                              });
                            }
                          },
                        ),
                      ),
                    ),
                    const SizedBox(
                      height: 50,
                    ),
                  ],
                ),
              ),
              Align(
                alignment: Alignment.bottomCenter,
                child: Center(
                  child: Padding(
                    padding: const EdgeInsets.only(bottom: 40),
                    child: Container(
                      decoration: BoxDecoration(
                        borderRadius: BorderRadius.circular(
                          24,
                        ),
                      ),
                      padding: const EdgeInsets.symmetric(
                          horizontal: 16, vertical: 4),
                      child: RichText(
                        text: TextSpan(
                          children: [
                            const TextSpan(
                              text: "Not ${'Jackson Don'}? ",
                              style: TextStyle(
                                fontSize: 15,
                                color: AppColors.black4,
                                fontWeight: FontWeight.w400,
                              ),
                            ),
                            TextSpan(
                              text: 'Sign In',
                              recognizer: TapGestureRecognizer()..onTap = () {},
                              style: const TextStyle(
                                fontSize: 16,
                                color: AppColors.primaryColor,
                                fontWeight: FontWeight.w400,
                              ),
                            ),
                          ],
                        ),
                      ),
                    ),
                  ),
                ),
              ),
            ],
          ),
        ));
  }
}