A flutter package to add screens with custom keyboards and pins.

Overview

๐Ÿ” custom pin screen

codecov CI license PRs Welcome GitHub contributors GitHub last commit

A flutter package to add screens with custom keyboards and pins to your mobile application.

๐ŸŽ– Installing

dependencies:
  custom_pin_screen: "^0.3.0"

โšก๏ธ Import

import 'package:custom_pin_screen/custom_pin_screen.dart';

๐ŸŽฎ How To Use

Dart Usage

  • Pin Auth
onPressed: (){
    Navigator.push(
                  context,
                  MaterialPageRoute(
                    builder: (context) => PinAuthentication(
                      onChanged: (v) {
                        if (kDebugMode) {
                          print(v);
                        }
                      },
                      onSpecialKeyTap: () {},
                      specialKey: const SizedBox(),
                      useFingerprint: true,
                      onbuttonClick: () {},
                      submitLabel: const Text(
                        'Submit',
                        style: TextStyle(color: Colors.white, fontSize: 20),
                      ),
                    ),
                  ),
                );
    },
  • Custom Keyboard
Column(
        children: [
          const Padding(
            padding: EdgeInsets.symmetric(
              horizontal: 35.0,
              vertical: 35.0,
            ),
            child: Text(
              "How much do you want to fund your wallet with",
              textAlign: TextAlign.center,
              style: TextStyle(
                color: Colors.blue,
                fontWeight: FontWeight.w700,
                fontSize: 18,
              ),
            ),
          ),
          Expanded(
              child: CustomAppKeyBoard(
            onChanged: (v) {
              if (kDebugMode) {
                print(v);
              }
            },
            onbuttonClick: () {
              if (kDebugMode) {
                print('clicked');
              }
            },
            maxLength: 4,
            submitLabel: const Text(
              'Proceed',
              style: TextStyle(
                color: Colors.white,
                fontWeight: FontWeight.w700,
                fontSize: 18,
              ),
            ),
            // ),
          ))
        ],
      )

For more info, please, refer to the main.dart in the example.

๐Ÿ“ธ ScreenShots

๐Ÿ› Bugs/Requests

If you encounter any problems feel free to open an issue. If you feel the library is missing a feature, please raise a ticket on Github and I'll look into it. Pull request are also welcome.

โ—๏ธ Note

This project is a starting point for a Flutter plug-in package, a specialized package that includes platform-specific implementation code for Android and/or iOS.

For help getting started with Flutter, view our online documentation, which offers tutorials, samples, guidance on mobile development, and a full API reference.

๐Ÿค“ Developer(s)

Abada Samuel Oghenero

โญ๏ธ License

MIT LICENSE

You might also like...

FT-Custom-Widget - A Custom Widget Built With Flutter

FT-Custom-Widget - A Custom Widget Built With Flutter

Custom Widget Watch it on YouTube Product Screen Sample when you implement compl

Mar 29, 2022

This is the UI of Furniture App made using Flutter SDK. The original design was made by someone else in dribble and I tried to create the screens of that UI using Flutter

This is the UI of Furniture App made using Flutter SDK. The original design was made by someone else in dribble and I tried to create the screens of that UI using Flutter

Furniture App - Responsive Flutter UI Watch it on YouTube Responsive UI Fetch Data From API Custom Loading Indicator Packages we are using: flutter_sv

Dec 3, 2022

App that simulates a flow of screens for the course of navigation and routes with nuvigator through Flutter

App that simulates a flow of screens for the course of navigation and routes with nuvigator through Flutter

Rotas app App que simula um fluxo de telas para o curso de navegaรงรฃo e rotas com

Dec 19, 2021

Show a draggable floating chat icon button and show messages on screens

Show a draggable floating chat icon button and show messages on screens

Show a draggable floating chat icon button and show messages on screens Features A widget for displaying a chat icon (or custom widget) on top of a ba

May 5, 2022

Flutter-Onboarding-UI-Concept - A Flutter conceptual design for on boarding screens for mobile apps

Flutter-Onboarding-UI-Concept - A Flutter conceptual design for on boarding screens for mobile apps

flutter_onboarding_ui_concept A conceptual design for on boarding screens for mobile apps. This app provides you with all the information you need to

Dec 25, 2022

Animated video call screens for flutter

Animated video call screens Animations: click on your video to zoom click on right bottom arrow up to open more options double click at the coming cal

Sep 4, 2022

