4._Flutter_Calisma_Yapisi.pdf

Full Transcript

Flutter ile Uygulama Geliştirme Kursu | Android & IOS Flutter Çalışma Yapısı Kasım ADALAN Elektronik ve Haberleşme Mühendisi Android - IOS Developer and Trainer Eğitim İçeriği Uygulama Yapısı State Yapısı...

Flutter ile Uygulama GeliÅŸtirme Kursu | Android & IOS Flutter Çalışma Yapısı Kasım ADALAN Elektronik ve HaberleÅŸme Mühendisi Android - IOS Developer and Trainer EÄŸitim İçeriÄŸi Uygulama Yapısı State Yapısı Uygulama Sayfası OluÅŸturma StatefulWidget StatelessWidget Sayfalar Arası GeçiÅŸ Geri Dönüş TuÅŸları Kullanımı Sayfalar Arası Veri Transferi Back Stack YaÅŸam Döngüsü Widget İçinde Kodlama Teknikleri FutureBuilder Uygulama APK’sı oluÅŸturma Google Play Üzerinde Yayınlama Kasım ADALAN 2 Uygulama Yapısı main() metod MyApp (Ana Widget) MaterialApp Uygulama Sayfası MyHomePage MyHomePageState Scaffold appBar body main() metod MyApp (Ana Widget) MaterialApp Uygulama Sayfası main() metod main() metod Ana Widget MyApp (Ana Widget) Uygulamanın genel özelliklerinin verildiÄŸi ve uygulamanın anasayfasının çalıştırılmak için tanımlandığı widgettır. Uygulamaya Material özelliÄŸi verdiÄŸimiz yerdir. Android için görev yöneticisinde çalışan uygulamalarda bu isim görünür. IOS için arka plandaki uygulamalar listesi çıktığında bu isim kullanılır. appBar üzerindeki banner'ı kaldırır. Uygulamanın temasını belirler appBar rengi gibi. appBar rengi Arayüz birleÅŸenlerinin örn: button vb.bütün platformlarda güzel bir ÅŸekilde görünmesini saÄŸlar. Anasayfa Tanımlaması : Uygulamanın ilk sayfası burada tanımlanır. Bu sayfa StatefulWidget veya StatelessWidget özelliÄŸinde olabilir. Uygulama Sayfa Yapısı Uygulama Sayfası Uygulamanın kullanıcı tarafından görünen kısmıdır. Tasarım ve sayfa çalışması ile ilgili kodlamalar burada yer alır. Uygulama sayfası 2 çeÅŸit olabilir. 1. StatelessWidget 2. StatefulWidget SaÄŸ taraftaki örnek StatefulWidgettır. Tasarım ve sayfa çalışması ile ilgili kodlamalar için gerekli alan. Uygulama Sayfa Yapısı Scaffold ( Sayfanın Tamamı ) appBar appBar ile ilgili tasarım veya kodlama iÅŸlemlerinin yapıldığı alan body Tasarımın ve kodlamaların yapıldığı alan body kısmıdır. Kasım ADALAN 10 State Yapısı State Yapısı EÄŸer ara yüzde deÄŸiÅŸiklik yapacak deÄŸiÅŸken oluÅŸturacaksanız kullanılır. setState() metodu deÄŸiÅŸkene state özelliÄŸi katmaktadır. setState() metodu ile deÄŸiÅŸken deÄŸeri kodlama içinde deÄŸiÅŸtiÄŸi anda iliÅŸkili olduÄŸu bütün kodlamalarda anlık olarak deÄŸiÅŸir. setState() metodu StatefulWidget özelliÄŸi olan sınıflar içinde olabilir. Örnek kodlamada sayac 1’er 1’er $ artacaktır ve Text içinde anlık deÄŸeri görülecektir. Klasik Yöntem ve State Yapısı KarşılaÅŸtırması. Uygulama ilk açıldığı anda Text içinde sayaç deÄŸeri 0 görünür. Uygulama ilk açıldığı anda label içinde sayaç deÄŸeri 0 görünür. Butona tıklanıldığı anda sayaç artar ve sayaç deÄŸeri kodlama içinde Butona tıklanıldığı anda sayaç artar ve sayaç deÄŸeri button metodu var olan her yerdeki deÄŸerini deÄŸiÅŸtirir ve kodları günceller.Bu sayaç içinde anlık olarak arayüzde görünmesi için label içine aktarılır. artımı dikkat edin button metodu içinde olduÄŸu halde sayac deÄŸeri Bu sayaç artımı ve label içine aktarımı dikkat edin button metodu text içine aktarım farklı bir yerde yer almaktadır.Bu durum state içinde gerçekleÅŸti. özelliÄŸi ile oluÅŸmaktadır. Uygulama Sayfası OluÅŸturma #StatelessWidget #StatefulWidget Stateless Widget Bir kere çalışan widget’lardır. StatelessWidget State özelliÄŸi ile arayüzde tekrar tekrar deÄŸiÅŸiklik yapılamaz. Build metodu bir kere çalışır. build StatelessWidget’lar state özelliÄŸini kullanamazlar. StatelessWidget’lara örnek verebiliriz : Text, Column,Row,Container vb. Bu widgetlar bir durum deÄŸiÅŸtiremezler. Örnek olarak Row sadece içeriÄŸini gösterebilir bir durum deÄŸiÅŸtiremez. Stateless Widget Sayfa Yapısı StatelessWidget build build içindeki return içerisine gerekli widget kodlaması yapılabilir. Not : key her widget’ın tanımlayıcısıdır. Widget’a özel iÅŸlemlerde key kullanılabilir. Key kullanılmasada olur. Stateless Widget Sayfa Yapısı Stateful Widget Arayüzde tekrar tekrar deÄŸiÅŸiklik yapabileceÄŸimiz widgetlardır. StatefulWidget Build metodu arayüzdeki her deÄŸiÅŸimde çalışır.Build metodunu setState() metodu tetiklemektedir. State özelliÄŸi bu yapı ile kullanılabilir. State özelliÄŸini kullanmak için StatefulWidget özelliÄŸi olan bir sınıf olmalı ve bu sınıfı implement etmeliyiz. createState Bundan dolayı iki sınıf ile çalışmaktayız. Biri StatefulWidget özelliÄŸi alan sınıf ve diÄŸeri State< StatefulWidget> özelliÄŸi olan sınıf. State StatefulWidget’lara örnek verebiliriz : Button, Checkbox,TextField vb. build Bu widgetlar bir durum deÄŸiÅŸtirebilirler. Örnek olarak buttona basıldığında bir iÅŸlem olabilir. Stateful Widget Sayfa Yapısı StatefulWidget createState State build içindeki return içerisine gerekli widget build kodlaması yapılabilir. Not : key her widget’ın tanımlayıcısıdır. Widget’a özel iÅŸlemlerde key kullanılabilir. Key kullanılmasada olur. Stateful Widget Sayfa Yapısı Sayfalar Arası GeçiÅŸ Sayfalar arası geçiÅŸ için Navigator yapısı kullanılır. Gidilmek İstenen Sayfa Otomatik Geri Dönüş Bu kodlama ile geçiÅŸ yaparsak otomatik olarak geri Geri iconu dönüş saÄŸlayabiliriz. GeçiÅŸ yapılan sayfadan geri dönmek için ; Android : Hem geri tuÅŸu hem appBar üzerindeki geri iconu kullanılır. IOS : appBar üzerindeki geri iconu kullanılır çünkü IOS iÅŸletim sisteminde geri tuÅŸu yoktur. Geri tuÅŸu Sayfalar Arası GeçiÅŸ Geri Dönüş TuÅŸlarını Kullanma AppBar üzerindeki tuÅŸu kontrol edebiliriz. Bu tuÅŸ hem ios hem android için aktif kullanılır. AppBar üzerinde kendimiz geri tuÅŸu oluÅŸtururuz. Daha sonra içine yazılan kodlamayı çalıştırabiliriz. Örnek Geri Dönüş TuÅŸlarını Kullanma AÅŸağıdaki geri tuÅŸunu kontrol edebiliriz. Bu tuÅŸ sadece android için aktif kullanılır. body içinde willPopScope oluÅŸturulur. Geri tuÅŸuna basıldığında çalışacak bir metod oluÅŸturulur. Örnek context sayfa geçiÅŸinde veya widget iÅŸlemlerinde gerekli olabilir. Sayfalar Arası Veri Transferi Sayfalar arası veri transferi için geçiÅŸ yapılacak sayfada deÄŸiÅŸken oluÅŸturmalıyız. Sayfalar Arası Veri Transferi Veriyi transfer ederken geçiÅŸ yapacağımız sınıfın parametresine gerekli veriler yerleÅŸtirilir. Sayfalar Arası Veri Transferi Nesne tabanlı çalışmak için geçiÅŸ yapılacak sınıfta veri transfer etmek için nesne oluÅŸturulur. Sayfalar Arası Veri Transferi StatefulWidget özelliÄŸi olan sayfa widget ile üst sınıfın deÄŸiÅŸkenine eriÅŸim saÄŸlanır. BACK STACK BACK STACK Task nedir daha iyi anlamak için web tarayıcının çalışmasını örnek olarak alalım. Task sekme, etkileÅŸim pencere (Activity) ve link Intent varsayalım. İstediÄŸiniz zaman Back(Geri) butona basıp geri dönebilirsiniz ama ileriye dönemezsiniz çünkü ilerdeki sayfa siliniyor. İleriye dönmek için yine linke (Intent) basmamız gerekecek. Sonuçta web tarayıcının ve Android arasındaki benzerliÄŸi şöyle gösterebiliriz: Tarayıcı – Android Sekme – Task (Görev) Pencere – EtkileÅŸim (Activity) Link – Intent BACK STACK Sayfa B BackStackten Silinir Ön AnaSayfa Sayfa A Sayfa B Sayfa A Plan Sayfa A’ya Sayfa B’ye Geri TuÅŸu ile GeçiÅŸ AnaSayfa GeçiÅŸ Sayfa A Anasayfa Geri Dönüş Anasayfa BackStack BackStack BackStack BackStack Bu iÅŸlemler otomatik gerçekleÅŸir. İstenirse sayfa geçiÅŸinde istediÄŸimiz sayfayı back stackten silebiliriz. Sayfayı Back Stackten Silme Android içindeki Finish metodu gibi çalışır Bu yapı ile sayfaya geçiÅŸi yapıldığında back stackten kendisini siler. Kendisini sildiÄŸi için geçiÅŸ yapıldığı sayfadan geri tuÅŸu ile bu sayfaya gelinemez çünkü back stackten silinmiÅŸtir. BACK STACK Yaşam Döngüsü YaÅŸam Döngüsü Önemli : YaÅŸam döngüsü StatefulWidget üzerinde gerçekleÅŸir. initState() : Uygulama sayfası ilk açıldığında çalışır. Android için onCreate() IOS için viewDidLoad() metoduna eÅŸ deÄŸerdir. build() : setState() metodu ile arayüzde bir deÄŸiÅŸiklik olduÄŸunda build metodunu tetikler ve her tetiklenmede çalışır. didChangeAppLifecycleState() : Uygulama çalışmasını takip ederiz. AppLifecycleState.inactive : Arkaplana geçiÅŸ yapıldığında çalışır.Sadece ios için AppLifecycleState.paused : Arkaplana geçiÅŸ yapıldığında çalışır. AppLifecycleState.resume : Arkaplandan çaÄŸrıldığında çalışır. AppLifecycleState.detached : Geri tuÅŸuyla arkaplandan kaldırıldığında.Sadece android için deactivate() ve dispose() : Sayfa Back Stackden silindiÄŸinde çalışır. Örn : BulunduÄŸu sayfaya geçiÅŸ yapıldıktan sonra geldiÄŸi sayfaya geri döndüğünde bulunduÄŸu sayfa Back Stackten silinir.Geri tuÅŸuna duyarlıdır. YaÅŸam Döngüsü Davranışları Arka Plandan Tekrar İlk Çalıştığında Back TuÅŸuna Basıldığında ÇaÄŸrıldığında 1. initState() metodu 1. inactive() metodu 1. initState() metodu 2. build() metodu 2. paused() metodu 2. build() metodu Not : build() metodu setState() 3. detached() metodu metodu çalıştırıldığında çalışır. YaÅŸam Döngüsü Davranışları Arka Plandan Tekrar Menü TuÅŸuna Basıldığında ÇaÄŸrıldığında 1. inactive() metodu 1. resumed() metodu 2. paused() metodu YaÅŸam Döngüsü Davranışları Arka Plandan Tekrar Arkaplan TuÅŸuna Basıldığında ÇaÄŸrıldığında 1. inactive() metodu 1. resumed() metodu 2. paused() metodu YaÅŸam Döngüsü Davranışları Geri TuÅŸu ile GeldiÄŸi Sayfaya BaÅŸka Sayfaya GeçiÅŸ olduÄŸunda Döndüğünde 1. Sayfa A : deactivate() 2. Sayfa A : dispose() Final Kod : Widget İçinde Kodlama Teknikleri Visibility : Görünür – Görünmez Yapma Widgetların görünür veya görünmez olmasını saÄŸlar. Bu ÅŸekilde istenilen widgetların görünür durumunu kontrol edebiliriz. Ternary KoÅŸul Kullanma koÅŸul ? true olma durumu : false olma durumu if koÅŸulu yerine widget özelliklerini ternary koÅŸul ile kontrol edebiliriz. Örn : Text’in içindeki yazıyı , boyutu vb özellikleri deÄŸiÅŸtirebiliriz. Kodlama Alanı Açabiliriz Detaylı bir kodlama yapmak istiyorsak kullanılır. FutureBuilder FutureBuilder Asenkron iÅŸlemler için kullanılan bir yapıdır. async özelliÄŸi olan fonksiyonu kullanırken await özelliÄŸi ile sadece yapması gereken iÅŸlemi bitirene kadar çalışmasını saÄŸlarız. Fakat await kullanmak için async özelliÄŸi olan fonksiyon içinde olmamız gereklidir. async özelliÄŸi olan fonksiyonu widget içinde kullanmak istediÄŸimizde async özelliÄŸi olması gerekmektedir.Bu özellik widgetlarda yoktur. Widget içinde async özelliÄŸini kullanmak için FutureBuilder yapısı gereklidir. FutureBuilder Kullanımı Çalıştıracağı fonksiyonun geri dönüş türü. Çalıştırılacak fonksiyon Fonksiyonun çalışma sonucunu temsil eden deÄŸiÅŸken. Fonksiyonun çalışması sonucunda hata oluÅŸuyor mu kontrolü Fonksiyonun çalışması sonucunda veri var mı yok mu kontrolü Fonksiyonun sonucuna eriÅŸim. EÄŸer gelen veri boÅŸ ise yani null ise burası çalışır ve tasarımda istediÄŸimizi gösterebiliriz. Uygulama Çıktısı OluÅŸturma Uygulama Çıktısı OluÅŸturma Key Dosyası OluÅŸturma Mac için : keytool -genkey -v -keystore ~/Desktop/key.jks -keyalg RSA -keysize 2048 - validity 10000 -alias key Windows için : keytool -genkey -v -keystore c:/Users/USER_NAME/key.jks -storetype JKS - keyalg RSA -keysize 2048 -validity 10000 -alias key Key Dosyası OluÅŸturma Åžifre yazarken görünmez Dosyanın oluÅŸtuÄŸu dosya yolu key.properties dosyası oluÅŸturma android dosyası seçili olmalı key dosyası için oluÅŸturduÄŸumuz bilgileri yazıyoruz. storeFile : key dosyasının konumudur. Gradle dosyasını düzenleme Gradle dosyasını düzenleme Birinci Kodlama def keystoreProperties = new Properties() def keystorePropertiesFile = rootProject.file('key.properties') if (keystorePropertiesFile.exists()) { keystoreProperties.load(new FileInputStream(keystorePropertiesFile)) } İkinci Kodlama signingConfigs { release { keyAlias keystoreProperties['keyAlias'] keyPassword keystoreProperties['keyPassword'] storeFile keystoreProperties['storeFile'] ? file(keystoreProperties['storeFile']) : null storePassword keystoreProperties['storePassword'] } } Üçüncü Kodlama signingConfig signingConfigs.release Version DeÄŸiÅŸtirme EÄŸer daha önce aab dosyası oluÅŸturduysanız versiyonu deÄŸiÅŸtirmelisiniz. App Bundle Dosyasını OluÅŸturma Terminal ekranına flutter build appbundle yazmamız gereklidir. NOT : flutter no command hatası alıyorsanız.Kurulum derslerimizde gösterdiÄŸimiz flutter kurulumunu tekrar yapmalısınız. Güncelleme için aab dosyası oluÅŸturma Uygulamayı güncellemek için yeni aab dosyası oluÅŸturabiliriz. Burada önemli olan key dosyamızın olmasıdır. Bu dosyayı kullanarak iÅŸlem yapmalıyız. 1. key.properties dosyasını kontrol et 2. Versiyon deÄŸiÅŸtir key dosyası oluÅŸturduÄŸumuz bilgileri yazıyoruz. storeFile : key dosyasının konumudur. 3. Yenide aab dosyası oluÅŸtur. keyAlies : key dosyasının adı Uygulamayı Google Play Üzerinde Yayınlama Uygulamanın Google Play Yüklenmesi Kasım ADALAN 61 Uygulamanın Google Play Yüklenmesi Google Play Console sayfasından uygulama paylaÅŸmak için her yıl 25 dolar verilmelidir. Kasım ADALAN 62 MaÄŸaza için Görsellerin Hazırlanması Kasım ADALAN 63 İmzalı APK’nın yüklenmesi Kasım ADALAN 64 TeÅŸekkürler... kasım-adalan [email protected] kasimadalan