Flutter: input formatter ต้องการ input แบบไหนฉันช่วยได้

ในการกำหนดรูปแบบของ input ที่จะรับเข้ามาทาง TextField() นั้นเราสามารถกำหนดผ่าน property ใน TextField() ได้เลยตาม sample ด้านล่างเช่น

• ให้รับเฉพาะตัวเลขเท่านั้น
• กำหนดคีย์บอร์ดให้เป็นตัวเลขให้เลย
• กำหนด limit length

กำหนดส่วนของ input จาก text field

ในการ filter ข้อมูลที่จะรับเข้ามา เราสามารถใช้ RegEx ในการจัดการได้หมด เช่น

Alphabets only:
FilteringTextInputFormatter.allow(RegExp(r'[a-zA-Z]')),
No dashes:
FilteringTextInputFormatter.deny(RegExp(r'[-]')),
(d=ตัวเลขทุกตัว, +=ต้องมีอย่างน้อย1ตัว, *=มีกี่ตัวก็ได้ ไม่มีก็ได้, ?=มีได้1ตัวหรือไม่มีก็ได้)
Only number and 1 dot:
FilteringTextInputFormatter.allow(RegExp(r'^\d+\.?\d*')),

แต่จาก RegExp ด้านบนเมื่อเรากำหนดเงื่อนไขเกี่ยวกับจุดทศนิยม (decimal) จะต้องกำหนดให้ keyboard type อนุญาตให้กด (.)ได้ด้วยเช่นกัน แบบนี้คับ

ตัวอย่างการใช้ RegExp ที่รับค่าเป็นทศนิยมได้ พร้อมกับอนุญาติให้พิมพ์ decimal เข้ามาได้ทาง keyboard

และถ้ายังต้องการเปลี่ยนแปลงแก้ไขค่าที่ได้จาก TextField() สามารถแก้ไขได้จาก event: onChanged() เช่น

ตัวอย่างการแปลงค่าจาก TextField() มาเป็น double และปัดให้เหลือทศนิยม 1 ตำแหน่ง

หรืออีกวิธีคือ สามารถ custom class ขึ้นมาจากการ extend มาจาก TextInputFormatter ได้เช่นกัน.

แต่ในบทความนี้จะแนะนำ lib ที่น่าจะช่วยให้ไม่ต้อง implement เองสำหรับ common input format ที่เจอบ่อยๆคับ ลองดูกันเลย

1. ติดตั้ง package ก่อนเลย

pattern_formatter: ^1.0.2

2. import เข้ามาใช้

import 'package:pattern_formatter/pattern_formatter.dart';

3. Lib ตัวนี้จะมี format ให้ใช้ได้ 4 ลักษณะคือ

• ThousandsFormatter() จะมี , ขั้นทีละ 3 ตัวเพื่อให้อ่านตัวเลขได้ง่าย
• ThousandsFormatter(allowFraction: true,) เพื่อให้ใส่ทศนิยมได้
• CreditCardFormatter(separator: ‘-’) สำหรับใส่ข้อมูลบัตรเครดิต
• DateInputFormatter() สำหรับใส่ Date

ลองดู UI เปรียบเทียบกันเลยคับ

แสดงการใช้งาน inputFormatters ร่วมกับ lib pattern_formatter

Testing code:

แล้วพบกันใหม่คับ

References:
https://pub.dev/packages/pattern_formatter/versions/1.0.2
https://www.youtube.com/watch?v=4v4l6E8Sbj8&t=133s