4._Flutter_Calisma_Yapisi.pdf

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