FLUTTER — SKNumberPad

Hi Again! I am very excited about writing another blog about Flutter. Previously I have written a blog about the ON Boarding screen(You could check out the post here).

I want to share my experience and knowledge with those who would listen. It’s hard enough for a developer to create a solution to a particular problem, but to come up with a solution from scratch is really frustrating and also Long.

This is the first version of the library. I am open to comments, feedback and also feature requests. Kindly mention them in the comments below or at the issue tracker

Why SKNumberPad?

So to make the life of any developer easy, I am writing about my second library SKNumberPad. The first-ever custom number pad library in Flutter. During my recent days, I had to work on a screen similar to the OTP Verification and the time given to finish the project is very limited. I have looked for a similar library everywhere and was not able to find any in Flutter.

I had to come up with a solution myself and I struggled because of the time constraint. I had to work during odd hours to complete this and I am writing this so that the next developer will find it easy and not struggle as I did.

Below I have explained how to use this library in your application.

How to use SKNumberPad?

SKNumberPad is a fast and easy to use custom number pad library for a flutter.

Nowadays we often find ourselves in a situation where we will have to validate the user one way or the other using the OTP, Email verification, etc. This library is the solution.

Note: The sample and the library can be found in the link below. The library supports the following Android, iOS and also web.

Add the dependency to your pubspec.yaml file. You can get the latest version from https://pub.dev/packages/sk_numberpad

dependencies:
 sk_numberpad: ^1.0.0

1. Include the following packages by adding the below lines in your code

import 'package:sk_numberpad/sk_numberpad.dart';

2. For using the SKNumberpad, follow the steps mentioned below. Use the SKNumberPad for passing the values.

For now, I have added the following fields below in the model class and the next version, I will be working on providing various options.

• bgColor — the color of the number pad
• textColor — the color of the text in the number pad
• selectedNo — the number which pressed in the number pad
• doneSelected — the button which pressed in the number pad

We are almost at the end!!

3. Next, pass the created list of model class into the SKNumberPad widget. I have added the code snippet below.

@override
Widget build(BuildContext context) {
  // TODO: implement build
  return Scaffold(
    body:SkNumberPad(
      bgColor: ColorsUtils.orange,
      textColor: Colors.white,
      selectedNo: (value) {
        print(value);
      },
      doneSelected: (value) {
        print('Done Selected');
      },
    )
  );
}

In the near future, I’m going to customize the library by adding more fields so that we could have a lot of control over the library.

Next :

The library is in the initial stage all feedbacks are really appreciated. I would like to write more libraries as I face the hurdles as the project evolves.

If you want to contribute to my library feel free to do so.

Check it out the library sk_numberpad on pub.dev and github.com.

Thank you for reading, if you enjoyed the article make sure to show me some love by hitting that clap (👏) button!

You can also follow me on Twitter for quick updates or LinkedIn or stalk me on Github. Also, don’t forget to check out my Website.

Happy coding…