Google Flutter

ลองใช้ 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

Loading Facebook Comments ...
Menu