BİL209U-MOBİL UYGULAMA GELİŞTİRME
Ünite 4: Mobil Uygulamalarda Arayüz Bileşenleri
Giriş
Flutter’da arayüz bileşenlerinin amacı kullanıcı etkileşimi sağlayarak kullanıcıların uygulamadaki bildirimleri, uygulamanın ürettiği çıktıları uygulama içinde farklı yerlerde kullanarak kullanıcıyla etkileşimi arttırmaktır. Temel arayüz bileşenleri diyalog ekranları, buton kontrolleri, liste yapısı ve kontrolleri, stilleri ve temaları, ikon kullanımı ile programdaki ekran çıktılarının kullanıcı dostu bir arayüz tasarlamak için kullanılan araçlardır. Kitabın 99. Sayfasındaki Şekil 4.1’de gösterildiği gibi arayüz bileşenleriyle farklı ekranlar tasarlanabilir.
Diyalog Ekranları
Diyalog ekranları Flutter’da kullanıcılara kritik mesajları bildirmek için veya belirli durumlara karşı vermelerini sağlamak için kullanılır. Diyalog ekranları, ekranın kullanıcıya gösterildiğinde arkadaki sayfa açık kalmaya devam eder ve verilen aksiyona göre istenildiği gibi işlemler yaptırılır. AlertDialog, SimpleDialog, ShowDialog olmak üzere üç farklı diyalog ekranı türü vardır. Bununla birlikte diyalog ekranlarının tasarımı da Kitabın 100. Sayfasındaki Şekil 4.2’de gösterildiği gibi Material Design ve Cupertino Design olarak iki farklı biçimde kullanılabilir.
AlertDialog
Bir uyarı diyaloğu ekranı kullanıcıya herhangi bir koşul gerektiren durumda ekranda görünerek uyarı hakkında bilgi verir ve isteğe bağlı seçenekler oluşturur. Kullanıcının hangi eylemi seçtiğine göre programda aksiyon alınabilir. Uyarı diyaloglarının alabildiği dört adet özellik vardır bunlar Title, Action, Content ve Shape’ dir. Title başlığı belirleyen parametredir içerisine verilen Widget’ı başlık olarak diyalogun en üstünde oluşturur. Content ise içerik kısmımı şekillendirilir. Kullanıcının hangi işlemi yaptığı hakkında bilgi vermek içindir. Content içerisine Text Widget verip kullanılabilir. Action parametresinde ise kullanıcıya sunulan seçenekler belirlenir. Örnek olarak bir galeri uygulamasında fotoğraf silme uyarısı için kullanıcının silmekte emin olup olmadığını belirleneceği seçenekler burada verilir. Action parametresine liste içerisinde Widget’lar verilebilir. Bunlar buton olabilir. Shape parametresi ise diyalog ekranını şekillendirmek için kullanılır.
SimpleDialog
Bu basit diyalog 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. Title adından da anlaşılacağı üzere başlık olarak içerisine verilen Widget’ı diyalog ekranının üstünde gösterir. Shape diyalog ekranını şekillendirmek için kullanılır. Backgroundcolor ise diyalog ekranının arka plan rengini belirlemeye yarar. Basit bir iletişim kutusu, kullanıcıya çeşitli seçenekler arasında bir seçim sunar. Basit bir iletişim kutusunda, seçeneklerin üzerinde görüntülenen isteğe bağlı bir başlık bulunur. Kullanıcıyı bir durum hakkında bilgilendiren diyaloglar için ise AlertDialog kullanılmalıdır. Basit diyaloglar genellikle,
iletişim kutusunu görüntüleyen showDialog’a alt pencere öğesi olarak iletilir.
showDialog
Bu fonksiyon AlertDialog ve SimpleDialog Widget’larını ekrana bastırmak için gerekli bir fonsiyondur. Bu fonksiyon ekrana diyalog ekranlarını popup şeklinde bastırır. ShowDialog’un builder fonksiyonuyla istenilen Widget ekrana bastırılabilir. Alert diyalog ve SimpleDialog örnek kodlarında görüldüğü üzere bu widgetlar showDialog builder fonksiyonunun içerisine Yazılır.
Buton Kontrolleri
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,kod IconButton, FloatingActionButton’dur. Butonlarda şekil haricinde büyük farklılıklar yoktur. Buton Widget’ının içerisine child olarak istenilen Widget konulabilir.
Liste Kontrolleri
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. Bu gibi durumlarda 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. Kitabın 105. Sayfasındaki Şekil 4.7’de gösterildiği gibi bir kaydırabilir(scroll) edilebilir bir bakış açısı verilmiştir.
ListView
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. Kitabın 106. Sayfasındaki görseldeki kod parçasında görüldüğü üzere ListView children olarak liste alır. Bu listenin içerisinde hazır bir List Widget’ı olan ListTile Widget’ı kullanılmıştır. ListTile Widget’ı içerisine burada trailing, leading, title verilmiştir. Trailing sağda, leading solda gözüken ikon, title ise başlıktır. Physics parametresi ile ListView’ın fiziksel özellikleri belirlenebilir içerisine örnekte verilen parametre ile listenin aşağıya yukarıya kaydırıldığında liste elemanlarının ekranın içinde akışkan bir şekilde gelmesini sağlar. Özellikleri aşağıdaki gibidir:
• key • scrollDirection • reverse • controller • primary • physics • shrinkWrap • padding • itemExtent
• protoypeItem • addAutomaticKeepAlives • addRepaintBoundraies • addSemanticIndexes • cacheExtent • children • semanticChildCount • dragStartBehavior • keyboardDismissBehavior • restorationId • clipBehavior
ListView.builder
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. ListView.builder fonksiyonu burada ListView’den farklı olarak içerisine itemBuilder parametresi alır. itemBuilder ise içerisinde context veindex değeri alır ve index değerine göre ListView elemanlarını oluşturur. itemCount parametresi ise ListView’ın kaç elemanlı olduğunu belirler. Kitabın 107. Sayfasında verilen örnek kod ile Şekil 4.8 de görüldüğü gibi bir çıktı alınabilir.
Grafikler, Stiller ve Temalar
Grafikler
Grafikler ve istatistikler flutter’da verileri görselleştirmek için kullanılır. Verileri anlaşılır hale getirmek için çeşitli eğriler/çizelgeler/grafikler/çizimleri ekrana çizilir. Bu kitapta grafikler için charts_fluttuer adlı paketi kullanılacaktır. Uygulamanın içine eklemek için bu paketi, projenin ana dizinindeyken “flutter pub add charts_flutter” komutu girilir. Ardından “import ‘package:charts_flutter/flutter.dart’ as charts;” komutu grafik kullanılmak istenilen flutter dosyasının en üstüne eklenir. Kitabın 109. Sayfasında yer alan örnek kodda ilk olarak PopulationData isminde bir class oluşturulur ardından _getSeriesData() adında bir fonksiyon hazırlanır. Bu fonksiyon grafiklere bir fonksiyon olarak verilecek ve grafiğe girmek istenilen veriler buradan çektirilir. Ardından data isminde PopulationData’lardan oluşan bir liste tanımlanır. Listenin içerisine PopulationData sınıfından üretilen değerler girilir. Son olarak charts. BarChart(_getSeriesData()) komutuyla veriler grafiğe dökülmüş olur. Oluşan ekran çıktısı kitabın 110. Sayfasında bulunan Şekil 4.10 da görülmektedir.
Stiller ve Temalar
Flutter’da Temalar kolay bir şekilde ortak merkezden yönetilebilir; MaterialApp Widget’ının özelliği olan theme parametresine “ThemeData.dark()” veya “ThemeData.light()” verilerek tüm sistem teması değiştirilebilir. Parametreye ThemeData.dark() girildiğinde sistem teması koyu, ThemeData.light() girilirse eğer sistem teması açık olur.
İkon Kullanımı
İ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.
Layout
Flutter’da en önemli konulardan birisi Layout kavramının mantığının anlaşılmasıdır. Eğer bu konu iyi anlaşılmazsa Responsive tasarım ve tasarımın kurgusu konularında eksiklikler çıkacaktır. Kitabın 113. Sayfasında yer alan Şekil 4.12 de bir layout’un görsel olarak şeması verilmiştir.
Center
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. Örneğin, widthFactor 2.0 ise, bu parçacığın genişliği her zaman alt öğesinin genişliğinin iki katı olacaktır. Özellikleri ise aşağıdaki gibidir:
• Alignment • Child • hashCode • heightFactor • key • runtimeType • widthFactor
Row
Row Widget’ı children olarak aldığı Widget’ları yatayda sıralar. En önemli özelliklerinden ikisi main axis ve cross axis alignment’tır. Kitabın 114. Sayfasında yer alan Şekil 4.13 görüldüğü gibi içerisinde bulunan children Widget’ları hizalamaya yarar. Bir alt öğenin mevcut yatay alanı dolduracak şekilde genişlemesi için SingleChildScrollView kullanılır. Satır widget’ı kaydırma yapmaz. Ayrıca bir satırda mevcut alana sığacak olandan daha fazla children Widget olması bir hata olarak kabul edilir. Çok sayıda widget kullanılacak ve yetersiz yer varsa üstelik bunların kaydırılabilmesi isteniyorsa ListView kullanılmalıdır. Özellikleri ise aşağıdaki gibidir:
• Children • clipBehavior • crossAxisAlignment • direction • hashCode • key • mainAxisAlignment • mainAxisSize • runtimeType • textBaseline • textDirection • verticalDirection
Column
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.
Bir alt öğenin kullanılabilir dikey alanı dolduracak şekilde genişlemesine neden olmak için SingleChildScrollView kullanılır. Özellikleri ise aşağıdaki gibidir:
• Children • clipBehavior • crossAxisAlignment • direction • hashCode • key • mainAxisAlignment • mainAxisSize • runtimeType • textBaseline • textDirection • verticalDirection
Spacer
Spacer Widget’ı Column veya Row Widget’ının içine child olarak eklendiğinde diğer child Widget’ları öteler. Spacer, Satır veya Sütun gibi bir Flex kapsayıcısındaki widget’lar arasındaki aralığı ayarlamak için kullanılabilecek, ayarlanabilir, boş bir aralayıcı oluşturur. Spacer widget’ı herhangi bir kullanılabilir alanı kaplayacaktır.
Bu nedenle Flex.mainAxisAlignment öğesini MainAxisAlignment.spaceAround, MainAxisAlignment. spaceBetween veya MainAxisAlignment.spaceEvenly için bir Spacer içeren esnek bir alanda kullanmanın görünür bir etkisi olmaz. Çünkü Spacer widget tüm alanı kaplamıştır. Özellikleri ise aşağıdaki gibidir:
• flex • hashCode • key • runtimeType
Expanded
Expanded Widget’ı Column veya Row Widget’ının içine child olarak Eklendiğinde Expanded Widget’ının aldıkları yeni childlarını dışta bulunan satır veya sütuna, flex’te aldığı değere göre oranlar. Genişletilmiş bir pencere aracının kullanılması, bir satır, sütun veya esnek öğesinin alt öğesinin, ana eksen boyunca kullanılabilir alanı dolduracak şekilde genişlemesini sağlar. Birden fazla child widget genişletilirse, kullanılabilir alan esnek faktöre göre aralarında bölünür. Genişletilmiş bir pencere öğesi bir satır, sütun veya flex’in alt öğesi olmalıdır. Genişletilmiş pencere aracından onu çevreleyen satır, sütun veya flex’e giden yol yalnızca StatelessWidgets veya StatefulWidgets içermelidir. Özellikleri aşağıdaki gibidir:
• child • debugTypicalAncestorWidgetClass
• fit • flex • hashCode • key • runtimeType
Container
Container Widget en temel Widget’tır içine özellik verilmediğinde boş bir kutu gibi düşünülebilir ancak içerisine parametreler girildiğinde ona genişlik, yükseklik, renk vs. kazandırılabilir. Kitabın 117. Sayfasında yer alan kodda görüldüğü üzere width genişlik parametresidir. Height parametresi ise yükseklik parametresidir ve ekranın neresinde bulunuyorsa orada girilen yükseklik değerini kazanır. Color parametresi ise içerisine Colors tipinde bir değer alır. Eğer editörünüz otomatik tamamlamayı destekliyorsa Colors. Notasyonu kullanıldığında birçok renk seçeneklerini görerek seçim yapılabilir. Container Widget ‘ın özellikleri aşağıdaki gibidir:
• alignment • child • clipBehavior • color • constraints • decoration • foregroundDecoration • hashCode • key • margin • padding • runtimeType • transform • transfromAlignment