Popüler Flutter Widget’ları
1. Safe Area:
Yuvarlak kenarlı veya çentikli ekranlar üretilmektedir. Bu widget’ı kullanınca bu farklı ekranlar sebebiyle görüntünün bozulması engellenir. Bu widget ile ekrana bağlı olarak en güvenilir alan tespit edilmekte ve bu alan içerisinde çalışılmasına fırsat tanınmaktadır.
2. Expanded:
Row ve Colum’ların çocuklarından birinin diğerlerinin bıraktığı boşluğu kaplaması için kullanılır. Bunu flex ile yapar.
3. Wrap:
Row ve Colum’ların çocukları ekrana sığmazsa alta veya yana kaydırarak ekranda görünmeye devam etmesini sağlar. Bunun için yatay veya dikey mi kaymasını istediğinizi söylemelisiniz.
4. AnimatedContainer:
Renk, hareket ve şekil verebileceğiniz bir container’dır.
5. Opacity:
Bir widget’ın var olmaya devam etmesi ama gözükmemesi için kullanılır. Böylelikle diğer widget’ların görsel pozisyonu bozulmamış olur. Gerekirse sonra opacity artırılarak o widget yerine getirilebilir.
6. FutureBuilder:
Flutter ve Dart asenkron, yani eş zamanlı olmayarak çalışırlar. Dart’ın Future özelliği ile özellikle veritabanı işlemlerinde asenkron çalışma imkanı elde edebilirsiniz. Böylelikle veritabanı ile iletişim kurarken kilitlenmeler olması konusunda endişe etmenize gerek kalmaz. Çünkü senkron çalışma yapısı özellikle veritabanı işlemlerinde kilitlenmelere sebep olur. Bu da ekranın kilitlenmesine sebep olabileceği için iyi bir kullanıcı deneyimi yaratmaz. Bu sebeple Future özelliği ile asenkron (async) çalışmanızı tavsiye ederiz.
7. FadeTransition:
Bir widget’ın yavaş yavaş ortadan kaybolması veya yavaş yavaş ortaya çıkması için kullanılır. Bir animasyon ile bunu yapar.
8. FloatingActionButton (FAB):
bottomnavigationbar’a gömülme, ortalanma veya kenarda durma özelliği vardır.
9. PageView:
Sayfalar arasında sağa sola veya yukarıdan aşağıya swipe yaparak sayfalar arasında gezinmek için kullanılır.
10. Table:
Widget’ları bir tablo içerisinde tutmak için kullanılır.
11. SliverAppBar:
App Bar’ın header’ının yok olmasını mümkün kılan bir widget’dır. Ayrıca büyüyüp küçülebilen bir resme sahip AppBar’dır.
12. SliverList & SliverGrid:
Scroll ettikçe başlıkların birikmesini sağlar.
13. FadeInImage:
Bir resmin yavaş yavaş görünmeye başlamasını sağlar. Bu arada bir bekleme resmi de gösterilebilir.
14. StreamBuilder:
Streanbuilder, cloud’dan stream olarak gelen eventleri dinler. Eğer o anda bir veri yoksa bir bekleme resmi gösterebilirsiniz. Veri geldiği andan itibaren de gösterilmeye başlar. Bağlantının olmamasını kontrol edebilir veya bir error olup olmadığını kontrol edebilirsiniz. En çok Firebase için kullanılır.
15. InheritedModel:
İki ayrı koldan aynı widget’a bağlı olan iki alt widget arasında veri aktarımının gerçekleştirilmesini sağlar.
16. ClipRRect:
Bir kutunun köşelerinin yuvarlatılması veya keskinleştirilmesi için kullanılır.
17. Hero:
Küçük bir resmin tıklanınca ana resim olarak animasyonlu olarak büyümesini sağlar.
18. CustomPaint:
Özel efektler yapmanızı sağlar. Örneğin, tıklanan noktanın etrafının daire, ark veya çizgi olarak büyümesini sağlar.
19. Tooltip:
Uzun süre basılınca o widget için belirttiğiniz mesaj gözükür. Engellilerin ses ile bu mesajları duyması ve programı kullanabilmesi mümkün olur.
20. FittedBox:
Bir child widget’ın üst widget’ın altında nasıl durması gerektiğini belirler. Üst widget’ın içine en veya boy olarak sığdırılabilir, strech edilebilir. Align ile de kenara yapıştırma söz konusudur.
21. LayoutBuilder:
Farklı büyüklükteki ekrankarda farklı lokasyonlarda widget yerleştirmesi yapmak için kullanılır.
22. AbsorbPointer:
Tüm ekranın tıklanmaya kapanmasını sağlar.
23. Transform:
Çok maharetli bir widget’tır. Widget’ların 3 boyutlu olarak döndürülmesi, büyütülüp küçültülmesi, her yöne kaydırılması, şeklin çarpıtılmasını gerçekleştirir.
24. BackdropFilter:
Resimlerin tamamı veya bir kısmının döndürülmesi, hareket ettirilmesi, çarpıtılması veya blurlu gösterilmesi için kullanılır.
25. Align:
Çocuk widget’ın ana widget’a göre hizalanmasını sağlar. İçinde veya dışında hizalanabilir. Ama pozisyonunu ana widget’a göre alır.
26. Positioned:
Stack’deki widget’ların konumlanmasını sağlar. sağ, sol, üst , alt gibi seçenekleri vardır.
27. AnimatedBuilder:
Birçok widget’ı kullanarak istediğiniz gibi bir animasyon tasarlamanızı sağlar.
28. Dismissible:
Liste’lere ait maddelerin sola veya sağa swipe edilerek yok edilmesini sağlayan widget’tır. Bu widget Listview itemleri için kullanılabilir. Dikey veya yatay swipe için kullanılabilir.
29. SizedBox:
Bir widget’ı pixel değeri ile sabitlenmiş bir boyutta gösterebilmek için sizedbox’ın içine koymanız gerekir. infinity ile kullanıldığında ise dikey veya yatay olarak ekran boyutlarının tamamı kullanılabilir.
30. ValueListenableBuilder:
App’in farklı ekranlarında gösterilen bir verinin her zaman güncel tutulması için kullanılır. ValueNotifier ile beraber kullanılması gerekir. Bu ikisinin kullanımıyla veri değiştiği anda app’in her noktasında güncelleme yapar.
31. Draggable:
Uygulama içinde tutup sürüklenmesi istenen email veya doküman gibi bazı itemlar olabilir. Bu itemların nereden sürüklenmeye başlayacağı ve nereye koyulacağı tanımlanarak bu görsel etki ve bunun sonuçları tanımlanabilir.
32. AnimatedList:
Listelere ekleme veya çıkarılma yapıldığında çeşitli animasyonlarla bunu kullanıcıya göstermek mümkündür.
33. Flexible:
Children’ların her birine boyut için birer değer vererek birbirine nazaran büyüklüklerini tespit edebilirsiniz.
34. MediaQuery:
Mediaquery, Layoutbuilder’dan daha kuvvetli olarak ekran boyutlarını tespit ederek buna uygun işlem yapabilmemizi sağlar. Mediaquery ile aletin dikey veya yataykığını tespit edebiliriz. Ayrıca default font büyüklüğünü de öğrenebiliriz. Parlaklık veya animasyon özelliklerine dair aletten bilgi edinmek de mümkündür.
35. Spacer:
Row ve Column’lar için spacearound, spacebetween gibi standart aralık verme özellikleri vardır. Fakat spacer ile custom bir aralık verme imkanı vardır. Childrenlar arasına flex değerleri ile spacer koyarsanız spacer’daki flex değerleri nispetinde aralık koyar.
36. InheritedWidget:
Widget ağacındaki farklı widgetlar arasında bilgi akışını sağlamak için kullanılır.
37. AnimatedIcon:
Icon’ları animasyonlu bir şekilde kullanmanızı sağlar.
38. AspectRatio:
Bir widget’ın en ve boyunu oransal olarak belirlemenizi sağlar.
39. LimitedBox:
Listview’da child’ların sizeları için kullanılır.
40. Placeholder:
Arayüz tasarlarken bir widget’ı oluşturasıya kadar geçici olarak koyacağınız bir widget’tır. Gerçek widget yerini alasıya kadar bir container gibi en ve boy vererek bu widget’ı kullanabilirsiniz.
41. RichText:
Bu widget içinde farklı text özelliklerini bir arada tek bir widget içinde kullanabilirsiniz.
42. ReorderableListView:
Listview ile gösterdiğiniz listenin sırasının kullanıcı tarafından değiştirilmesini sağlayabilirsiniz.
43. AnimatedSwitcher:
Bir widget’tan başka bir widget’a animasyon ile geçilmesini sağlar.
44. AnimatedPositioned:
Bir widget’ın child’larının pozisyonunu değiştirip verdiğimiz animasyon süresinde yeni pozisyona animasyonlu olarak kaymasını sağlar. Böylece kullanıcı tarafından belirlenen bu pozisyonlarla ile kullanıcıdan veri almak veya onun seçeceği pozisyonları ekrana yazdırmak gibi şeyler mümkün olabilir. Fakat Kaydırma çubuğu(slider) ile veri almak için slider, rangeslider gibi widget’lar vardır.
45. AnimatedPadding:
Widget’ların paddinglerini animasyonlu olarak hareketlendirmemizi sağlar.
46. IndexedStack:
Bu widget’ın child’larına verdiğiniz widget’ların index numaralarını seçtiğinizde seçilen widget bir stack yapısında üste gelir. Böylelikle kolaylıkla seçilen widget’ı göstermiş olursunuz.
47. Semantics:
Kullandığınız widget’ların anlamını kodun içine yazmanızı sağlar. Bu widget 50 tane property’e sahiptir. Bu property’lerle ASO optimizasyonu yapmak mümkün olabilir. Ayrıca engellilerin uygulamayı kullanmasını kolaylaştırmak için kullanılır.
48. ConstrainedBox:
Birden çok satır olan textlerin cihaza uyumlu bir şekilde görünmesini sağlar.
49. Stack:
Stack’ın children’ı olarak belirlenmiş olan widget’ların üst üste konumlandırılmış olarak konulmasını sağlar.
50. AnimatedOpacity:
FadeTransition’a benzer bir yapısı vardır. Widget’ın opaklığını belirli bir sürede azaltıp artırmaya yarar. Böylece bir widget’ın belirlenen sürede görünüp kaybolmasını sağlar.
51. FractionallySizedBox:
Ekranın bboyutları ile orantılı widget boyutu elde etmek için kullanılır. Flex ile beraber kullanılabilir.
52. ListView:
Bir listenin yatay veya dikey olarak listelenmesini sağlar. pyhsics özelliği ile hareket özelliği de verebilirsiniz. Çok faydalı özellikleri vardır.
53. ListTile:
Listelerin güzel bir görünüm alması için tile yapısında gösterilmesini sağlar. Bir tile içinde birden çok özellik ile o kayda ait başka veriler de gösterilebilir.
54. Container:
konumlandırma, renk, şekil, padding, margin gibi özelliklerle sardığı widget’a özellik katan en önemli yardımcı widget’tır.
55. SelectableText:
Uygulamada bir text’in seçilebilir ve kopyalanabilir olmasını sağlar. Normal veya RichText için bunu yapabilir.
56. DataTable:
Önemli verilerin bir tablo yapısında gösterilmesini sağlar. Bu tabloda kolonlar otomatik olarak boyutlandırılır. Kolon ve Satır isimleri verilir. Ayrıca buralara yazılacak veriler de belirtilir. Satırlar seçili olarak gösterilebilir. Alanlar editable olarak getirilebilir. Kolondaki verilerin sayı veya alfabetik olarak sıralamasının yapılması sağlanabilir. Bir grafiği oluşturan verilerin ekranda gösterilmesi için çok kullanışlı bir widget’tır. Rapor için kullanılabilir.
57. Slider, RangeSlider, and CupertinoSlider:
Slider widget’ta min, max değerler ve bu aralıktaki adımların büyüklüğü verilir. Kullanıcı bu aralıkta ve verilen büyüklükteki adımlarda seçim yapar. RangeSlider için de min, max ve aralık değerleri verilir. Kullanıcı bu sefer verilen aralık değerlerini değiştirerek yeni min ve max değerler belirler.
58. AlertDialog:
Kullanıcıya önemli kararlar verdirmek için kullanılır.
59. AnimatedCrossFade:
Bir widget2tan diğerine sinematik bir şekilde geçmeyi sağlar. geçiş yapılacak widget’lar verilir ve belirlenen sürede istenen geçiş formatında geçiş yapılır. Çok farklı geçiş formatları vardır.
60. DraggableScrollableSheet:
Bir grup widget’ı scroll edilebilir olarak gruplamaya yarar. Bu grubu ekranın sadece belli bir bölümünde scroll edilebilir olarak gösterebilirsiniz. Yani ayrı bir scroll edilebilir ekran açmışsınız gibi bir etki yaratır.
61. ColorFiltered:
Bir resmin veya widget’ın istenen renklerle ve estetik bir şekilde bezenmesini sağlar.
62. ToggleButtons:
İlişkili bir grup butonu bir araya getirip bir veya birden fazlasını seçili hale getirip onların fonksiyonlarını çalıştırmak içindir. Seçildiğinde icon ve arka plan rengini ayarlayabilirsiniz. butonların büyüklük ve borderlarını ayarlayabilirsiniz.
63. CupertinoActionSheet:
IOS tipinde FAB butonudur.
64. TweenAnimationBuilder:
widget’lar çin custom animasyon yazmak için kullanılır.
65. Image:
Resim gösterir. assets’den veya network’den alınabilir. Network’ten alınırken loadingbuilder ile progress bar gösterilebilir. En ve boy ayarı vardır. Fit edilebilir. Strecth edilebilir. Colorblendmode ile stilli bir şekilde boyanabilir. Semantic label verilerek semantik’in faydalarından istifade edilebilir. JPEG,PNG,GIF,WebP,BMP ve WBMP formatları kullanılabilir. Animasyon özelliği verilebilir.
66. DefaultTabController & TabBar:
Widget’ları tabların içine koyabilirsiniz. Bunun için DefaultTabController, TabBar ve TabbarView kullanılabilir. Her bir tabın içine başka widget’lar koyabilirsiniz.
67. Drawer:
Widget’ları listeleyen bir widget’tır.
68. SnackBar:
Anlık mesajlar vermek içindir. Belirlenen süre için görünürt ve kaybolur.
69. ListWheelScrollView:
ListView’ın silindir haline getirilmişidir.
70. ShaderMask:
Widget veya resimlere istenen deseni vermek için kullanılır. Yazılarda kullanışlı olabilir.
71. NotificationListener:
Bir kullanıcı etkileşimini yakalamak için kullanılabilir.
72. Builder:
Bir widget’ın üst widget’lar ile entegre olarak çalışmasını sağlar.
73. ClipPath:
İstediğiniz bir şekli custom olarak çizmenizi sağlar.
74. CircularProgressIndicator and LinearProgressIndicator:
Çember veya Çubuk olarak progress ikonu göstermeye yarar. Kesin tamamlanma oranı gösteren veya kesin olmayan bir gösterimi olan iki çeşidi mevcuttur.
75. Divider:
İki widget arasında bölme çizgisi verilmesine yarar. İsterseniz Listview’ın kendi özelliği olan separated’ı veya yine ListTile’ın kendi özelliği olan divideTile’ı da kullanabilirsiniz. Bunlar sadece bu widget’lara özgü divider’lardır.
76. IgnorePointer:
Kullanıcının bazı butonlara yanlışlıkla basmasını önlemek için bu widget ile basılınca tepki vermesini istemediğiniz widget’ı sarabilirsiniz.
77. CupertinoActivityIndicator:
IOS tarzı progress widget’ıdır.
78. ClipOval:
Bir widget’ı, genellikle resimleri, bir yuvarlak içine almaya yarar. Bu widget’ı extend ederek customize etmek de mümkündür. Animasyon verip bir noktadan doğup yuvarlak haline gelmesi gibi bir efekt vermek de mümkündür.
79. AnimatedWidget:
Birçok geçiş efektine sahip olan bir widget’dır. Diğer widget’ları animasyonlu hale getirmek içindir.
80. Padding:
Bir widget’ın etrafında padding oluşturur. Diğer widget’lar arasında bu kadar boşluk verir.
81. CheckboxListTile:
Bir listenin öğelerinin checkbox ile seçilebilmesini sağlar.
82. AboutDialog:
Uygulamaların about bölümünde ihtiyaç duyulan bilgilerin sunulmasını sağlar. Bunlar versiyon numarası, Gizlilik sözleşmesi, Kullanıcı sözleşmesi, lisans ve sertifika bilgileri gibi bilgilerdir. Bu widget’ın olması uygulamayı profesyonel gösterir.
83. GridView:
Birden çok kolon ve satırda widget’ların gösterilmesi için gridview yapısı vardır. Satır ve sütun sayısı bildirilir, aralıkları bildirilir. Scroll edilebilir bir yapıdır.
84. SwitchListTile:
Togle butonu ile kullanıcıya seçim yaptırabileceğiniz bir liste olarak kullanabilirsiniz. Ayrıca CheckboxListTile ve RadioListTile butonları da vardır. Bunlarla da seçim yapılabilir. Seçim sonu o satırda bazı ikonları gösterip seçim sonucu oluşan durumu kullanıcıya bildirebilirsiniz.
84. RotatedBox:
Dödürülmüş bir kutu içinde daha çok yazıları ve diğer widget’larıda göstermeye yarar. Dikine veya çapraz olarak vs verilmiş açılarda kullanılabilir.
85. ExpansionPanel:
Bu widget ile bir listede elemanların expand edilebilir detayları tutulabilir.
86. Scrollbar:
Flutter default olarak scrollbar göstermez. Eğer isterseniz Listelerin olduğu widgetlarda scrollbar kullanmanız içindir.
87. FlutterLogo:
Boyutları ve rotasyonu yönetilebilir, animasyon edilebilir bir flutter logosudur.