Flutter: Clean Code
Tekrardan merhabalar,
Yeni yazıma başlamadan önce, bir önceki yazıma göstermiş olduğunuz ilgi, güzel yorumlarınız ve dilekleriniz için hepinize teşekkür ederim.
Bu yazıyı başımdan geçen bir olaydan sonra yazmaya karar verdim. Kısaca bu olaydan bahsetmek istiyorum. Kendimi geliştirmek amacıyla tasarımını yaptığım “Todo” projesine başladım. Başıma daha önceden hesaplamadığım bir olay geldi. Kodları yazmaya başladım. İlk gün her şey güzel kod anlaşılıyor. İkinci gün her şey yerli yerinde fakat biraz karışmaya başladı sanki? derken bir vakit sonra hangi kodun nerede olduğunu bulmakta zorlanmaya başladım. Aslında öğrenme aşamasında olduğum için bu tür durumların doğal olarak karşılandığını düşünüyorum. Ben de araştırmaya ve öğrenmeye başladım. Öğrendiklerimi derleyip, az da olsa kendi birikimlerimi aktarmak istedim.
Dribbble veya Behance hesaplarımdan diğer tasarımlarıma göz atabilirsiniz.
Clean Code hakkında detaylı bilgi için göz atabilirsiniz.
Bu yazımda
- Proje klasör yapısından
- Custom Style, Widget, Theme ve Helper
- Kötü yazılmış kodu iyi bir koda dönüştürmek
konu başlıklarından bahsedeceğim.
Proje Klasör Yapısı
Başta bahsettiğim gibi projeler zamanla kompleks hale geliyor ve bunları yönetmek zor hale dönüşebiliyor. Koda bakım yapılmak istediğinde, zaman maliyeti çok önemlidir. Kompleks bir yapı size çok fazla vakit kaybettirebilir. Yeni bir feature’ı (özelliği) kolay bir şekilde entegre edebiliyor olmamız gerekir.
Bu metotlardan birisi de “Project Folder Structure” yani “Proje Klasör Yapısı”nın belli bir düzene sahip olmasıdır.
Bu klasör yapısını ve diğer çalışmalarımı GitHub hesabımda bulabilirsiniz. GitHub hesabım için buraya tıklayınız.
- assets : Harici olarak eklemek istediğiniz dosyaları bu klasöre ekleyebilirsiniz. Dosya türüne göre alt klasörler oluşturabilirsiniz. Bu şekilde daha sade ve doğru kullanım olur. Alt klasörlerle birlikte daha organize bir hale getirebilirsiniz:
fonts : Harici yazı tiplerini bu klasöre ekleyebilirsiniz.
images : Harici fotoğraflarınızı bu klasöre ekleyebilirsiniz.
other : Eklemek istediğiniz diğer harici dosyalarınızı bu klasöre ekleyebilirsiniz.
- auth : Doğrulama işlemlerinin yapılacağı dosyaları barındıran klasördür. Doğrulamaya örnek vermek gerekirse : Giriş Yap, Kayıt Ol, Şifremi Unuttum, Biyometrik Doğrulama ( Parmak İzi vb.)
- models : Veri modellerini barındıran klasördür.
- screens : Uygulamada bulunan ekranları barındıran klasördür. Alt klasör oluşturarak daha düzenli hale getirebilirsiniz.
- services : Doğrulama, veri ve arka planda çalışacak olan servisleri barındıran klasördür. Örnek olarak hava durumunun bulunduğu servis ve harita servisini gösterebiliriz.
- ui : Tasarımlarınızı alt klasörlerle birlikte daha organize bir hale getirebilirsiniz.
helper : Tasarımda kullanacağınız renkleri ve yazıları bu klasöre ekleyebilirsiniz.
styles : Tasarımda kullanacağınız stilleri bu klasöre ekleyebilirsiniz.
theme : Tasarımda kullanacağınız temaları bu klasöre ekleyebilirsiniz.
widgets : Tasarımda kullanacağınız “custom widget”ları klasöre ekleyebilirsiniz.
Önceki yazımdan hatırlayacağınız üzere UI çok fazla üzerinde durduğum konudur. Çünkü “Tasarımınız ne kadar güzel olursa çalışmanız o kadar kaliteli olur.”
Stillerinizi, widget’larınızı ve temanızı kendiniz oluşturabilirsiniz. Böylece ilerde kullanmak istediğiniz zaman hem kolaylık sağlar hemde bir değişiklik yapmak istediğiniz zaman tek bir değişim ile tüm uygulamayı re-design yapabilirsiniz.
Custom Style
Custom Widget
İki tür custom widget oluşturabilirsiniz. Birincisi, parametre almayan widget :
İkincisi ise parametre alan widget :
Custom Theme
Temada çok fazla property olduğu için ben temel olanları göstermek istedim. Daha fazlası için buraya tıklayın.
Custom Helper
Faydalı yönlerini şu şekilde sıralayabiliriz :
- Veri tekrarından kaçınmak
- Kolay erişim
- Birden fazla kullanım
- Clean Code
Tekrardan fikir sahibine teşekkürü borç bilirim Veli Bacık.
Kötü Yazılmış Kodu İyi Bir Koda Dönüştürmek
Örnek olarak Dart ile yazılmış kodlar ve bu kodların iyileştirilmiş halleri :
Görüldüğü üzere geliştirici gereksiz yere değişken tanımlamış. Değişkenler yerine parametre olarak gönderilebilirdi.
Burada ise geliştirici koşullu ifadeleri doğru kullanmış fakat kod kalabalığı oluşturmuş. Çözüm olarak “Ternary operatör” kullanılmasından yanayım. Tek satırda bu işlemi daha sade ve daha anlaşılır hale getirebilirdi.
Ternary Operatör : Dart, Java vb dillerde if else koşullarını tek satırda yazmayı sağlıyor.
Kullanımı : değişken= koşul ? doğru_değer: yanlış_değer
Burada ise geliştirici aynı stillere sahip input component’leri kullanarak ileride yapılması olası değişiklerde, tek tek değişiklik yapmasına neden olmuştur. Custom Widget olarak düzenlerseniz ileride yapacağınız tek bir değişiklik kullanılan tüm widget’lara etki edecektir ve böylelikle hızlı bir çözüm sağlayacaktır.
Ve burada bir projenin içerdiği component’leri parçalara ayırıp kodlamak en sağlıklı yöntemdir. Proje içerisinde değiştirmek istediğinizde size zaman kazandıracaktır ve temiz bir görünüm sağlayacaktır.
Örnek olarak göstermek istedim fakat kod 100 satır değilde daha fazla olsaydı durumu az çok tahmin etmişsinizdir :
Yazıyı okumak için zaman ayırdığınız için teşekkürler, umarım faydalı olmuştur.
Desteklerinden ötürü Veli Bacık’a ve Beyza Sunay Güler’e teşekkür ederim.
Ve ayrıca teşekkür ederim:
Bana bu adreslerden ulaşabilirsiniz:
