7._Material_Design.pdf

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