Flutter| Özel Widget Tasarımında Super Constructor Kullanmak(Flutter 3.0'ın yeni özelliği)

Emre Ugur Yalcin
2 min readJun 16, 2022

--

Flutter 3.0

Herkese merhaba 👋 . Yaklaşık 3 yıldır flutter yazan biri olarak bundan sonra sizlerle beraber olacağım. 🙂

Giriş

Flutter 3.0 Dart 2.17 ile birlikte 5 mayıs 2022'de yayınlandı. Tabi bu yeni sürüm beraberinde bazı güzel değişiklikleri de getirdi. Bunlardan biri de constructor yazarken işimizi oldukça kolaylaştıracak ve kodu daha da kısaltacak olan “Super Constructor” özelliği. Gelin hep beraber özel widget tasarlayarak bu yeni özelliğin nasıl kullanılacağına bakalım:

Implementasyon

Özel widget oluştururken temiz kod yazmaya özen göstereceğiz. Burada önemli olan kısım Dart 2.17 ile gelen “Super Constructor” ın nasıl kullanılacağı.

1. Basit Bir Örnek

Super constructorın aşağıdaki örnek ile kodu nasıl kısalttığını görelim :

2.Base Widget Oluşturma

Artık kendi custom widgetımızı oluşturup bu yeni özelliği kullanalım.

Google button oluştururken bu base widgetı kullanacağız

3. Google Button

Google butonunu SocialButtons widgetından oluşturacağız. Tabi ki super constructor kullanarak :

Eski yönteme bakacak olursak:

Aslında olay bu kadar basit :)

4. Social Buttons

Burada oluşturacağımız Google butonunu Social Buttons widgetının constructorı olarak yazacağız. SocialButtons sınıfı BaseBody widgetından türetilecek.

Öncelikle super constructorın nasıl kullanıldığını görelim :

Base’den gelen constructor parametrelerini artık doğrudan yeni türettiğimiz widgetin constructorına koyabiliyoruz. Bu da bize daha az kod yazarak aynı işi yaptırıyor.

Eski usulde şu şekilde yapıyorduk :

Yukarıda da görüldüğü gibi eski usulde fazladan kod yazmaktayız. Burada sadece bir tane widget türettik fakat türetilen widget sayısı arttıkça “Super Constructor”ın kod yazmayı ne kadar azalttığı daha net görülmüş olacak.

Tüm kodu da paylaşayım ki akıllarda soru işareti kalmasın :

5. SubmitButton

SocialButtons widgetının body() kısmında SubmitButton widgeti görmüştük. Tabi bu widgetin da ne olduğunu paylaşmadan olmaz:

6. Test Aşaması

Butonumuzu oluşturduk. Şimdi bunu projede nasıl kullanacağımızı görelim:

Google Buton Testi

Sonuç

Flutter 3.0'a Dart 2.17 ile gelen Super Constructor özelliği işimizi oldukça kolaylaştıracak. Siz de projelerinizde bu özelliği kullanarak yazdığınız kodu kısaltabilirsiniz.

Herkese keyifli Flutter’li haftalar dilerim :)

Referanslar

--

--