Flutter: จัดการ format ด้วย intl package.

ในบทความนี้นะคับ จะแนะนำวิธีจัดการกับ format ของ text ต่างๆใน Flutter นะคับ ซึ่งจะต้องติดตั้ง package เสริมที่ชื่อ ‘intl’ พร้อมแล้วก้อไปโหลดมาติดตั้งได้เลยคับ

สำหรับจัดการ date format หรือ number format ได้หมดคับ

ในตอนต้นเราจะลองมาจัดแบบ number format ก่อนนะคับ เริ่มแรกเราจะมาเขียนแสดงตัวเลขแบบง่ายๆกันก่อนนะคับ

แสดงตัวเลขแบบทั่วๆไป 1–9

ถัดไปถ้าเราต้องการให้มี Format แบบมีจุดลูกน้ำคั่นทีละ 3 เพื่อช่วยให้อ่านง่ายขึ้น ก็ให้เรียกใช้งาน NumberFormat()

NumberFormat("#,###").format(123456789)
// ระบุ format ที่เราต้องการ

เรียบร้อยล่ะคับ ต่อไปมาดูวิธีการจัด format สำหรับ DateTime กันบ้างนะคับ โดยเราจะจัด format ของวันที่ในปัจจุบันให้เป็นแบบที่เราต้องการ

เรียก วันเวลา ปัจจุบันขึ้นมาด้วย

DateTime now = new DateTime.now();  // ประกาศบริเวณ Explicit นะคับ

ซึ่งถ้าเรา print(now) ออกมาจะได้ค่าแบบนี้นะคับ

2020-07-06 18:31:50.133920

แต่ถ้าไม่ใช่ format ที่เราต้องการ แน่นอนว่าเราต้องเปลี่ยนใหม่โดยให้สร้าง instance ของ format ขึ้นมาใช้ตามเอกสารของ intl นะคับ

var formatter = DateFormat.yMMMMEEEEd();//สร้าง formatter แบบที่ต้องการ
------------------------------------------------------------------
จากนั้นให้เรียกใช้งานที่ widget แบบนี้ได้เลย
------------------------------------------------------------------
Text('${formatter.format(now)}'), // จะได้ Monday, July6, 2020

ตัวอย่างของการใช้ DateTime format.

มี method ต่างๆให้เลือกใช้ในแต่ละ format DateTime นะคับ

y = Year.
M = Month.
E = (ต้องเทสอ่ะ จำไม่ได้ล่ะ)
d = day.

แต่ถ้าเราไม่ต้องการใช้ format ภาษาอังกฤษแบบที่เค้ากำหนดมา เราต้องการกำหนดรูปแบบเป็นไทย ก็สามารถกำหนดได้ลักษณะนี้คับ

กำหนด Intl.defaultLocale และ initializeDateFormatting() จะทำให้ format เป็น Thai ทั้งแอฟเลยนะ

แต่ในกรณีที่เราต้องการให้แค่บางจุดในแอฟเท่านั้นที่เป็น format ไทย แบบที่เราต้องการ เราจะกำหนดแค่ initializeDateFormatting() เท่านั้น ส่วน ‘th’ เราจะไปกำหนดใน DateFormat.yMMMMEEEEd(‘th) แบบนี้นะคับ ซึ่งการกำหนดแบบนี้จะทำให้เราสามารถกำหนดได้หลายภาษาในแอฟเดียวเลย ‘th’, ‘en’, ‘zh’ (จีน), ‘jp’ อะไรก็ได้

แต่เอ…พ.ศ.ยังไม่เป็น 2563 เลยนี่หว่า 55 (ถ้าอยากใช้เป็น พ.ศ. ก็ให้บวก 543 ไปนะคับ)

ส่วนในกรณีที่เราต้องการเอาแค่ d (day), MMM (month), y (year) มาใช้เท่านั้น เพื่อทำ Format แบบที่เราต้องการเอง ก็สามารถทำได้เช่นกันนะคับ

รูปแบบ pattern ของวันเดือนปี เข้าไปดูได้ที่นี่นะคับ Link

สรุปในภาพเดียว สำหรับการจัดการ Date Time formate ด้วย package intl

การแปลง Date String ให้เป็น Date format ตามที่เราต้องการ

อีกตัวอย่างของการแปลง datetime now ให้เป็น format ที่เราต้องการ

String formatDateFromString(String date) {
    var parseDate = DateTime.parse(date);
    final DateFormat formatter = DateFormat('dd/MM/yyyy');
    final String formattedDate = formatter.format(parseDate);
    return formattedDate;
}

Function สำหรับแปลง String to Date format ที่เราต้องการ

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