Flutter ile Uygulama Geliştirme Kursu | Android & IOS

Flutter Widgets

Kasım ADALAN
Elektronik ve Haberleşme Mühendisi
Android - IOS Developer and Trainer
Eğitim İçeriği
• Text • WebView
• Image
• Button • ScrollView
• TimePicker
• TextField • DatePicker
• Dropdown Button
• FloatinActionButton • GestureDetector

• Switch
• Toggle Buttons
• CheckBox
• RadioButton
• ProgressBar
• Slider
Kasım ADALAN 2
 Text
• Metinsel ifadeleri kullanıcıya gösterdiğimiz görsel nesnedir.
• Button üzerindeki yazıda dahil.

NOT : RaiseButton
deprecated yerine
ElevatedButton
kullanılabilir.
Kasım ADALAN 3
Text Özelleştirme

Kasım ADALAN 4
Elevated Button
Elevated Button
Özelleştirme
Text Button
Text Button
Özelleştirme
Final Kod :

Kasım ADALAN 11
ButtonÖzelleştirme

Kasım ADALAN 12
 TextField
• TextField ile uygulamaya kullanıcı veri girebilmektedir.
• TextField üzerine girilen veriyi TextEditingController sınıfından oluşturduğumuz
nesne ile kontrol etmekteyiz.
• Bu nesne sayesinde girilen veriyi okuyabiliriz ve girilen veriyi değiştirebiliriz.

Nesneyi Nesne oluşturma

textfielda
bağlama

textfield içindeki veriyi okuma

Kasım ADALAN 13
TextField Özelleştirme

Kasım ADALAN 14
 FloatingActionButton
• Normal bir button gibi kullanılabilir ama genelde scaffold
içinde kullanılır ve ekrana duyarlı çalışır.
• Klavye açıldığında klavye ile yukarı çıkar.
• Altında liste varsa listeyi yukarı aşağı kaydırsakta sayfada
sabit kalır.

Kasım ADALAN 15
 FloatingActionButton
• extended özelliği ile yazıda ekleyebiliriz.

Kasım ADALAN 16
 Switch
• Çift konumlu bir butondur.

Kasım ADALAN 17
 Toggle Buttons
• Button grubu oluşturabiliriz ve seçilince görsel durumu değişebilir.
• Buttonların seçilme durumlarını state özelliği olan liste ile kontrol ederiz.

Kasım ADALAN 18
 CheckBox
• Çoklu seçim yaparken kullanılan widgettır.

Kasım ADALAN 19
 RadioButton
• Kullanıcıyı tek bir seçime zorlamak istediğimizde kullanırız.

Kasım ADALAN 20
 ProgressBar
• Yükleme işlemi yaparken temsili olarak gösterdiğimiz widgettır.

Kasım ADALAN 21
 Slider
• Belirli değerler arasında kaydırma işlemi ile seçim yapmamızı sağlar.

Kasım ADALAN 22
Webview

Kasım ADALAN 23
 Webview
• Uygulama içinde internet sitelerini göstermek için kullandığımız yapıdır.

Kasım ADALAN 24
 Kurulum

webview_flutter: ^4.0.6

Kasım ADALAN 25
 IOS Kurulum
• IOS için izni almalıyız.
• Bu işlem için ios projesi içindeki info.plist dosyasına izin eklemeliyiz.

<key>io.flutter.embedded_views_preview</key>
<true/>

Kasım ADALAN 26
Android Kurulum

Kasım ADALAN 27
28
 Image
• Belirli bir kaynaktan alınan resimleri gösteren widgettır.
• Resimler lokalde veya internet üzerinde yer alabilir.

Kasım ADALAN 29
 Image.asset() : Lokalde yer alan resim
• Lokaldeki resime dosya yolu ve resim adıyla ulaşabiliriz.

Kasım ADALAN 30
Projeye Resim Ekleme

Kasım ADALAN 31
 Resim Ekleme
• Resimler için dosya oluşturulur.

Kasım ADALAN 32
Resim Ekleme
• Dosya içine resim eklenir.

• Eklenen resim pubspec.yaml dosyasına

eklenir.

• Dart dosyası açılınca Sarı uyarı alanından

Get dependencies seçilir.

Kasım ADALAN 33
 Resim Ekleme
• Eğer eklenecek çok resim varsa her resmin adını tek tek girmeye gerek
yoktur.
• dosya isminden sonra / işareti koymak yeterlidir.

Kasım ADALAN 34
Resim kullanımı

Kasım ADALAN 35
 Image.network() : İnternette yer alan resim
• İnternette yer alan resime http/https uzantısı ile erişebiliriz.

Kasım ADALAN 36
 FadeInImage.assetNetwork()
• Resim yüklenme sırasında placeholder koyabildiğimiz bir yapıdır.
• Placeholder için lokalde resim kullanmalıyız.

Kasım ADALAN 37
 ScrollView
• ScrollView, Sayfa içerisindeki içerik ekran boyutundan daha fazla yer
kaplıyorsa aşağı ve yukarı sayfayı hareket ettirmemize yardım eder.

Kasım ADALAN 38
Time Picker

Kasım ADALAN 39
Date Picker

Kasım ADALAN 40
 DropDown Button
• Android üzerinde spinner olarak bilinen tıkladığımızda liste görebildiğimiz
bir yapıdır.

Kasım ADALAN 41
Kasım ADALAN 42
Kasım ADALAN 43
 GestureDetector
• İstenilen widgeta tıklanılma , çift tıklama , uzun basma gibi özellikler verbiliriz.

Kasım ADALAN 44
Sayı Tahmin Uygulaması

Kasım ADALAN 45
Kasım ADALAN 46
Kasım ADALAN 47
Kasım ADALAN 48
Kasım ADALAN 49
Kasım ADALAN 50
 Teşekkürler...

kasım-adalan kasimadalan@gmail.com kasimadalan