Podit
Bu içerik bir YouTube videosundan üretilmiştir.
📚 Flutter'da Özel Font ve Google Fonts Kullanımı
Mobil uygulama geliştirirken, uygulamanın görsel kimliği ve kullanıcı deneyimi için doğru font seçimi büyük önem taşır. Fontlar, uygulamanızın karakterini yansıtır ve metinlerin kullanıcılar tarafından nasıl algılandığını doğrudan etkiler. Flutter, bu konuda hem manuel olarak kendi fontlarımızı ekleme hem de Google Fonts gibi popüler kütüphaneleri kolayca kullanma imkanı sunar. Bu çalışma materyalinde, Flutter projelerine nasıl özel fontlar ekleneceğini ve Google Fonts paketinin nasıl kullanılacağını adım adım öğreneceğiz.
1️⃣ Manuel Olarak Özel Font Ekleme
Kendi özel fontlarınızı Flutter projenize dahil etmek, birkaç basit adımdan oluşan bir süreçtir. Bu yöntem, fontlar üzerinde tam kontrol sağlamak istediğinizde tercih edilir.
✅ Adım 1: Klasör Yapısı Oluşturma
Projenizin ana dizininde genellikle assets adında bir klasör oluşturmanız gerekir. Bu klasörün içine de fonts adında başka bir klasör açabilirsiniz. Font dosyalarınızı (genellikle .ttf veya .otf uzantılı) bu assets/fonts klasörüne kopyalayın.
💡 Örnek:
your_project_root/
├── assets/
│ └── fonts/
│ ├── MyFont-Regular.ttf
│ └── MyFont-Bold.ttf
└── pubspec.yaml
✅ Adım 2: pubspec.yaml Dosyasını Düzenleme
Projenizin kalbi diyebileceğimiz pubspec.yaml dosyasına gidin. Bu dosyada flutter: anahtarının altına fonts: bölümünü eklemelisiniz. Her bir font ailesi için bir giriş yapmanız gerekmektedir.
family: Font ailesinin adını belirtir (örneğin, 'MyFont').asset: Font dosyasının yolunu belirtir.weight(isteğe bağlı): Fontun kalınlığını (kalınlık değerleri 100'den 900'e kadar değişir, 400 normal, 700 kalın) belirtir.style(isteğe bağlı): Fontun stilini (örneğin,italic) belirtir.
flutter:
uses-material-design: true
# Fontları buraya ekleyin
fonts:
- family: MyFont # Font ailesinin adı
fonts:
- asset: assets/fonts/MyFont-Regular.ttf # Normal stil font dosyası
weight: 400 # Normal kalınlık
- asset: assets/fonts/MyFont-Bold.ttf # Kalın stil font dosyası
weight: 700 # Kalın kalınlık
⚠️ Önemli Not: pubspec.yaml dosyasında girinti (indentation) çok önemlidir. Yanlış girintiler hatalara yol açabilir.
✅ Adım 3: Paketleri Alma
Bu tanımlamaları yaptıktan sonra, terminalde flutter pub get komutunu çalıştırmayı unutmayın. Bu komut, Flutter'ın yeni eklenen kaynakları tanımasını sağlar.
✅ Adım 4: Fontu Kullanma
Uygulamanızın herhangi bir yerinde bu fontu kullanmak istediğinizde, TextStyle widget'ının fontFamily özelliğine pubspec.yaml dosyasında tanımladığınız font ailesinin adını (örneğimizde 'MyFont') yazmanız yeterli olacaktır.
💡 Örnek Kullanım:
Text(
'Merhaba Dünya!',
style: TextStyle(
fontFamily: 'MyFont', // Tanımladığınız font ailesi adı
fontSize: 24,
fontWeight: FontWeight.bold, // pubspec.yaml'da tanımlanan weight ile eşleşir
),
)
2️⃣ Google Fonts Paketini Kullanarak Font Ekleme
Google Fonts'un zengin kütüphanesinden faydalanmak çok daha kolay bir yöntemdir. Flutter için geliştirilmiş google_fonts paketi sayesinde, binlerce ücretsiz Google fontunu projenize saniyeler içinde ekleyebilirsiniz.
✅ Adım 1: Paketi Ekleme
Yine pubspec.yaml dosyasına gidip dependencies bölümünün altına google_fonts: ^latest_version şeklinde paketi eklemelisiniz. ^latest_version yerine paketin en güncel sürüm numarasını yazmayı unutmayın. En güncel sürümü pub.dev adresinden kontrol edebilirsiniz.
dependencies:
flutter:
sdk: flutter
google_fonts: ^latest_version # Google Fonts paketi
✅ Adım 2: Paketleri Alma
Ardından, yine terminalde flutter pub get komutunu çalıştırarak paketi projenize dahil edin.
✅ Adım 3: Fontu Kullanma
Bu paketi kullanmanın en büyük avantajı, font dosyalarını manuel olarak indirip projenize eklemekle uğraşmak zorunda kalmamanızdır. Paket, fontları otomatik olarak yönetir.
- İçe Aktarma: Uygulamanızın herhangi bir yerinde
import 'package:google_fonts/google_fonts.dart';satırını ekleyin. - Kullanım:
TextStyleyerine doğrudanGoogleFontssınıfını kullanabilirsiniz. Örneğin,GoogleFonts.roboto()veyaGoogleFonts.openSans()gibi metotlarla istediğiniz fontu çağırabilir ve bu metotlarafontSize,colorgibi diğerTextStyleözelliklerini de parametre olarak geçirebilirsiniz.
💡 Örnek Kullanım:
import 'package:google_fonts/google_fonts.dart';
import 'package:flutter/material.dart';
Text(
'Merhaba Google Fonts!',
style: GoogleFonts.roboto( // Roboto fontunu kullan
fontSize: 28,
color: Colors.blue,
fontWeight: FontWeight.w700,
),
)
📈 Mevcut Tema Stillerini Özelleştirme
GoogleFonts paketi, mevcut tema metin stillerini de kolayca özelleştirmenize olanak tanır.
💡 Örnek:
Text(
'Başlık Metni',
style: GoogleFonts.lato(
textStyle: Theme.of(context).textTheme.headlineMedium, // Mevcut tema başlık stilini kullan
color: Colors.purple, // Rengi özelleştir
),
)
🚀 Google Fonts Paketinin Avantajları:
- Kolaylık: Font dosyalarını manuel olarak indirip yönetme derdi yok.
- Otomatik Yönetim: Paket, fontları otomatik olarak indirir ve önbelleğe alır.
- Zaman Tasarrufu: Hızlı entegrasyon sayesinde geliştirme süresini kısaltır.
- Uygulama Boyutu: Fontlar sadece ihtiyaç duyulduğunda indirildiği için uygulamanın boyutunu gereksiz yere artırmaz.
🎯 Sonuç ve Özet
Bugün Flutter projelerinde özel fontları nasıl kullanabileceğimizi detaylıca öğrendik.
- Manuel Yöntem: Kendi tasarladığınız veya edindiğiniz bir fontu projenize eklemek için daha fazla kontrol sağlar. Klasör yapısı oluşturma,
pubspec.yamldüzenleme veflutter pub getkomutunu çalıştırma adımlarını içerir. - Google Fonts Paketi: Google Fonts'un geniş kütüphanesinden faydalanmak için hızlı ve kolay bir çözümdür.
pubspec.yaml'a paketi ekleyipGoogleFontssınıfını doğrudan kullanmanızı sağlar.
Her iki yöntem de uygulamanızın görsel kimliğini zenginleştirme ve kullanıcı deneyimini iyileştirme fırsatı sunar. Hangi yöntemi seçeceğiniz, projenizin ihtiyaçlarına ve kişisel tercihlerinize bağlıdır. Unutmayın, doğru font seçimi, uygulamanızın profesyonel görünümünü ve okunabilirliğini doğrudan etkiler. Bu bilgileri kendi projelerinizde deneyerek pekiştirmeyi unutmayın!
