Flutter, zengin bir widget kütüphanesi ve geniş özelleştirme seçenekleri ile geliştiricilere esneklik sunar. Uygulamanızın tasarımını daha etkileyici ve kullanıcı deneyimini daha benzersiz hale getirmek için özel fontlar kullanmak önemli bir adımdır. Bu yazıda, Flutter uygulamalarınıza özel font eklemenin adımlarını detaylı bir şekilde ele alacağız.

1. Font Dosyalarını Projeye Ekleme

Öncelikle kullanmak istediğiniz font dosyalarını projenize eklemeniz gerekiyor. Font dosyalarını projenizin assets klasörüne yerleştirin. Eğer assets klasörünüz yoksa, proje kök dizininde oluşturabilirsiniz.

Örnek dizin yapısı:

my_flutter_app/
└── assets/
    └── fonts/
        ├── Roboto-Regular.ttf
        └── Roboto-Bold.ttf

2. pubspec.yaml Dosyasını Güncelleme

Font dosyalarınızı projenize ekledikten sonra, pubspec.yaml dosyasını güncelleyerek bu dosyaları Flutter'a tanıtmanız gerekiyor. pubspec.yaml dosyanızda şu şekilde bir ekleme yapın:

flutter:
  fonts:
    - family: Roboto
      fonts:
        - asset: assets/fonts/Roboto-Regular.ttf
        - asset: assets/fonts/Roboto-Bold.ttf
          weight: 700

Bu örnekte, Roboto ailesine ait iki farklı font ekledik: Regular ve Bold. weight özelliği ile fontun ağırlığını belirtebilirsiniz.

3. Fontları Kullanma

Artık fontları kullanmaya hazırsınız. Text widget'larında fontu belirtmek için TextStyle'ı kullanabilirsiniz:

import 'package:flutter/material.dart';

void main() {
  runApp(MyApp());
}

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(
          title: Text('Özel Fontlar Kullanma'),
        ),
        body: Center(
          child: Column(
            mainAxisAlignment: MainAxisAlignment.center,
            children: <Widget>[
              Text(
                'Bu Roboto Regular fontudur.',
                style: TextStyle(fontFamily: 'Roboto', fontSize: 24),
              ),
              Text(
                'Bu Roboto Bold fontudur.',
                style: TextStyle(
                  fontFamily: 'Roboto',
                  fontWeight: FontWeight.bold,
                  fontSize: 24,
                ),
              ),
            ],
          ),
        ),
      ),
    );
  }
}

Bu örnekte, Roboto font ailesini kullanarak iki farklı Text widget'ı oluşturduk. İlk Text widget'ı Regular fontu kullanırken, ikinci Text widget'ı Bold fontu kullanıyor.

4. Google Fonts Paketini Kullanma

Eğer Google Fonts kullanmak isterseniz, google_fonts paketini projenize ekleyebilirsiniz. pubspec.yaml dosyanıza şu satırı ekleyin:

dependencies:
  google_fonts: ^4.0.0

Daha sonra, google_fonts paketini import ederek istediğiniz fontu kullanabilirsiniz:

import 'package:flutter/material.dart';
import 'package:google_fonts/google_fonts.dart';

void main() {
  runApp(MyApp());
}

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(
          title: Text('Google Fonts Kullanma'),
        ),
        body: Center(
          child: Text(
            'Bu Google Fonts ile Roboto fontudur.',
            style: GoogleFonts.roboto(fontSize: 24),
          ),
        ),
      ),
    );
  }
}

google_fonts paketi, Google Fonts'ta bulunan tüm fontları kolayca kullanmanıza olanak tanır ve pubspec.yaml dosyasını manuel olarak güncellemenize gerek kalmaz.

Sonuç

Flutter'da özel fontlar eklemek ve kullanmak oldukça basittir. Projenize özgün bir tasarım kazandırmak ve kullanıcı deneyimini iyileştirmek için bu adımları takip edebilirsiniz. İster kendi font dosyalarınızı kullanın, ister Google Fonts paketini tercih edin, uygulamanızın görünümünü dilediğiniz gibi özelleştirebilirsiniz.