Masked text field - A flutter package for masked text field for formet your text and good UI

Overview

Masked Text Field

Masked Text Field

pub package pub points LinkedIn Instagram Facebook Youtube

Features

A package for masked text field for formet your text and good UI, so if you want a mask for phone number, or IP address or any kind of formate. Use this package.
Image

Getting started

Add the dependency in pubsec.yaml file.

dart
  dependencies:
    flutter:
      sdk: flutter
    masked_text_field: any

Usage Example

import flutter_social_button.dart


import 'package:masked_text_field/masked_text_field.dart';

for add Text Field

It's very simple, it's a Widget as all the other ones.


MaskedTextField
(
    maskedTextFieldController: textfieldController,
    mask: "xxx.xxx.xxx.xxx",
    maxLength: 15,
    keyboardType: TextInputType.number,
    inputDecoration: new InputDecoration(
    hintText: "192.192.192.192", labelText: "IP Address"),
);

'x' is the normal char that your text will have.

this sample reproduces something like this in the end: 192.192.192.192.

You can also change the escape character you want to use.

If you want to change it, you just need to fill the property escapeCharacter with the character you want.


MaskedTextField
(
    maskedTextFieldController: textfieldController,
    escapeCharacter: '#',
    mask: "###.###.###.###",
    maxLength: 15,
    keyboardType: TextInputType.number,
    inputDecoration: new InputDecoration(
    hintText: "192.192.192.192", labelText: "IP Address"),
);

'x' is the default escape character.

Example


import 'package:flutter/material.dart';
import 'package:masked_text_field/masked_text_field.dart';

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

class MyApp extends StatelessWidget {
  const MyApp({Key? key}) : super(key: key);

  // This widget is the root of your application.
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Demo',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: const HomePage(title: 'Masked Text Field'),
    );
  }
}

class HomePage extends StatefulWidget {
  final String title;
  const HomePage({Key? key, required this.title}) : super(key: key);

  @override
  State<HomePage> createState() => _HomePageState();
}

class _HomePageState extends State<HomePage> {

  var ipController = TextEditingController();
  var dateController = TextEditingController();
  var phoneController = TextEditingController();

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text(widget.title),
      ),
      body: Padding(
        padding: const EdgeInsets.all(16.0),
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          crossAxisAlignment: CrossAxisAlignment.start,
          children: [
            const Text('Enter IP Address'),
            const SizedBox(height: 5,),
            MaskedTextField(
              textFieldController: ipController,
              inputDecoration: const InputDecoration(
                hintText: '192.192.192.192',
                  counterText: ""
              ),
              autofocus: true,
              mask: 'xxx.xxx.xxx.xxx',
              maxLength: 15,
              keyboardType: TextInputType.number,
              onChange: (String value) {
                print(value);
              },
            ),
            const SizedBox(height: 10,),
            const Text('Enter Date'),
            const SizedBox(height: 5,),
            MaskedTextField(
              textFieldController: dateController,
              inputDecoration: const InputDecoration(
                  hintText: 'DD/MM/YYYY',
                  counterText: ""
              ),
              autofocus: true,
              mask: 'xx/xx/xxxx',
              maxLength: 10,
              keyboardType: TextInputType.number,
              onChange: (String value) {
                print(value);
              },
            ),
            const SizedBox(height: 10,),
            const Text('Enter Phone Number'),
            const SizedBox(height: 5,),
            MaskedTextField(
              textFieldController: phoneController,
              inputDecoration: const InputDecoration(
                  hintText: '98765-43210',
                  counterText: "",
                prefixText: '+91 ',
              ),
              autofocus: true,
              mask: 'xxxxx-xxxxx',
              maxLength: 11,
              keyboardType: TextInputType.number,
              onChange: (String value) {
                print(value);
              },
            ),
          ],
        ),
      ),
    );
  }
}

Contributing

Pull requests are welcome. For major changes, please open an issue first to discuss what you would like to change.

You might also like...

Simple and complete Flutter hooks testing utilities that encourage good testing practices.

Simple and complete Flutter hooks testing utilities that encourage good testing practices.

Flutter Hooks Testing Library Simple and complete Flutter hooks testing utilities that encourage good testing practices. Inspired by react-hooks-testi

Dec 2, 2022

An example Flutter application built with Very Good CLI and Supabase πŸ¦„

Supabase Example Generated by the Very Good CLI πŸ€– An example Flutter application built with Very Good CLI and Supabase πŸ¦„ Getting Started πŸš€ This pro

Dec 27, 2022

Bill Splitting App πŸ’΅ with Good UX and Design πŸ‘¨πŸ»β€πŸŽ¨ built with Flutter. πŸš€

Bill Splitting App πŸ’΅ with Good UX and Design πŸ‘¨πŸ»β€πŸŽ¨ built with Flutter. πŸš€

Splitty: Bill Splitting App Link Idea πŸ’‘ Create App where we can create group and add members to share the bill & split the amount equally with member

Sep 6, 2022

Do more - A good looking glorified todo list built with flutter.

Do more - A good looking glorified todo list built with flutter.

do_more (DO) A glorified todo list with a beautiful ui. Login with Google Events Organize your tasks by events, visualize them in their page and add

Nov 22, 2022

A Very Good Blog App using Flutter, flutter_bloc, django rest framework for backend✨

A Very Good Blog App using Flutter, flutter_bloc, django rest framework for backend✨