A Flutter app to showcase different types of Splash Screens

A Flutter app to showcase different types of Splash Screens

Flutter Splash Demo A Flutter applicaiton to showcase how to make different types of Splash Screens. In this demo we have used Video Player plugin, th

Dec 29, 2022

Adds a side menu in all screens with debug information

Adds a side menu in all screens with debug information

Adds a side menu in all screens with debug information. You can decide which information to show and create new modules to include more information.

Oct 7, 2022

OnBoarding Animation provides page like animation to the onBoarding screens with the page indicator

OnBoarding Animation OnBoarding Animation provides page like animation to the onBoarding screens with the page indicator. Screenshots and Screen recor

Oct 12, 2022
Comments
  • Package is not easy to customize

    Package is not easy to customize

    Apart from the main color attached to the package, it's not easy to customize.

    • The pin field has a border color of blue and can't also be changed.
    • The pin field is set as box shape and cant be changed.
    improvement 
    opened by Mastersam07 1
  • [ImgBot] Optimize images

    [ImgBot] Optimize images

    Beep boop. Your images are optimized!

    Your image file size has been reduced by 59% ๐ŸŽ‰

    Details

    | File | Before | After | Percent reduction | |:--|:--|:--|:--| | /assets/1.png | 139.93kb | 55.59kb | 60.27% | | /assets/2.png | 138.94kb | 59.27kb | 57.34% | | | | | | | Total : | 278.87kb | 114.86kb | 58.81% |


    ๐Ÿ“ docs | :octocat: repo | ๐Ÿ™‹๐Ÿพ issues | ๐Ÿช marketplace

    ~Imgbot - Part of Optimole family

    opened by imgbot[bot] 1
Owner
Samuel Abada
๐Ÿš€Cooking something hooge
Samuel Abada
The definitive landscape virtual keyboard for flutter projects that can't support regular virtual keyboards

VK Flutter Virtual Keyboard The definitive landscape virtual keyboard for flutte

Mohammad Taha Bin Firoz 13 Dec 13, 2022
Flutter Image add drag sort, Image add drag sort, support click event, delete, add, long press drag sort.

flutter_image_add_drag_sort Flutter Image add drag sort, Image add drag sort, support click event, delete, add, long press drag sort, support video fi

null 5 Jun 23, 2020
Arisonboardingscreen - Create your custom and beautiful onboarding screens easily with Flutter

Flutter Tutorial - Onboarding UI Screen Create your custom and beautiful onboard

Behruz Hurramov 5 Oct 30, 2022
Custom dropdown widget allows to add highly customizable widget in your projects with proper open and close animations and also comes with form required validation.

Custom Dropdown Custom Dropdown package lets you add customizable animated dropdown widget. Features Lots of properties to use and customize dropdown

Abdullah Chauhan 22 Dec 29, 2022
Flutter package that provides you custom clippers to help you achieve various custom shapes.

flutter_custom_clippers Flutter package that provides you custom clippers to help you achieve various custom shapes. Usage To use this plugin, add flu

Damodar Lohani 291 Dec 23, 2022
A customizable carousel slider for Flutter. Supports infinite sliding, custom indicators, and custom animations with many pre-built indicators and animations.

Flutter Carousel Slider A customizable carousel slider for flutter Screenshots Installing dependencies: flutter_carousel_slider: ^1.0.8 Demo Demo a

Udara Wanasinghe 23 Nov 6, 2022
A customizable carousel slider widget in Flutter which supports inifinte scrolling, auto scrolling, custom child widget, custom animations and built-in indicators.

flutter_carousel_widget A customizable carousel slider widget in Flutter. Features Infinite Scroll Custom Child Widget Auto Play Horizontal and Vertic

NIKHIL RAJPUT 7 Nov 26, 2022
Flutter custom carousel slider - A carousel slider widget,support custom decoration suitable for news and blog

flutter_custom_carousel_slider A carousel slider Flutter widget, supports custom

Emre 40 Dec 29, 2022
Pasar parametros - App to practice navigation between screens and passing parameters from A->B and B->A

App 5 App para practicar navegacion entre pantallas y paso de parametros de A->B

null 1 Feb 6, 2022
best flutter / dart practices + Custom Painter + Sliver App Bar + Custom Scrollview

Weekly Budget Flutter App A new Flutter project. Getting Started This project is a starting point for a Flutter application. A few resources to get yo

Mohamed Awnallah 4 Oct 21, 2021