Sağlamış olduğu birbirinden güzel ara yüz tasarımları, akıcı animasyonları, kullanım kolaylığı, geliştirme hızı ve harika denecek düzeyde sunduğu performans ile mobil uygulama geliştiricilerinin 1 numaralı tercihi olan Flutter, uygulamamıza eklediğimiz metinlere özel font kullanmamıza da izin veriyor. Özel font kullanımı sayesinde birçok geliştirici uygulamalarında yapılmamış olanı deniyor ve bir adım öne geçiyorlar. Peki bu işlem nasıl gerçekleşiyor ? Gelin bir göz atalım.
Adım 1: Bir Font Seçelim
Bu işin ilk adımı tabi ki de girişte de bahsettiğimiz gibi uygulamamıza uygun, okunaklı ve hoşumuza giden bir yazı fontu bulmak. Bunun için birçok olanak mevcut fakat biz Google Fonts üzerinden seçelim. Google Fonts ile birçok font yapısına erişebilir, kolayca indirebilir ve uygulamada kullanabilirsiniz. Biz şimdi uygulamamız için ‘Cinzel’ font ailesini kullanalım. Bunun için ‘Download Family’ seçeneğine tıklayalım ve font dosyamızın inmesini bekleyelim.
Adım 2: Font Dosyasını Uygulama Dosyalarımıza Aktaralım
Font dosyamızı projemize aktarmadan önce proje dosyalarımızda bazı hazırlıklar yapmamız gerekiyor. Bunun için ilk önce proje dosyalarımıza gelip ‘assets’ adında bir klasör oluşturuyoruz. Ardından assets klasörüne bağlı ‘fonts’ adında bir klasör daha oluşturalım. Bilgisayarımıza inmiş olan ‘Cinzel’ font ailesine ait ‘Cinzel-Medium’ klasörünü oluşturmuş olduğumuz ‘fonts’ klasörünün içerisine aktaralım.
Adım 3: Fontumuzu Flutter’a Tanıtalım
Tanıtma işlemi için tıpkı resimlerimizi tanıttığımız gibi pubspec.yaml dosyasını kullanıyoruz. Arasındaki fark bildiğiniz üzere resim tanıtırken assets başlığını kullanırken, tahmin edebileceğiniz gibi font tanıtma işlemi için ise fonts başlığını kullanmak. Başlığı bulduktan sonra önünde bulunan # işaretine imlecimizi yerleştirip 2 kez DEL tuşuna basıyoruz. Ardından bir alt satırında bulunan ‘family’ , ‘fonts’ ve ‘asset’ satırları içinde aynı işlemi uyguluyoruz. Burada dikkat edilmesi gereken nokta pubspec.yaml dosyası için girinti aralıklarının çok önemli olduğu. Eğer bıraktığınız girinti boyutunda herhangi bir hata olursa projeniz hata verebilir.
Bu işlemin ardından sıra ‘family’ kısmına kullanacağımız fontumuzun adını ve ‘asset’ kısmında dosyamızın yolunu belirlemekte. Family kısmına ‘Cinzel’ , Assets kısmına ise ‘assets/fonts/Cinzel-Medium.ttf’ yazalım ve ‘Pub Get’ diyelim. Pubspec.yaml dosyamızın son hali aynen şöyle olur.
fonts:
- family: Cinzel
fonts:
- asset: assets/fonts/Cinzel-Medium.ttfAdım 4: Tanıttığımız Fontu Uygulama İçerisinde Kullanalım
Şimdi main bloğumuza gelelim ve değişmiş olan pubspec.yaml dosyasında oluşturulan özellikleri ‘Get Dependencies’ seçeneğine tıklayarak tanıtma işlemini tamamlayalım. Bu işlemin ardından artık fontumuzu gönül rahatlığıyla kullanabiliriz. Bunun için Text Widget’ ına gelelim. Style özelliğinde bulunan TextStyle Widget’ ının ‘fontFamily’ özelliğini seçelim. Burada pubspec.yaml dosyasında family kısmında belirlediğimiz adı ‘ ’ (tek tırnak) işaretinin içerisine yazalım ve çalıştıralım.
import 'package:flutter/material.dart';
void main() {
runApp(FontDemo());
}
class FontDemo extends StatelessWidget {
const FontDemo({Key? key}) : super(key: key);
@override
Widget build(BuildContext context) {
return MaterialApp(
debugShowCheckedModeBanner: false,
home: Scaffold(
backgroundColor: Colors.black,
body: SafeArea(
child: Center(
child: Column(
mainAxisSize: MainAxisSize.min,
children: [
CircleAvatar(
radius: 90,
backgroundImage: AssetImage('assets/images/logo.jpg'),
),
SizedBox(
height: 5,
),
Text(
'SYNTA-X.COM',
style: TextStyle(
fontFamily: 'Cinzel',
color: Colors.white,
fontSize: 55,
),
),
SizedBox(
height: 10,
),
Text(
'Güncel, Sade ve Anlaşılır!',
style: TextStyle(
color: Colors.white,
fontSize: 30,
),
),
],
),
),
),
),
);
}
}Küçük bir font değişikliği bile yapılan uygulamalarda büyük bir etkiye sebep olabiliyor. Tıpkı burada olduğu gibi. Aslında bu etkiyi Flutter’ ın güzel ve akıcı ara yüz tasarımları oluşturabilme yeteneğine borçluyuz. Peki, Flutter’ ın sahip olduğu bu yetenek günümüz tasarım ilkeleri dikkate alındığında sizce de güzel mi ?
