Bugün ki yazımızda Flutter'da kavranması en önemli iki mantığın kesişimi alan iki kavramdan bahsedeceğiz. Bu iki mantık Widget ve State. Ve buna bağlı kavramlarda başlığımızdan anlaşılacağı üzere Stateless Widget ve Statefull Widget kavramları olacak. 

 

Öncelikle Widget mantığından biraz bahsetmemiz gerek. Eğer kodlama yapan biriyseniz tasarımlarınızın herhangi bir noktasında mutlaka Component kavramıyla karşılaşmışsınızdır. Componentler ya da buradaki ismiyle Widgetlar bizlere tasarımsal bir görüntü içerisinde elde etmek istediğimiz her türlü verinin, görüntünün sunulmasını sağlarlar. Bize çizdirilecek bir yapının sunulmasını ve hazırlanmasını sağlarlar. 

Flutter'da ki Widget kavramı ve mantığı her şey demektir. Tüm düzen birbirini saran widgetlar üzerinden ilerler ve tasarımdaki hiyerarşi bu şekilde takip edilmiş olur. Yukarıdaki resimden de anlayabileceğimiz gibi bu widget yapısı türüne göre ikiye ayrılır. 

State mantığı ise tam olarak tür meselesinde olaya girer. Bir internet sitesi kurulumunda gelecek, geçmiş ya da şu andaki durumları JavaScript komutlarıyla kontrol edebiliriz. Ancak o an çağrılacak olan değil de zaten çağrılmış olması gereken durumların toplandığı mobil tasarımda, State yönetimi biraz daha dikkat ve mantık gerektiren bir iş olmuştur. 

Bu state yönetiminden widgetları haberdar etmek için widgetlarımızı, statei değiştirebilecek ya da state yapısına bir katkısı olmayacak şekilde ikiye ayırırız. Bu aynı zamanda uygulamanın çizdirildiği durumda harcanan zamana da katkı sağlamış olur. Şöyle ki Statefull Widgetlar yani state olayına katkıda bulunmak üzere programlanmış tüm widgetlar, bir işin değişmiş olma olasılığına karşılık her state durumunda tekrar tekrar çizdirilirler. Bu da zamandan kayıp sağlamış olur. 

Ancak Stateless Widgetlar'ın state olayına herhangi bir etkisi olmadığı için çoktan çizdirilmiş halleri kullanılır. Her yenilemede tekrar çizdirilmesine gerek kalmaz ve bu aslında uygulamamıza tahmin ettiğimizden daha çok katkı sağlamış olur. Çünkü Flutter iyi çizdirme yeteneğine sahip bir platformdur. Görsel ve mantıksal olarak gerçekten çalışılmış bir tasarım sunmamıza yardımcı olur. 

Şimdi tam olarak State durumu nasıl Widgetlarımızı etkiliyor onlara görsel açıklamalarla göz atalım. 

 

Yukarıdaki görsele göre Stateless Widgetlarımız yani state durumuyla herhangi bir alakası olmayan herhangi bir yapımız constructor ile sadece build edilir. Çizdirilir ve biter. Hemen yanındaki Stateful Widgetta ise constructor yani yapıcı çalıştırıldığında bir state durumu yaratılır. Yani çizdirilen her BuildContext (İçeriğin build edilmesi)'te bir createState fonksiyonu çalışır ve state durumu başka yerlerde kontrol altına alınıp, değişimlere göre gereken işlemler gerçekleştirilir. 

Şimdi daha açıklayıcı bir görsele bakalım; 

 

 

Buradaki görselde ise Stateless kısmında girilen bir datanın widget sayesinde direkt UI yani arayüze renderlanıp, çizdirilmesi belirtilmiş. Ve yeniden tamamen bir render durumu olmadığı sürece de girilen datada herhangi bir değişiklik olmadığına dikkat çekilmiş. 

Yani Stateless widget içerisinde var olan data da değişiklik yaparsak ve tüm uygulamanın yeniden çizdirilmesini istediğimizde o widget tekrar çizdirilebilir. Ancak aksi durumda çizdirme ya da datada herhangi bir değişiklik olmaz. 

Stateful durumunda ise widget bir state'e dahil olmuştur. Yani uygulamada tekrar çizdirilip, yapılması gereken olayları tetikleyecek duruma dahil olduğu için Stateful Widget içindeki datalar state değişikliğinde de değiştirilebilirler. Aynı şekilde içerisindeki değerin tamamen değiştirilmesi ve uygulamanın en baştan renderlanması ile de datasında değişiklik olabilir. 

Flutter'da state yönetimi sanıldığından çok daha detaylı ve uzun bir konu olduğu için ilerleyen yazılarımızda tercih edilen State Yönetim şekillerine ve bu durum için Flutterda gerçekleştiren geliştirmelere göz atmaya devam edeceğiz. 

Bizi takip etmeye devam edin!