{"id":13380269,"url":"https://github.com/bhrott/flutter-masked-text","last_synced_at":"2025-04-07T08:15:09.080Z","repository":{"id":47556899,"uuid":"134235942","full_name":"bhrott/flutter-masked-text","owner":"bhrott","description":"A masked text for Flutter.","archived":false,"fork":false,"pushed_at":"2022-11-06T12:39:48.000Z","size":329,"stargazers_count":275,"open_issues_count":45,"forks_count":123,"subscribers_count":9,"default_branch":"master","last_synced_at":"2024-07-30T09:09:45.614Z","etag":null,"topics":["flutter","mask","maskedtextfield"],"latest_commit_sha":null,"homepage":"https://pub.dartlang.org/packages/flutter_masked_text","language":"Dart","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/bhrott.png","metadata":{"files":{"readme":"README.md","changelog":"CHANGELOG.md","contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null}},"created_at":"2018-05-21T07:46:05.000Z","updated_at":"2024-07-18T07:56:14.000Z","dependencies_parsed_at":"2023-01-21T02:47:45.192Z","dependency_job_id":null,"html_url":"https://github.com/bhrott/flutter-masked-text","commit_stats":null,"previous_names":["benhurott/flutter-masked-text"],"tags_count":8,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/bhrott%2Fflutter-masked-text","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/bhrott%2Fflutter-masked-text/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/bhrott%2Fflutter-masked-text/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/bhrott%2Fflutter-masked-text/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/bhrott","download_url":"https://codeload.github.com/bhrott/flutter-masked-text/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":247615377,"owners_count":20967184,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["flutter","mask","maskedtextfield"],"created_at":"2024-07-30T09:00:26.249Z","updated_at":"2025-04-07T08:15:09.038Z","avatar_url":"https://github.com/bhrott.png","language":"Dart","funding_links":[],"categories":["Components"],"sub_categories":["Text \u0026 Rich Content"],"readme":"# flutter_masked_text\n\nMasked text input for flutter.\n\n![travis-ci](https://travis-ci.org/benhurott/flutter-masked-text.svg?branch=master)\n\n![logo](doc/flutter_logo.png)\n\n## Alert\n\nHi guys!\n\nUnfortunately, I'm not developing mobile anymore. This repo will not receive updates.\n\n## Install\n\nFollow this [GUIDE](https://pub.dartlang.org/packages/flutter_masked_text#-installing-tab-)\n\n## Usage\n\nImport the library\n\n```dart\nimport 'package:flutter_masked_text/flutter_masked_text.dart';\n```\n\n## MaskedText\n\nCreate your mask controller:\n\n```dart\nvar controller = new MaskedTextController(mask: '000.000.000-00');\n```\n\nSet controller to your text field:\n\n```dart\nreturn new MaterialApp(\n    title: 'Flutter Demo',\n    theme: new ThemeData(\n        primarySwatch: Colors.blue,\n    ),\n    home: new SafeArea(\n        child: new Scaffold(\n            body: new Column(\n                children: \u003cWidget\u003e[\n                    new TextField(controller: controller,) // \u003c--- here\n                ],\n            ),\n        ),\n    ),\n);\n```\n\nThis is the result:\n\n![sample](doc/mask.mov.gif)\n\n### Mask Options\n\nIn mask, you can use the following characters:\n\n-   `0`: accept numbers\n-   `A`: accept letters\n-   `@`: accept numbers and letters\n-   `*`: accept any character\n\n### Initial Value\n\nTo start a mask with initial value, just use `text` property on constructor:\n\n```dart\nvar controller = new MaskedTextController(mask: '000-000', text: '123456');\n```\n\n### Update text programaticaly\n\nIf you want to set new text after controller initiatialization, use the `updateText` method:\n\n```dart\nvar controller = new MaskedTextController(text: '', mask: '000-000');\ncontroller.updateText('123456');\n\nprint(controller.text); //123-456\n```\n\n### Using custom translators\n\nIf you want to use your custom regex to allow values, you can pass a custom translation dictionary:\n\n```dart\nconst translator = {\n    '#': new RegExp(r'my regex here')\n};\n\nvar controller = new MaskedTextController(mask: '####', translator: translator);\n```\n\nIf you want to use default translator but override some of then, just get base from `getDefaultTranslator` and override what you want (here is a sample for obfuscated credit card):\n\n```dart\nvar translator = MaskedTextController.getDefaultTranslator(); // get new instance of default translator.\ntranslator.remove('*'); // removing wildcard translator.\n\nvar controller = new MaskedTextController(mask: '0000 **** **** 0000', translator: translator);\ncontroller.updateText('12345678');\n\nprint(controller.text); //1234 **** **** 5678\n```\n\n### Change the mask in runtime\n\nYou can use the `updateMask` method to change the mask after the controller was created.\n\n```dart\nvar cpfController = new MaskedTextController(text: '12345678901', mask: '000.000.000-00');\n\nprint(cpfController.text); //'123.456.789-01'\n\ncpfController.updateMask('000.000.0000-0');\n\nprint(cpfController.text); //'123.456.7890-1'\n```\n\n### Hook: beforeChange [v0.7.0+]\n\nIn some cases, you will want to validate the mask value to decide if it's allowed to input or not.\n\nIt's simple: you just need to set the `beforeChange` and return `true` or `false`. If you return `true`, it will accept the new value and will try to apply the mask. Otherwhise, it will reject the new value.\n\nThe function receives two parameters:\n\n-   `previous`: the previous text of the controller.\n-   `next`: the next text that will be masked.\n\n```dart\nvar controller = new MaskedTextController(mask: '(00) 0000-0000');\ncontroller.beforeChange = (String previous, String next) {\n    // my logic here\n\n    return true;\n};\n```\n\n### Hook: afterChange [v0.7.0+]\n\nThis function will be called after setted in the controller.\n\nThe function receives two parameters:\n\n-   `previous`: the previous text of the controller.\n-   `next`: the next text that will be masked.\n\n```dart\nvar controller = new MaskedTextController(mask: '(00) 0000-0000');\ncontroller.afterChange = (String previous, String next) {\n    print(\"$previous | $next\");\n};\n```\n\n## Money Mask\n\nTo use money mask, create a MoneyMaskedTextController:\n\n```dart\nvar controller = new MoneyMaskedTextController();\n\n//....\nnew TextField(controller: controller, keyboardType: TextInputType.number)\n```\n\n### Decimal and Thousand separator\n\nIt's possible to customize `decimal` and `thousand` separators:\n\n```dart\nvar controller = new MoneyMaskedTextController(decimalSeparator: '.', thousandSeparator: ',');\n```\n\n### Set value programaticaly\n\nTo set value programaticaly, use `updateValue`:\n\n```dart\ncontroller.updateValue(1234.0);\n```\n\n### Get double value\n\nTo get the number value from masked text, use the `numberValue` property:\n\n```dart\ndouble val = controller.numberValue;\n```\n\n### Using decoration symbols\n\nYou can use currency symbols if you want:\n\n```dart\n// left symbol\nvar controller = new MoneyMaskedTextController(leftSymbol: 'R\\$ ');\ncontroller.updateValue(123.45);\n\nprint(controller.text); //\u003c-- R$ 123,45\n\n\n// right symbol\nvar controller = new MoneyMaskedTextController(rightSymbol: ' US\\$');\ncontroller.updateValue(99.99);\n\nprint(controller.text); //\u003c-- 99,99 US$\n\n\n// both\nvar controller = new MoneyMaskedTextController(leftSymbol: 'to pay:', rightSymbol: ' US\\$');\ncontroller.updateValue(123.45);\n\nprint(controller.text); //\u003c-- to pay: 123,45 US$\n```\n\n### hook: afterChange [v0.7.0+]\n\nYou can watch for mask and value changes. To do this, just set the `afterChange` hook.\n\nThis function receives two parameters:\n\n-   `masked`: the masked text of the controller.\n-   `raw`: the double value of the text.\n\n```dart\nvar controller = new MoneyMaskedTextController();\n\ncontroller.afterChange = (String masked, double raw) {\n    print(\"$masked | $raw\");\n};\n```\n\n### Defining decimal places [v0.8.0+]\n\nYou can define the number of decimal places using the `precision` prop:\n\n```dart\nvar controller = new MoneyMaskedTextController(precision: 3);\ncontroller.updateValue(123.45);\n\nprint(controller.text); //\u003c-- 123,450\n```\n\n## Using default TextEditingController\n\nThe MaskedTextController and MoneyMaskedTextController extends TextEditingController. You can use all default native methods from this class.\n\n## Samples\n\nYou can check some code samples in this repo: [flutter-masked-text-samples](https://github.com/benhurott/flutter-masked-text-samples)\n\n## TODO\n\n-   [x] Custom translations\n-   [x] Money Mask\n-   [ ] Raw Text Widget\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fbhrott%2Fflutter-masked-text","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fbhrott%2Fflutter-masked-text","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fbhrott%2Fflutter-masked-text/lists"}