เนื้อหานี้จะมาแนะนำแนวทางการเพิ่มฟอนท์สำหรับ
ใช้งานใน app กรณีเราอยากได้รูปแบบฟอนท์ที่ต้องการ
แสดงใน app เป็นแบบเฉพาะตัว หรือกรณีใช้กับฟอนท์ของ
ภาษาที่ไม่ได้เป็นภาษาสากลที่ทุกเครื่องต้องมี เราสามารถฝังฟอนท์
ที่ต้องการเข้าไปใน app เพื่อใช้งานได้ดังนี้
*ใช้เนื้อหาต่อเนื่องจากบทความ http://niik.in/961
เตรียมไฟล์ Fonts
ให้เราเตรียมไฟล์ fonts ที่ต้องการ โดยใน flutter จะรองรับ 2 นามสกุลไฟล์ คือ
.ttf หรือ .otf ในตัวอย่างประกอบเนื้อหานี้ จะใช้ฟอนท์ภาษาขืนหรือไทขืน มาเป็นตัวอย่าง
- ATaiThamKHNewV3-Normal.ttf
เมื่อได้ไฟล์แล้ว ให้เราสร้างโฟลเดอร์ assets > fonts ไว้ใน root ของโปรเจ็ค fluter ของเรา
สำหรับเก็บไฟล์ฟอนท์ที่จะใช้งาน ก็จะได้เป็นดังนี้
กำหนดชื่อฟอนท์เพื่อใช้งาน
ต่อไปก็ให้เราเข้าไปเพิ่มการกำหนดชื่อฟอนท์สำหรับเรียกใช้งานในโปรเจ็คในไฟล์ pubspec.yaml
แทรกในส่วนของการกำหนดฟอนท์ประมาณนี้
# The following section is specific to Flutter. flutter: fonts: - family: Taitham3 fonts: - asset: assets/fonts/ATaiThamKHNewV3-Normal.ttf
บันทึกไฟล์ เป็นอันเสร็จการกำหนดชื่อฟอนท์เพื่อใช้งาน
ตัวอย่างแนวทางการกำหนดค่าเพิ่มเติม
flutter: fonts: - family: Raleway fonts: - asset: fonts/Raleway-Regular.ttf - asset: fonts/Raleway-Italic.ttf style: italic - family: RobotoMono fonts: - asset: fonts/RobotoMono-Regular.ttf - asset: fonts/RobotoMono-Bold.ttf weight: 700
แนวทางการกำหนดค่า
- family จะเป็นส่วนของการกำหนดชื่อฟอนท์ ที่เราจะเรียกใช้งานผ่านค่า fontFamily property ของ
TextStyle object
- asset จะเป็นส่วนของการกำหนด path ของไฟล์ฟอนท์ ไฟล์ในโฟลเดอร์นี้จะถูกรวมไปใน app ด้วย
เมื่อมีการ build app เพื่อนำไปใช้งาน
- หนึ่งฟอนท์สามารถมีได้หลายไฟล์ ขึ้นกับรูปแบบที่จะใช้ ประกอบด้วย style, weight และ outline
- การกำหนดค่า weight จะกำหนดค่าระหว่าง 100 - 900 เป็นเลขหลักร้อยลงท้าย 00 ค่าของส่วนนี้จะถูก
นำไปใช้ในการกำหนดค่า fontWeight property ของ TextStyle object ตัวอย่างเช่น ถ้าต้องการใช้ฟอนท์
RobotoMono-Bold เราต้องกำหนดค่า FontWeight.w700 ใน TextStyle ซึ่งเป็นการเรียกใช้งานเท่านั้น เรา
ไม่สามารถกำหนดค่าเกินค่าเดิมของฟอนท์นั้นๆ ได้
- การกำหนดค่า style จะกำหนดเป็น italic กรณีมีการใช้งานฟอนท์แบบ italic โดยเวลาเรียกใช้ ก็จะกำหนด
ผ่านค่า fontStyle property ของ TextStyle object ในรูปแบบ FontStyle.italic เราสามารถเรียกใช้งานการ
กำหนดค่า style ตามค่าของไฟล์นั้นๆ เท่านั้น ไม่สามารถเรียกใช้เพื่อเปลี่ยนรูปแบบ style ได้ เช่น ไฟล์
Raleway-Italic จะเรียกใช้งานแบบกำหนดให้เป็น FontStyle.normal ก็จะไม่มีผลใดๆ
การเรียกใช้งานฟอนท์เป็นค่าเริ่มต้นของ App
เมื่อเรากำหนดชื่อที่จะใช้งานแล้ว เราสามารถเลือกที่จะให้ app ของเราใช้เป็นฟอนท์นี้เป็นค่าเริ่มต้น โดย
ที่ไม่ต้องไปกำหนดแต่ละจุดเอง โดยสามารถกำหนดในส่วนของ การใช้งาน theme ดังนี้
MaterialApp( title: 'Custom Fonts', // สมมติกำหนดใช้ Taitham3 เป็นฟอนท์หลักของ app theme: ThemeData(fontFamily: 'Taitham3'), // กำหนดในส่วนของ theme home: const MyHomePage(), );
ตัวอย่างการกำหนดในไฟล์ main.dart
import 'package:flutter/material.dart'; import 'package:flutter_app2/screen/profile.dart'; import './screen/launcher.dart'; void main() { runApp(const MyApp());} // ส่วนของ Stateless widget class MyApp extends StatelessWidget{ const MyApp({Key? key}) : super(key: key); @override Widget build(BuildContext context) { return MaterialApp( theme: ThemeData( primarySwatch: Colors.blue, fontFamily: 'Taitham3', textTheme: TextTheme(bodyText2: TextStyle(color: Colors.red)), ), title: 'First Flutter App', initialRoute: '/', // สามารถใช้ home แทนได้ routes: { Launcher.routeName: (context) => Launcher(), }, ); } }
ทดสอบเรียกใช้งานในไฟล์ home.dart โดยเราลองคัดลอกภาษาขืนมาวางแทนคำว่า Home Screen
สังเกตจากภาพว่าในโปรแกรมแก้ไขโค้ด เราจะไม่สามารถเห็นข้อความภาษาขืนที่เอามาวางได้ เพราะไม่
รองรับภาษาดังกล่าว แต่เมื่อดูผลลัพธ์เมื่อรัน app ก็จะเป็นดังนี้
จะเห็น app ของเรา รองรับภาษาขืนซึ่งเป็นภาษาที่ app ได้ทำการฝังฟอนท์เข้ามาใช้งานด้วย
ในกรณีที่เราต้องการใช้งานฟอนท์เฉพาะบางจุดใน widget เท่านั้น เราไม่จำเป็นต้องกำหนดในส่วน
ของ theme ตามตัวอย่างด้านบน แต่สามารถเรียกใช้งานในลักษณะดังนี้แทนได้
เรากำหนดเฉพาะสำหรับข้อความที่เป็นภาษาขืน โดยกำหนด fontFamily ให้กับ TextStyle ดังรูปด้านบน
ผลลัพธ์ที่ได้ก็จะเป็นดังนี้
ด้วยขั้นตอนและวิธีการง่ายๆ นี้เราสามารถเลือกใช้งานฟอนท์ใน app ของเราตามต้องการได้ อย่างไรก็ตาม
ก็ควรเลือกเท่าที่จำเป็น เพราะหากมีไฟล์ฟอนท์จำนวนมาก ก็จะทำให้ app ของเรามีขนาดไฟล์ใหญ่ขึ้นตามไปด้วย
เลือกปรับประยุกต์ใช้ให้เหมาะสม