Very Good Blog App - Blog sharing Features Login, register, manage personal information. Compose, edit, post blog to share with everyone. Like, save b

Nov 27, 2022

Find a good meeting time across multiple timezones.

meeting_scheduler Adventures in scheduling across timezones. A project by the Adventures In [Dart, Flutter, Firebase] group. Goals: Help people find a

May 23, 2022

An implementation of the behavioral composition pattern for Flame. Built by Very Good Ventures πŸ¦„

An implementation of the behavioral composition pattern for Flame. Built by Very Good Ventures πŸ¦„

Flame Behaviors Developed with πŸ’™ by Very Good Ventures πŸ¦„ An implementation of the behavioral composition pattern for Flame. Installation πŸ’» flutter

Jan 2, 2023

Flame behaviors used to organically manage the movement of an entity. Built by Very Good Ventures πŸ¦„

Flame behaviors used to organically manage the movement of an entity. Built by Very Good Ventures πŸ¦„

Steering Behaviors Developed with πŸ’™ by Very Good Ventures πŸ¦„ An implementation of steering behaviors for Flame Behaviors. See Steering Behaviors For

Oct 9, 2022

A Flutter select form field widget. It shows a list of options in a dropdown menu.

A Flutter select form field widget. It shows a list of options in a dropdown menu.

select_form_field A Flutter select field widget. It shows a list of options in a dropdown menu. This widget extend TextField and has a similar behavio

Sep 14, 2022
Comments
  • RangeError when at length

    RangeError when at length

    When entering a value into a MaskedTextField like this:

            MaskedTextField(
                mask: kMaskIpv4,
                textFieldController: printerIpController,
                autofocus: true,
                inputDecoration: InputDecoration(hintText: printerIP),
                maxLength: kMaskIpv4.length,
                keyboardType: TextInputType.number,
                onChange: (value) {
                  Dev.log(value, name: 'IP', type: runtimeType);
                })
    

    and entering the final value or more, an exception is thrown:

    The following RangeError was thrown while calling onChanged:
    RangeError (index): Invalid value: Not in inclusive range 0..14: 15
    
    When the exception was thrown, this was the stack: 
    #0      _StringBase.[] (dart:core-patch/string_patch.dart:260:41)
    #1      MaskedTextField.build.<anonymous closure> (package:masked_text_field/masked_text_field.dart:79:21)
    #2      EditableTextState._formatAndSetValue (package:flutter/src/widgets/editable_text.dart:2523:27)
    #3      EditableTextState.updateEditingValue (package:flutter/src/widgets/editable_text.dart:1888:7)
    #4      TextInput._handleTextInputInvocation (package:flutter/src/services/text_input.dart:1593:37)
    

    in above case kMaskIpv4 = 'xxx.xxx.xxx.xxx' and I'm entering a standard IPv4 eg 192.168.0.1

    opened by mzohren 0
Owner
Alok Dubey
Alok Dubey
A Very Good Dart Package Template created by the Very Good Ventures Team πŸ¦„

Very Good Dart Package Developed with ?? by Very Good Ventures ?? A Very Good Dart package created by Very Good Ventures ?? . Getting Started ?? Insta

Very Good Open Source 8 Aug 14, 2022
A Very Good Flutter Federated Plugin created by the Very Good Ventures Team πŸ¦„

Very Good Flutter Plugin Developed with ?? by Very Good Ventures ?? A Very Good Flutter Plugin created by the Very Good Ventures Team. Getting Started

Very Good Open Source 14 Oct 19, 2022
A Very Good Dart CLI Template created by the Very Good Ventures Team πŸ¦„

Very Good Dart CLI Developed with ?? by Very Good Ventures ?? A Dart CLI template created by the Very Good Ventures Team. Generated by the Very Good C

Very Good Open Source 26 Dec 15, 2022
A Flutter package that provides a dropdown form field using a dropdown button inside a form field.

Dropdown form field A dropdown form field using a dropdown button inside a form field. Demo Features Can be used as regular form field. Simple to impl

Carlos Eugenio Torres 72 Jan 1, 2023
Masked text input formatter for flutter.

mask_text_input_formatter The package provides TextInputFormatter for TextField and TextFormField which format the input by a given mask. Example Chec

Sergey 200 Dec 25, 2022
A text field that displays text on different languages based on your selection.

translatable_text_field A text field that displays text on different languages based on your selection. Its basic idea is that you place this fields i

null 0 Mar 13, 2022
Detectable text field - Flutter Text widgets with detection features

detectable_text_field Text widgets with detection features. You can detect hasht

null 0 Feb 2, 2022
πŸ”₯πŸš€ Flutter package to create Pin code input text field with every pixel customization possibility 🎨 with beautiful animations

Flutter PinPut From Tornike ?? ?? Flutter package to create Pin code input (OTP) text field with every pixel customization possibility ?? and beautifu

Tornike 451 Jan 2, 2023
Notes is a good helper to manage your schedules and notes

Notes is a good helper to manage your schedules and notes. It gives you a quick and simple notepad editing experience when you write notes, memo, email, message, shopping list and to do list. It makes to take a note easier than any other notepad and memo apps.

thejorabek 11 Nov 16, 2022
Flutter package for Android and iOS allow you to show a wide range of hyperlinks either in the input field or in an article view

Tagtly package help you to detect a lot of hyperlink text such as.. email, url, social media tags, hashtag and more either when user type in text field or when appear a text read only.

Mohamed Nasr 4 Jul 25, 2022