Flutter Plugin - Simple character blocked input that usually used for redeem/validation input.

Overview

Block Input

build pub package

Simple character blocked input that usually used for redeem code or validation code input.

Gallery

Example

Full example

import 'package:block_input/block_input.dart';
BlockInput(
  controller: blockInputController,
  keyboardType: BlockInputKeyboardType.number, // Number or Text
  axisAlignment: MainAxisAlignment.spaceBetween, // Same as Row/Column MainAxisAlignment
  blockInputStyle: BlockInputStyle(
    backgroundColor: Colors.black12, // Color
    border: OutlineInputBorder( // Same as InputDecoration border
         borderRadius: BorderRadius.all(Radius.circular(10)),
         borderSide: BorderSide(color: Colors.deepOrange, width: 1)
    ),
    focusedBorder: OutlineInputBorder( // Same as InputDecoration border
         borderRadius: BorderRadius.all(Radius.circular(10)),
         borderSide: BorderSide(color: Colors.blueAccent, width: 2)
    )
  )
)

Cyrillic support

Mongolian cyrillic input is loosely supported for now. This feature will help you to build Mongolian Registration No input. Cyrillic input triggers custom keyboard layout. Usage:

BlockInput(
  keyboardType: BlockInputKeyboardType.mnCyrillic
  ...
)

Cyrillic keyboard styling:

BlockInputStyle(
    keyboardStyle: BlockKeyboardStyle(
      keyColor: Colors.blueAccent,
      backgroundColor: Colors.white,
      width: 40,
      height: 40,
      textStyle: TextStyle(),
      keyShape: RoundedRectangleBorder(
          borderRadius: BorderRadius.circular(18.0),
          side: BorderSide(color: Colors.red)
      ),
    ),
    ...
),

Controller and Listener

Controller is almost same as classic TextEditingController :D

// Initializing controller
int inputSize = 6; // input size is required for controller
BlockInputController blockInputController = BlockInputController(inputSize);

// Attaching listener
blockInputController.addListener(() {
  print(blockInputController.text);
});

// Getting and Setting value
String getValue = blockInputController.text; // get
blockInputController.text = 'maaraa'; // set + 
// + throws exception when text length was exceeded from input size

blockInputController.clear(); // clear

// Disposing
blockInputController.dispose();

Attributes

BlockInput

Attribute Type
blockInputKeyboardType BlockInputController
blockInputKeyboardType BlockInputKeyboardType
blockInputStyle BlockInputStyle
errorMessage String
errorMessageStyle TextStyle
axisAlignment MainAxisAlignment

BlockInputStyle

Attribute Type
backgroundColor Color
border OutlineInputBorder
focusedBorder OutlineInputBorder
padding EdgeInsets
width double
textStyle TextStyle
keyboardStyle BlockKeyboardStyle

Licence

Apache License version 2.0

Enkh-Amar.G // vonqo

You might also like...

Rules - Powerful and feature-rich validation library for both Dart and Flutter.

Introduction Rules - Powerful and feature-rich validation library for both Dart and Flutter. Rules is a simple yet powerful and feature-rich validatio

Dec 12, 2022

Sample Flutter app for creating basic login forms validation for email and passwords

Sample Flutter app for creating basic login forms validation for email and passwords

Email validation Flutter example Sample flutter app showing how to validate a e-mail login form. This example uses the email_validator package for val

Dec 15, 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 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

Dec 29, 2022

Using all validation logics.

new_login A new Flutter project. Getting Started This project is a starting point for a Flutter application. A few resources to get you started if thi

Feb 28, 2022

Generate secure passwords, check for exposed passwords, get visual feedback for password strength or get form validation with a minimum password strength required.

Generate secure passwords, check for exposed passwords, get visual feedback for password strength or get form validation with a minimum password strength required.

password_strength_checker Generate secure passwords, check for exposed passwords, get visual feedback for password strength or get form validation wit

Aug 8, 2023

This is a simple app that is used to record video using Camera Plugin.

videorecorder A new Flutter project. Getting Started This project is a starting point for a Flutter application. A few resources to get you started if

Nov 28, 2022

Flutter Plugin used to query audios/songs infos [title, artist, album, etc..] from device storage.

Flutter Plugin used to query audios/songs infos [title, artist, album, etc..] from device storage.

on_audio_query on_audio_query is a Flutter Plugin used to query audios/songs 🎶 infos [title, artist, album, etc..] from device storage. Help: Any pro

Dec 10, 2022

Introduction to flutter app final input

Introduction to flutter app final input

TASK CREATOR Introduction to Flutter URSB Webinar Topics What is flutter Why Flutter ? Flutter architecture Advantage and Disadvantage Widgets State A

Aug 28, 2022
Releases(1.2.0)
Owner
Enkh-Amar
pew pew pew
Enkh-Amar
Simple Flutter text highlighting at the character-level.

substring_highlight Highlight Flutter text at the character-level. Designed for case-insensitive search-term highlighting, a single search term sub-st

Peter Alvin 39 Nov 16, 2022
Verify code input. You can create a verify code input.

flutter_verification_code_input A Flutter package that help you create a verification input. Installing flutter_verification_code_input: git:

Tiny Express 49 Dec 7, 2022
Verify code input. You can create a verify code input.

flutter_verification_code_input A Flutter package that help you create a verification input. Installing flutter_verification_code_input: git:

Tiny Express 49 Dec 7, 2022
Gumao: A Game Character Collector App built using Flutter

Gumao-A Game Character Collector App This Application is made in Flutter ?? & Dart ?? Code Style Design Credits This Design is from Dribbble by Vijay

Abhishek Rajendra Wagh 35 Nov 23, 2022
A Rick and Morty Character Wiki, build in Flutter with Api Rest integration.

Rick and Morty Character Wiki This is an app build in Flutter that loads a list of characters (from the serie Rick and Morty) and his info, and displa

Jessica Aidyl 3 Jul 27, 2022
Symbolic names for character codes in Dart

Character code constants This package can generate constant symbolic names for character codes. The constants can used when working directly with char

Lasse R.H. Nielsen 21 Sep 16, 2022
An application that matches users by their character types

MBTI_Match An application that matches users by their character types. Screenshots Packages Dio A powerful Http client for Dart, which supports Interc

Enis Çakırçalı 6 Jul 3, 2022
MoneyTextFormField is one of the flutter widget packages that can be used to input values in the form of currencies, by displaying the output format in realtime.

MoneyTextFormField MoneyTextFormField is one of the flutter widget packages that can be used to input values in the form of currencies, by displaying

Fadhly Permata 11 Jan 1, 2023
VerificaC19-flutter - Unofficial EU DGC validation package for Flutter

VerificaC19 package for Flutter About This package allows to decode and validate

Federico Mastrini 13 Oct 21, 2022
A Dart validation DSL to validate your flutter app models.

Validations made simple A fp inspired validation DSL. For Dart and Flutter projects. Features Completely extensible (create your own combinators, vali

Daniel Cardona Rojas 26 Feb 8, 2022