Flutter Architecture

Projelerinizde kullanabileceğiniz flutter mimarisi. [ Update: 05.01.2022 ]

"lib" klasörünü projenizin lib klasörü ile değiştirerek kullanabilirsiniz. Projenizde kullanılmayacak klasörleri silebilirsiniz.

C# katman mimarisinden esinlenilerek yapılmıştır.

NOT: Gerekli kütüphaneler yüklü değilse hata alabilirsiniz.

Kullanılan kütüphaneler:

• API Service
  • http
  • dio
• Widgets
  • animator
  • another_flushbar
• Other
  • shared_preferences:
  • intl:
  • mask_text_input_formatter:
  • flutter_svg:

Mimari

İş Katmanı ( business )

• constants: Projede kullanılacak sabitler burada tutulur. Bunlar renk, icon, resim, yazı, yazı formatı gibi alanlar olabilir.

• helpers: Kodlama yaparken bize yardımcı olacak kodlar burada tutulur.

• managers: Bazı servislerin bir yerden yönetilmesi gerekir yönetici sınıfları burada tutulur.

• services: Api istekleri (signIn, signOut, accountGet vs.) burada tutulur.

• state_managements: Flutter da kullandığımız durum yöneticileri burada tutulur.

UI Katmanı ( ui )

• screens: Tasarlanan uygulama ekranları burada tutulur.

• widgets/custom_widgets: Projeden bağımsız olarak oluşturulan widgetlar burada tutulur.

• widgets/project_widgets: Projeye özgü widgetlar burada tutulur.

Çekirdek Katman ( core )

• Bu katman projeden bağımsız olarak çalışan kodlar içerir.

• Bu katmanı dışarıdan entegre edebilirsiniz.

Model Katmanı ( models )

• Projede kullanılacak modeller burada tutulur.

Export Katmanı ( exports )

• import ettiğimiz sınıfları toplu bir halde tutmamızı sağlar.

Ekran Tasarımı

Ekran tasarımı 3 ana bileşen üzerine kurulmuştur. Bu bileşenler tek bir 'dart' dosyası içinde 3 ayrı sınıftan oluşur. Örnek olarak Home ekranını inceleyebilirsiniz.

• Veri Sınıfı ( _ScreenData ):

  Tasarladığınız ekranda bir veri işlemi varsa (input, dropdown vs.) bu sınıf kullanılır. Ekran açıldığında bu sınıftan bir obje oluşturulur ve gerekli ise doldurulur. Yapılan veri değişiklikleri bu sınıf üzerinden yapılır. Bu şekilde kaydedilmediği sürece o ekranda olanlar o ekranda kalır.

• Widget Sınıfı ( _ScreenWidgets ):

  Ekran için tasarlanan widgetlar bu sınıf altında bir metot olarak tutulur.

• Ana Sınıf ( . . . Screen ):

  Bu sınıf ana sınıfımız olacak. Bu sınıfta widget sınıfında hazırladığımız widgetları yerleştireceğiz, konumlarını ayarlayacağız, widgetlar arası boşluklar vereceğiz.

Sonuç olarak widget sınıfında widgetlarımızı ayrı ayrı tasarlayıp, ana sınıfımızda bu widgetları sadece konumlandıracağız. Bu şekilde konum bazlı bir revizeyi ana sınıfta, widget bazlı bir revizeyi widget sınıfında bulup yapabiliriz.

State Managements

Kişisel olarak 'Stateful' yerine 'Stateless' kullanıyorum. Ekranda yapılan kalıcı olmayan anlık değişiklikler (butonu duruma göre değiştirmek vs.) için 'ValueNotifier', anlık olarak ekrana yansıyacak veri değişiklikleri (profil ismi, profil resmi vs.) için 'Bloc' kullanmayı tercih ediyorum.