Skip to content

A Flutter package used to format your number or string in the application in a very convenient way.

License

Notifications You must be signed in to change notification settings

KashifUmar123/flutter_input_formatter

Repository files navigation

This package streamlines the task of formatting a number or string to your preferred style, allowing for customization according to your needs. It offers a convenient solution for achieving the desired format, including the flexibility to adjust the input size to meet your specific requirements. The length of the list determines the number of blocks, and the charsCount parameter specifies the number of characters in each specific block to meet the format.

My Image Alt Text

Installation

You can install this package by adding it to your pubspec.yaml file. Here's how:

dependencies:
  flutter_input_formatter: ^0.0.5

Example

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

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

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

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Input Formatter Demo',
      theme: ThemeData(
        colorScheme: ColorScheme.fromSeed(seedColor: Colors.deepPurple),
        useMaterial3: true,
      ),
      home: const TestFormatterScreen(),
    );
  }
}

class TestFormatterScreen extends StatefulWidget {
  const TestFormatterScreen({super.key});

  @override
  State<TestFormatterScreen> createState() => _TestFormatterScreenState();
}

class _TestFormatterScreenState extends State<TestFormatterScreen> {
  List<InputFormatter> emiratesIdFormatters = [
    InputFormatter(
      charsCount: 3,
      hintText: "XXX",
    ),
    InputFormatter(
      charsCount: 4,
      hintText: "XXXX",
    ),
    InputFormatter(
      charsCount: 7,
      hintText: "XXXXXXX",
    ),
    InputFormatter(
      charsCount: 1,
      hintText: "X",
    ),
  ];

  List<InputFormatter> pakistaniIdFormatter = [
    InputFormatter(
      charsCount: 5,
      hintText: "*****",
    ),
    InputFormatter(
      charsCount: 7,
      hintText: "*******",
    ),
    InputFormatter(
      charsCount: 1,
      hintText: "*",
    ),
  ];

  List<InputFormatter> usaIdFormatters = [
    InputFormatter(
      charsCount: 3,
      hintText: "XXX",
    ),
    InputFormatter(
      charsCount: 2,
      hintText: "XX",
    ),
    InputFormatter(
      charsCount: 4,
      hintText: "XXXX",
    ),
  ];
  @override
  Widget build(BuildContext context) {
    final Size size = MediaQuery.of(context).size;
    return SafeArea(
      child: Scaffold(
        body: Padding(
          padding: const EdgeInsets.symmetric(horizontal: 24),
          child: Column(
            crossAxisAlignment: CrossAxisAlignment.start,
            children: [
              const SizedBox(
                height: 24,
              ),
              const Text(
                "UAE Input formatter",
              ),
              const SizedBox(
                height: 10,
              ),
              _buildFormatter(
                size,
                emiratesIdFormatters,
                (String val) {
                  debugPrint(val);
                },
              ),
              const SizedBox(
                height: 24,
              ),
              const Text(
                "Pakistan Input formatter",
              ),
              const SizedBox(
                height: 10,
              ),
              _buildFormatter(
                size,
                pakistaniIdFormatter,
                (String val) {
                  debugPrint(val);
                },
              ),
              const SizedBox(
                height: 24,
              ),
              const Text(
                "USA Input formatter",
              ),
              const SizedBox(
                height: 10,
              ),
              _buildFormatter(
                size,
                usaIdFormatters,
                (String val) {
                  debugPrint(val);
                },
              ),
            ],
          ),
        ),
      ),
    );
  }

  Widget _buildFormatter(Size size, List<InputFormatter> formatters, Function(String) onChange) {
    return FlutterInputFormatters(
      formatters: formatters,
      onChange: onChange,
      baseWidth: size.width * 0.03,
      margin: const EdgeInsetsDirectional.only(end: 5),
      padding: const EdgeInsetsDirectional.symmetric(horizontal: 12, vertical: 2),
      textStyle: const TextStyle(
        fontSize: 14,
        fontWeight: FontWeight.w500,
        letterSpacing: 1.0,
      ),
      hintStyle: const TextStyle(
        fontSize: 14,
        fontWeight: FontWeight.w500,
        letterSpacing: 2.0,
        color: Colors.grey,
      ),
      cursorColor: Colors.black,
      borderColor: Colors.grey,
      borderRadius: BorderRadius.circular(12),
    );
  }
}

About

A Flutter package used to format your number or string in the application in a very convenient way.

Resources

License

Stars

Watchers

Forks

Releases

No releases published

Packages

No packages published