Dostlar selam. Ben Mehmet, nam-ı diğer bikodist. Öncelikle Türkiye’mizi derinden sarsan deprem felaketinde vefat eden herkese Allah’tan rahmet, yakınlarını kaybedenlere başsağlığı diliyorum. Yaralananlara ise geçmiş olsun dileklerimi iletiyorum… İnşallah bu zor günleri hep birlikte atlatacağız. Makaleyi daha önce paylaşmak isterdim fakat tam paylaşacağım gün deprem olduğundan dolayı içimden paylaşmak gelmedi, şimdi paylaşmak nasip oldu.
Bu makalede Flutter ile geliştirdiğim projelerde kullandığım klasör yapısını sizlere elimden geldiğince anlatmaya çalışacağım, hem ne demişler:
Bir yazılım geliştiricinin düzeyi yazdığı koddan ve düzeninden anlaşılır.
Böyle bi’ söz yok aslında, ben uydurdum.
Klasör Yapısı
Klasör yapısı, projemizin bel kemiğidir. Gelişmeye açık bir proje yazabilmemiz için klasör yapısını mümkün olduğunca temiz, açık, anlaşılabilir yani “clean” tutmamız gerekir.
Öncelikle Flutter bize böyle bir klasör yapısı veriyor. Bizim en çok ilgileneceğimiz klasör ve dosyalar ise lib, assets (bunu kendimiz ekleriz), ios, android klasörleri ve pubspec.yaml dosyasıdır. Şimdi her klasörü tek tek açıklardım fakat konumuz bu değil. (Eğer sorarsanız söylerim ama :P)
Bizim bu makaledeki gözdemizzz…. Oradaki “lib” klasörü olacak. Hemen bi’ o klasöre göz atalım madem.
Gördüğünüz gibi, lib klasörü içinde sadece main.dart dosyası geliyor. Eğer biz burda güzel bi’ klasör yapısı kurmazsak proje basit de olsa, ileri seviye de olsa işimiz illaki zorlaşacaktır. Bütün dosyalarımızı direkt lib klasörü altına koyarsak vah halimize… Şimdi de geliştirdiğim güncel bir projenin klasör yapısını göstermek istiyorum.
Gelin şu kavramlara biraz değinelim.
Controllers: Bu klasörde projemizde kullandığımız state management dosyaları mevcut olur.
Models: Bu klasörde projemizde kullandığımız, servisten gelen objelerin model yapısının bulunduğu dosyalar mevcut olur.
Services: Bu klasörde projemizde kullandığımız servislerin dosyaları mevcut olur. HttpService, DatabaseService, NotificationService gibi…
Utils: Bu klasörde projemizde sıkça kullandığımız ufak tefek fonksiyonların bulunduğu dosyalar mevcut olur.
Views: Bu klasörde projemizdeki ekranların yani sayfaların bulunduğu dosyalar mevcut olur.
Widgets: Bu klasörde projemizdeki sayfalarda kullandığımız genel widget kodları mevcut olur.
O zaman hadi bir de bu klasörlerin içeriklerine bakalım.
Controllers
Genelde her bir ana nitelikteki sayfa için controller oluşturulmalı diye düşünüyorum. Yan sayfalar için ise hangi ana nitelikteki sayfanınsa o sayfanın controller’ında işlemler olmalıdır.
Ana nitelikteki sayfalar şunlar olabilir: HomeView, ContactView, LocationView, ChatsView, ProfileView…
Yan sayfalar şunlar olabilir: UpdateUsernameView, UpdatePasswordView…
Örneğin burada kullanıcı adı ve şifre güncelleme işlemlerini ProfileView’ın controller’ında tutabiliriz.
Models
Bu klasörü çok detaylandırmaya gerek yok sanırım, servisten gelen objeleri modele dönüştürdüğümüz kodlar mevcut.
Services
Bu projede demek ki çok detaylı servislere girmemişim :D Projede kullanacağımız bütün servisleri ayrı ayrı dosyalarda tutmak çok kolaylaştırır işimizi. Örneğin internetten veri çekeceksek HttpService, kullanıcının konumuyla ilgileneceksek LocationService, bildirim işlerini ise NotificationService gibi gibi.
Utils
Proeje genelinde sıkça kullandığımız fonksiyonları bu şekilde ayrı dosyalarda tutmak çok iyi olay.
Hatta size şöyle bir trick vereyim. Utils klasörünü sadece 1 kere oluşturdum ve artık bütün projelerime aynı kodları ekliyorum :P Tabii sadece gerekli gördüğüm fonksiyonları alıyorum. Kod israfına gerek yok.
Views
Bu klasörde ise ana nitelikteki sayfanın birden fazla yan sayfası varsa onlarla birlikte bir klasör içine koyabiliriz, bu şekilde fazlalığın ve dağınıklığın önüne geçmiş oluruz.
Widgets
Bu klasörde de views klasöründeki gibi aynı sayfada kullanılan widget’ları bir klasörde toplayabiliriz.
Klasör yapısı hakkında bir de şöyle bir şey söylemek istiyorum. Dosya isimlendirmelerinde “Snake case” yapısını öneriyorum. Bu ne diye sorarsanız, dosya isimlendirmelerinde kullandığım “_” işaretiyle kelimeleri ayırmaktır. Yani Eğer InputWidget’ımız varsa onun dosya ismini “input_widget” şeklinde koyabiliriz.
Ayrıca dosya isimlerinde fark ettiyseniz “_controller”, “_model”, “_service”, “_view” ve “_widget” isimlendirmeleri var. Yani dosyanın ne olduğunu da isminin sonuna ekliyorum ki çok daha açık olsun. Kesinlikle size de öneririm ^^
Makaleyi okuduğunuz için teşekkür ediyorum. Umarım sizlere Flutter’daki klasör yapısına değinerek bir fayda sağlayabilmişimdir. Bu konuda aklınıza takılan bütün sorularınızı bana sorabilirsiniz.
Son olarak ufak bi’ reklamm.
Kişisel Sitem: https://konukcu.dev/
GitHub Profilim: https://github.com/mehmetext
Bikodist Instagram Sayfam: https://www.instagram.com/bikodist
LinkedIn Profilim: https://www.linkedin.com/in/mehmetkonukcu
