Flutter’da Dinamik Tema Oluşturmak
Blogun tamamına ücretsiz bir şekilde kişisel blogumdan ulaşabilirsin.
Flutter’da çok pratik ve hızlı bir şekilde mobil uygulamalar oluşturabiliyoruz. Aynı zamanda Flutter uygulamamız için dinamik temalar oluşturmak da bir bu kadar kolay. MaterialApp widget’ın içinde koyu ve açık renk temalar için renk paleti belirleyebilirsiniz. Ayrıca uygulamanızın bazı kısımlarında Theme widget kullanarak temayı özelleştirebilirsiniz.
Bununla birlikte, uygulamanızı geliştirirken kendi özel temanızı uygulamak isteyebilirsiniz. Flutter’da bulunan yerleşik tema, daha gelişmiş Flutter projeleri için yeterli gereksinimleri sağlayamayabilir.
Diyelim ki uygulamanızın bir bölümünde çok fazla metin kutusu (textbox) var ve hepsine belirli renkler tanımlamak istiyorsunuz. Flutter’ın yerleşik temasında textboxColor gibi bir alan yoktur. Her renginiz için önceden tanımlanmış başka bir isim kullanmanız gerektiğinden belli bir yerden sonra oldukça kafa karıştırıcı olacaktır. Hangi ismin hangi renge karşılık geldiğini kolayca unutabilirsiniz.
Kendi Temamızı Oluşturalım!
Tema dosyamızı oluşturarak başlayacağız. Daha düzenli olabilmek adına Themes.dart adını vermek işleri kolaylaştırabilir. Biri koyu, biri ise açık olmak üzere 2 adet Class(sınıf) oluşturarak başlayalım. Bu sınıflarda renk paletini belirteceğiz.
Not: Renkleri belirtirken static ve const anahtar kelimelerini kullanmak önemli. Ayrıca her iki classda da değişkenlere aynı isimleri vermeye özen gösterelim. (backgroundColor, textboxColor…) Bu şekilde uygulamamız daha tutarlı çalışacaktır.
class LightTheme { static const backgroundColor = const Color(0xffb0bec5);
static const textboxColor = const Color(0xff4db6ac);
static const textColor = const Color(0xff535353);}class DarkTheme { static const backgroundColor = const Color(0xff37474f);
static const textboxColor = const Color(0xff00695c);
static const textColor = const Color(0xffbdbdbd);}
Uygulamanın Genelinden Temaya Erişim Sağlamak
Şimdi, hazırladığımız temayı dinamik hale getirelim! Aynı dosya içinde Themes adında farklı bir class oluşturacağız. Platformun seçilen temasının açık mı yoksa koyu mu olduğunu bize söyleyen bir alıcı(getter) belirtiyoruz. Bu işlemi yapabilmemizi mümkün kılan harika bir paket halihazırda mevcut. Normalde Flutter’da context’e ulaşmak için MediaQuery, FocusScope ya da Navigator kullanırız. Get, içeriğe(context) geçmeye gerek kalmadan hepsine erişmemizi sağlar, bu nedenle özel temalardaki ihtiyaçlarımız için mükemmeldir.
Get’i kullanabilmek için pubspec.yaml dosyanızın ilgili kısmına get: ^3.4.6 (veya seçtiğiniz farklı bir sürümü) eklemeniz gerekir. Ayrıca aktarmak istediğiniz dosyayı aktarmayı unutmayın.
ÖNEMLİ: MaterialApp widget’ınızı GetMaterialApp ile değiştirmeyi unutmayın. Aksi takdirde Get düzgün çalışamaz.
class Themes {
static bool get isDarkTheme =>
Get.mediaQuery.platformBrightness == Brightness.dark;
...}
Neredeyse sona yaklaştık! Şimdi tüm adımları bir araya getirelim ve Themes sınıfında renkler için getters (alıcılar) yazalım.
class Themes { ...
/// Used for backgrounds
static Color get backgroundColor =>
isDarkTheme
? DarkTheme.backgroundColor
: LightTheme.backgroundColor; /// Used for all the textboxes
static Color get textboxColor =>
isDarkTheme
? DarkTheme.textboxColor
: LightTheme.textboxColor; /// Used for all the texts
static Color get textColor =>
isDarkTheme(context)
? DarkTheme.textColor
: LightTheme.textColor;}
Artık kodunuzda, tüm renklere Themes sınıfı aracılığıyla erişebilirsiniz, örneğin:
Themes.textboxColor;İşte bu kadar! Sadece bir kaç satır kodla kendi temamızı oluşturduk. Cihazın temasını ayarlardan değiştirmeyi deneyebilir, buna göre renklerin nasıl değiştiğini deneyimleyebilirsiniz.
Kodun tamamı için:
import 'package:flutter/material.dart';
import 'package:get/get.dart';class Themes {
static bool get isDarkTheme =>
Get.mediaQuery.platformBrightness == Brightness.dark; /// Used for backgrounds
static Color get backgroundColor =>
isDarkTheme
? DarkTheme.backgroundColor
: LightTheme.backgroundColor; /// Used for all the textboxes
static Color get textboxColor =>
isDarkTheme
? DarkTheme.textboxColor
: LightTheme.textboxColor; /// Used for all the texts
static Color get textColor =>
isDarkTheme(context)
? DarkTheme.textColor
: LightTheme.textColor;}class LightTheme { static const backgroundColor = const Color(0xffb0bec5);
static const textboxColor = const Color(0xff4db6ac);
static const textColor = const Color(0xff535353);}class DarkTheme { static const backgroundColor = const Color(0xff37474f);
static const textboxColor = const Color(0xff00695c);
static const textColor = const Color(0xffbdbdbd);}
Kaynak kodlarına ulaşmak ve minik bir demo için ilgili repo.
Makaleyi orijinal dilinde okumak için tıkla.
