Mobil Uygulamalarda Arayüz Bileşenleri

Kullanıcı Dostu: Kullanıcı dostu uygulama tasarımı kullanıcılara en kısa yoldan ulaşmak istediği noktalara ulaştıran ekran tasarım kurgusudur. Burada kullanıcı uygulama içerisinde dolaşmadan ve kısa sürede her istediği noktaya ulaşabilmesi çok önemlidir.

HotReload/HotRestart: Flutter’ın bize sunduğu HotReload ve HotRestart özellikleri sayfada yaptığımız değişikleri uygulamayı derlemeden görmemizi sağlar. HotReload sayfadaki sadece isminden de anlaşıldığı gibi sadece sayfa yenileme yapar uygulamada değişkenler girişler sıfırlanmaz bu durumda. HotRestart ise uygulamayı tekrardan build eder bütün uygulamanın içerisindeki girişler ve değişkenler sıfırlanır.

Diyalog ekranları Flutter’da kullanıcılara kritik mesajları bildirmek için veya belirli durumlara karşı cevap vermelerini sağlamak için kullanılır.

AlertDialog, SimpleDialog, ShowDialog olmak üzere üç farklı diyalog ekranı türü vardır.

Diyalog ekranlarının tasarımı Material Design ve Cupertino Design olarak iki farklı biçimde kullanılabilir.

UI Style: Flutter kullanıcılara Material ve Cupertino olmak üzere iki farklı arayüz sağlamaktadır. Material stili Android’de ki gibi bir tasarım çıktısı verir, Cupertino stili ise İOS’da ki gibi bir tasarım çıktısı verir.

Uyarı diyaloglarının alabildiği dört adet özellik vardır bunlar Title, Action, Content ve Shape’ dir.

SimpleDialog ekranı kullanıcıya çoklu seçim işlemi sunulması gerektiğinde kullanılmalıdır. Bu Widget’in Title, Shape, backgroundcolor biçiminde üç temel özelliği bulunmaktadır.

Backgroundcolor ise diyalog ekranının arka plan rengini belirlemeye yarar.

Buttonlar Flutter’da kullanıcıların etkileşimde bulunmalarını, seçme işlemlerini yaptırmak için kullanılır

Flutter SDK tarafından bir çok farklı şekillerde butonlar sağlanır. Bunlar TextButton, ElevatedButton, OutlinedButton, IconButton, FloatingActionButton’dur.

Aşağıda ElevatedButton’un özellikleri: autofocus, child, clipBehavior, enabled, focusNode, hashCode, key, onFocusChange, onHover, onLongPress, onPressed, runtimType, style.

ListeView’lar Flutter’da çoklu verileri görüntülemeye yarar. Ekrana sığmayacak kadar çok veri oldu- ğunda bunlar liste içinde kaydırabilir bir yapı halinde sunulabilir.

Flutterda ListView, ListView.builder diye iki adet kullanışlı Widget vardır. ListView daha çok sabit veri olduğunda kullanılır dinamik bir yapısı olmamasına rağmen ListView.builder dinamik bir yapıya sahiptir.

ListView Widget’ı children olarak atanan elemanları bir liste şeklinde göstermek için kullanılır. Bunlar resim, yazı vs. olabilir. Hazır olarak FlutterSdk tarafından oluşturulmuş ListTile Widget’ı da bu iş için kullanılabilir.

ListView.build ise ListView’den daha kullanışlıdır. İçerisine index vererek o index’e göre ListView. builder’ın içerisinde işlem yaptırılabilir.

 

Grafikler ve istatistikler flutter’da verileri görselleştirmek için kullanılır.

İkonlar Flutter’da kullanılması gayet kolay ve kullanışlı simgelerdir. Flutter’ın bize sağladığı ikon paketinde hazır olarak verilen birçok ikon bulunmaktadır. Kullanımına gelirsek eğer ikonları Icon Widget’ı içerisine Icons. notasyonu kullanılarak işe uygun ikon seçilip kullanılabilir.

Center Widget’ı isminden de anlaşıldığı üzere yatayda ve dikeyde child Widget’ını ortalar. Bu widget, boyutları kısıtlıysa ve widthFactor ve heightFactor boşsa, mümkün olduğunca büyük olacaktır. Bir boyut sınırlandırılmamışsa ve karşılık gelen boyut faktörü boşsa, pencere öğesi o boyuttaki çocuğunun boyutuyla eşleşir. Bir boyut faktörü boş değilse, bu parçacığın karşılık gelen boyutu, çocuğun boyutunun ve boyut faktörünün ürünü olacaktır.

Row Widget’ı children olarak aldığı Widget’ları yatayda sıralar. En önemli özelliklerinden ikisi main axis ve cross axis alignment’tır.

Column Widget’ı children olarak aldığı Widget’ları dikey olarak sıralamak için kullanılır. En önemli özelliklerinden ikisi main axis ve cross axis alignment’tır.