ลองใช้ Font Awesome Icon ใน Flutter กัน

ชุดไอคอนยอดนิยมในโลกของคนทำเว็บ อย่างน้อยๆ ก็ต้องเคยได้ยินชื่อของ Font Awesome กันบ้าง (ฮิตสุดยอด สวยงามจนพลก็ต้องซื้อมาใช้)

ซึ่งในที่นี้ Font Awesome นั้น ปกติคือฟรี และสามารถเอาไปใช้งานได้เลย และแบบเสียเงินเพื่อได้จำนวนไอคอน และสิทธิ์พิเศษที่เยอะกว่า ในที่นี้มีคนเอา Font Awesome มาทำเป็น Dart Package ให้ใช้แล้ว

โดนมี 3 กลุ่มให้ใช้ใน Package นี้ นั่นคือ

• Regular
• Solid
• Brand

มาลองใช้กันเลย

ติดตั้ง Font Awesome ใช้งานใน Flutter

เพิ่มชื่อของ font_awesome ลงไปในไฟล์ pubspec.yaml แล้วอย่าลืมติดตั้งล่ะ

dependencies:
  font_awesome_flutter: ^8.11.0

บน VSCode แค่บันทึกไฟล์ ก็จะเป็นการรันคำสั่ง flutter pub get ให้อัตโนมัติ

วิธีใช้ Font Awesome บน Flutter

ทีนี้เวลาใช้ Font Awesome Icon ให้ใช้กับ Widget ที่ชื่อ FaIcon() นะครับ เช่นแบบตัวอย่างการใช้ IconButton แบบนี้

import 'package:font_awesome_flutter/font_awesome_flutter.dart';

class NextflowWidget extends StatelessWidget {
  Widget build(BuildContext context) {
    return IconButton(
      icon: FaIcon(FontAwesomeIcons.gamepad)
     );
  }
}

จะเห็นว่า ในส่วน IconData: เราจะใช้เป็น

FaIcon(FontAwesomeIcons.gamepad)

ซึ่งถ้าเทียบกับแบบ Icon ธรรมดาจะเป็น

IconButton(icon: Icon(Icons.email))

ลองเอาไปใช้กันดูนะครับ ?

เริ่มต้นเรียนรู้สร้างแอพ iOS และ Android ด้วย Google Flutter ไปกับโค้ชพล

✅ เหมาะสำหรับผู้เริ่มต้น

✅ เขียนครั้งเดียว ใช้ได้ทั้งระบบ iOS และ Android ประหยัดเวลา

✅ เรียนได้ทุกเวลา ไม่มีวันหมดอายุ

✅ ได้รู้ตั้งแต่วิธีติดตั้งโปรแกรม จนเอาขึ้นApp Store และ Play Store

✅ ได้ทำแอพของจริง เริ่มต้นจาก 0 ทุกโปรเจค มีระบบถามตอบ กรณีติดปัญหา

 

อ้างอิง – pub.dev