flutter_custom_fonts

flutter_custom_fonts

Cara menambahkan font khusus dalam flutter

Perkenalan:

Dalam artikel ini kita akan belajar cara menambahkan font khusus dalam aplikasi Flutter. Kami akan menambahkan font .TTF dalam contoh ini. Google Font menyediakan font gratis sehingga kami akan mengunduh font dari sana. Kami akan menambahkan font Pacifico dan robotocondensed dalam contoh ini. Jadi mari kita tambahkan font khusus dalam aplikasi flutter di contoh di bawah ini.

Keluaran:

Tangga:

Langkah 1: Langkah pertama dan dasar untuk membuat aplikasi baru di Flutter. Jika Anda seorang pemula dalam flutter maka Anda dapat memeriksa blog saya, buat aplikasi pertama di Flutter. Saya telah membuat aplikasi yang dinamai "flutter_custom_fonts".

Langkah 2: Sekarang, unduh font dari Google Fonts atau dari situs lain dan letakkan proyek Fonts. Buat folder yang disebut sebagai "font" di bawah direktori Root Proyek dan masukkan font ke dalam folder itu. Lihatlah tangkapan layar di bawah ini untuk lebih banyak pemahaman.

Langkah 3: Sekarang konfigurasikan font dalam file pubspec.yaml. File pubspec.yaml adalah file konfigurasi untuk plugin, font, gambar dll. Lihat kode di bawah ini yang perlu Anda konfigurasi dalam file pubspec.yaml Anda.

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

Langkah 4: Sekarang dalam file Main.dart kami akan menggunakan font untuk menata teks kami. Di bawah ini adalah implementasi pemrograman dari itu.

 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),
           ),
         ],
       ),
     ),
   );
 }
}

Hurrey…. Jalankan aplikasi dan uji pada emulator/simulator atau perangkat :))))

Kesimpulan:

Kami telah belajar bahwa cara menambahkan font khusus dalam aplikasi Flutter. Ada tiga langkah untuk itu 1. Unduh font dan tempatkan ke folder font 2. Mengkonfigurasi font ke dalam file pubspec.yaml dan 3. Gunakan font untuk menata teks.

Git repo: https://github.com/myvsparth/flutter_custom_fonts

Terkait dengan tag: flutter, font khusus, font google