Flutter’da Dinamik Tema Oluşturmak

Image for post
Image for post

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.

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.

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.

Artık kodunuzda, tüm renklere Themes sınıfı aracılığıyla erişebilirsiniz, örneğin:

İş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:

Kaynak kodlarına ulaşmak ve minik bir demo için ilgili repo.

Makaleyi orijinal dilinde okumak için tıkla.

Developer Student Clubs mentöru olarak, Flutter ile ilgili her türlü teknik ya da teknik olmayan konuda elimden geldiğince sizlere yardımcı olmaya çalışırım. Keyifli kodlamalar! 🥂
Görüş, tavsiye ve sorularınız için bana ulaşabilirsiniz!
Twitter | LinkedIn | Instagram

Google Developer Student Clubs

Developer Student Clubs are university based community groups for students interested in technology.

Doğancan Mavideniz

Written by

mavideniz.org

Google Developer Student Clubs

Developer Student Clubs are university based community groups for students interested in Google developer technologies. Students from all undergraduate or graduate programs with an interest in growing as a developer are welcome.

Doğancan Mavideniz

Written by

mavideniz.org

Google Developer Student Clubs

Developer Student Clubs are university based community groups for students interested in Google developer technologies. Students from all undergraduate or graduate programs with an interest in growing as a developer are welcome.

Medium is an open platform where 170 million readers come to find insightful and dynamic thinking. Here, expert and undiscovered voices alike dive into the heart of any topic and bring new ideas to the surface. Learn more

Follow the writers, publications, and topics that matter to you, and you’ll see them on your homepage and in your inbox. Explore

If you have a story to tell, knowledge to share, or a perspective to offer — welcome home. It’s easy and free to post your thinking on any topic. Write on Medium

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store