Full Transcript

Flutter ile Uygulama Geliştirme Kursu | Android & IOS Material Design Kasım ADALAN Elektronik ve Haberleşme Mühendisi Android - IOS Developer and Trainer Eğitim İçeriği Forms AppBar Card ListView & GridView Fut...

Flutter ile Uygulama GeliÅŸtirme Kursu | Android & IOS Material Design Kasım ADALAN Elektronik ve HaberleÅŸme Mühendisi Android - IOS Developer and Trainer EÄŸitim İçeriÄŸi Forms AppBar Card ListView & GridView FutureBuilder ile Listeleme Tabs BottomNavigationBar Drawer Kasım ADALAN 2 Forms Kasım ADALAN 3 Form Flutter yapısında yer alan bu yapı sayesinde girdi kontrolleri yapabiliriz. Kasım ADALAN 4 Kasım ADALAN 5 AppBar Kasım ADALAN 6 AppBar AppBar, sayfanın en üstünde bulunan bir widgettır. Varsayılan olarak her sayfada gelmektedir. leading icon action widgets Kasım ADALAN 7 AppBar Renk DeÄŸiÅŸimi Kasım ADALAN 8 AppBar ÖzelleÅŸtirme Kasım ADALAN 9 AppBar Popup Menu Ekleme Actions içine PopupMenuButton ekleyebiliriz. Kasım ADALAN 10 AppBar Arama ÖzelliÄŸi Toolbar üzerinde arama iÅŸlemi yapmak için textfield kullanılabilir. Ä°ki tasarım oluÅŸturulur arama yapıldığı durumda için ve arama yapılmadığı durum için. Arama yapıldığını state özelliÄŸi olan bir deÄŸiÅŸken ile takip edebiliriz. Kasım ADALAN 11 AppBar Arama ÖzelliÄŸi Kasım ADALAN 12 Card Kasım ADALAN 13 Card Tasarım üzerinde kullanabileceÄŸimiz kart etkisi yaratan widgettır. Listeleme ve sayfa üzerinde sabit tasarımlarda kullanılabilir. Kasım ADALAN 14 Listeleme Kasım ADALAN 15 ListView Sabit Liste Kasım ADALAN 16 ListView : Sabit Liste ListTile dışında farklı satır tasarımları yapılabilir. Kasım ADALAN 17 GridView Sabit Liste Kasım ADALAN 18 GridView : Sabit Liste Satırlar tek tek yan yana veya alt alta oluÅŸturduÄŸumuz liste türüdür. Ä°stenilen türde satır oluÅŸturulabilir. Kasım ADALAN 19 ListView Dinamik Liste Kasım ADALAN 20 ListView.builder : Dinamik Liste Satır tasarımı Kasım ADALAN 21 Satır Tasarımına Tıklama Card’a tıklamak için GestureDetector özelliÄŸi kullanmalıyız. Kasım ADALAN 22 Satır Ãœzerindeki Widgetlara Tıklama Varsayılan olarak tıklama özelliÄŸi olan widgetların onPressed özelliÄŸi kullanılabilir. Varsayılan olarak tıklama özelliÄŸi yoksa GestureDetector kullanılabilir. Kasım ADALAN 23 Satıra Tıklayıp Sayfa GeçiÅŸi GeçiÅŸ yapılacak sayfa oluÅŸturulur. Kasım ADALAN 24 Satıra Tıklayıp Sayfa GeçiÅŸi Satıra tıklama iÅŸlemi Kasım ADALAN 25 Widgeta Tıklanınca Popup Menu OluÅŸturma Kasım ADALAN 26 Yatay ListView Yatay scroll edilebilir liste oluÅŸturabiliriz. Kasım ADALAN 27 GridView Dinamik Liste Kasım ADALAN 28 GridView.builder : Dinamik Liste 1 Oranlama 2 Satır tasarımı Kasım ADALAN 29 Tasarıma Tıklama Card’a tıklamak için GestureDetector özelliÄŸi kullanmalıyız. Kasım ADALAN 30 Satır Ãœzerindeki Widgetlara Tıklama Varsayılan olarak tıklama özelliÄŸi olan widgetların onPressed özelliÄŸi kullanılabilir. Varsayılan olarak tıklama özelliÄŸi yoksa GestureDetector kullanılabilir. Kasım ADALAN 31 Satıra Tıklayıp Sayfa GeçiÅŸi GeçiÅŸ yapılacak sayfa oluÅŸturulur. Kasım ADALAN 32 Tasarıma Tıklayıp Sayfa GeçiÅŸi Tasarıma tıklama iÅŸlemi Kasım ADALAN 33 Widgeta Tıklanınca Popup Menu OluÅŸturma Kasım ADALAN 34 FutureBuilder ile Listeleme 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. FutureBuilder ile Listeleme Çalışması EÄŸer gelen veri boÅŸ ise yani null ise tasarım boÅŸ görünsün Detaylı ListView.builder Kasım ADALAN 39 Detaylı ListView.builder Nesne Tabanlı Çalışma Nesne tabanlı çalışmak için satır tasarımına model olacak bir sınıf oluÅŸturmalıyız. Kasım ADALAN 41 Veri Kümesi OluÅŸturulur. Kasım ADALAN 42 Satır Tasarımı Kasım ADALAN 43 Sayfa GeçiÅŸi Anasayfa Kasım ADALAN 44 Detaylı GridView.builder Kasım ADALAN 45 Detaylı GridView.builder Nesne Tabanlı Çalışma Nesne tabanlı çalışmak için satır tasarımına model olacak bir sınıf oluÅŸturmalıyız. Kasım ADALAN 47 Veri Kümesi OluÅŸturulur. Kasım ADALAN 48 Satır Tasarımı Kasım ADALAN 49 Sayfa GeçiÅŸi Anasayfa Kasım ADALAN 50 Tabs Kasım ADALAN 51 Tabs Tabs kullanarak aynı ekranda birden fazla sayfa gösterebiliriz. Tablara tıklayarak veya parmak hareketi ile saÄŸa-sola kaydırarak sayfalar arasında geçiÅŸ yapabiliriz. Kasım ADALAN 52 Sayfalar Kasım ADALAN 53 Bottom Navigation Bar Kasım ADALAN 54 Bottom Navigation Bar Bottom navigation bar, tabs gibi çalışan bir yapıdır. Sayfanın altında çalışacak ÅŸekilde tasarlanmıştır. Tabs gibi parmak hareketi ile yapılan kaydırma iÅŸlemine duyarlı deÄŸildir. Kasım ADALAN 55 Kasım ADALAN 56 Sayfalar Kasım ADALAN 57 Drawer Kasım ADALAN 58 Drawer Drawer aynı ekran üzerinde birden fazla sayfa göstermek için kullandığımız bir yapıdır. Parmak hareketine duyarlı ÅŸekilde açılır ve kapanabilir. Geri tuÅŸu ile kapatılabilir. Kasım ADALAN 59 Kasım ADALAN 60 Sayfalar Kasım ADALAN 61 TeÅŸekkürler... kasım-adalan [email protected] kasimadalan