ดาวน์โหลด flutter_custom_fonts - flutter_custom_fonts ซอร์สโค้ดดาวน์โหลดดาวน์โหลด

flutter_custom_fonts

ดาวน์โหลดแบบอักษร

1.0.0

ดาวน์โหลด

flutter_custom_fonts

วิธีเพิ่มแบบอักษรที่กำหนดเองใน Flutter

การแนะนำ:

ในบทความนี้เราจะได้เรียนรู้วิธีเพิ่มแบบอักษรที่กำหนดเองในแอปพลิเคชัน Flutter เราจะเพิ่มแบบอักษร. ttf ในตัวอย่างนี้ Google Fonts จัดเตรียมแบบอักษรฟรีดังนั้นเราจะดาวน์โหลดแบบอักษรจากที่นั่น เราจะเพิ่มแบบอักษร Pacifico และ Robotocondensed ในตัวอย่างนี้ ลองเพิ่มแบบอักษรที่กำหนดเองในแอพ Flutter ในตัวอย่างด้านล่าง

เอาท์พุท:

ขั้นตอน:

ขั้นตอนที่ 1: ขั้นตอนแรกและขั้นตอนพื้นฐานในการสร้างแอปพลิเคชันใหม่ใน Flutter หากคุณเป็นมือใหม่ใน Flutter คุณสามารถตรวจสอบบล็อกของฉันสร้างแอพแรกใน Flutter ฉันได้สร้างแอพที่ชื่อว่า“ flutter_custom_fonts”

ขั้นตอนที่ 2: ตอนนี้ดาวน์โหลดแบบอักษรจาก Google Fonts หรือจากเว็บไซต์อื่น ๆ และวางโครงการ Fonts สร้างโฟลเดอร์ที่ชื่อว่า“ ฟอนต์” ภายใต้ไดเรกทอรีรูทของโครงการและใส่แบบอักษรลงในโฟลเดอร์นั้น ตรวจสอบภาพหน้าจอด้านล่างเพื่อความเข้าใจเพิ่มเติม

ขั้นตอนที่ 3: กำหนดค่าฟอนต์ในไฟล์ pubspec.yaml ไฟล์ pubspec.yaml เป็นไฟล์กำหนดค่าสำหรับปลั๊กอินตัวอักษรรูปภาพ ฯลฯ ตรวจสอบรหัสด้านล่างที่คุณต้องกำหนดค่าในไฟล์ pubspec.yaml ของคุณ

 fonts:
   - family: Pacifico
     fonts:
       - asset: fonts/Pacifico-Regular.ttf
   - family: RobotoCondensed
     fonts:
       - asset: fonts/RobotoCondensed-Regular.ttf
       - asset: fonts/RobotoCondensed-Bold.ttf
         weight: 700

ขั้นตอนที่ 4: ตอนนี้อยู่ในไฟล์ Main.dart เราจะใช้แบบอักษรเพื่อจัดสไตล์ข้อความของเรา ด้านล่างคือการใช้งานการเขียนโปรแกรมของสิ่งนั้น

 import 'package:flutter/material.dart';
 
void main() => runApp(MyApp());
 
class MyApp extends StatelessWidget {
 @override
 Widget build(BuildContext context) {
   return MaterialApp(
     theme: ThemeData(
       primarySwatch: Colors.purple,
     ),
     home: MyHomePage(),
   );
 }
}
 
class MyHomePage extends StatefulWidget {
 @override
 _MyHomePageState createState() => _MyHomePageState();
}
 
class _MyHomePageState extends State<MyHomePage> {
 @override
 Widget build(BuildContext context) {
   return Scaffold(
     appBar: AppBar(
       title: Text('Flutter Custom Fonts'),
     ),
     body: Center(
       child: Column(
         mainAxisAlignment: MainAxisAlignment.center,
         children: <Widget>[
           Text(
             'Pacifico Regular',
             style: TextStyle(
                 fontFamily: 'Pacifico', fontSize: 32.0, color: Colors.purple),
           ),
           Text(
             'Pacifico Bold',
             style: TextStyle(
                 fontFamily: 'Pacifico',
                 fontWeight: FontWeight.bold,
                 fontSize: 32.0,
                 color: Colors.purple),
           ),
           Text(
             'RobotoCondensed Regular',
             style: TextStyle(
                 fontFamily: 'RobotoCondensed', fontSize: 32.0, color: Colors.purple),
           ),
           Text(
             'RobotoCondensed Bold',
             style: TextStyle(
                 fontFamily: 'RobotoCondensed',
                 fontWeight: FontWeight.w700,
                 fontSize: 32.0,
                 color: Colors.purple),
           ),
         ],
       ),
     ),
   );
 }
}

เฮอร์รีย์…. เรียกใช้แอพและทดสอบบน Emulator/Simulator หรืออุปกรณ์ :)))

บทสรุป:

เราได้เรียนรู้ว่าจะเพิ่มแบบอักษรที่กำหนดเองในแอปพลิเคชัน Flutter มีสามขั้นตอนสำหรับ 1. ดาวน์โหลดตัวอักษรและวางลงในโฟลเดอร์ Fonts 2. กำหนดค่าฟอนต์เป็นไฟล์ pubspec.yaml และ 3 ใช้แบบอักษรเพื่อจัดสไตล์ข้อความ