Flutter Widget Trleri

Flutter'da widget'lar, zelliklerine gre birden ok kategoride gruplandrlabilir:

Platforma zel widget'lar

Layout(Dzen) widget'lar

State maintenance widgets (Durum bakm aralar)

Platformdan bamsz / temel widget'lar

Platforma zel widget'lar

Flutter'n belirli bir platforma zg widget'lar vardr - Android veya iOS.

Android'e zel widget'lar, Android OS'nin Material tasarm klavuzuna uygun olarak tasarlanmtr. Android'e zel widget'lara Material widget'lar denir.

iOS'a zel widget'lar, Apple'n nsan Arayz Ynergeleri'ne (Human Interface Guidelines) uygun olarak tasarlanmtr ve Cupertino widget'lar olarak adlandrlr.

En ok kullanlan material widget'larndan bazlar unlardr:

Scaffold
AppBar
BottomNavigationBar
TabBar
TabBarView
ListTile
RaisedButton
FloatingActionButton
FlatButton
IconButton
DropdownButton
PopupMenuButton
ButtonBar
TextField
Checkbox
Radio
Switch
Slider
Date & Time Pickers
SimpleDialog
AlertDialog

En ok kullanlan Cupertino widget'larndan bazlar unlardr:

CupertinoButton
CupertinoPicker
CupertinoDatePicker
CupertinoTimerPicker
CupertinoNavigationBar
CupertinoTabBar
CupertinoTabScaffold
CupertinoTabView
CupertinoTextField
CupertinoDialog
CupertinoDialogAction
CupertinoFullscreenDialogTransition
CupertinoPageScaffold
CupertinoPageTransition
CupertinoActionSheet
CupertinoActivityIndicator
CupertinoAlertDialog
CupertinoPopupSurface
CupertinoSlider

Dzen widget'lar

Flutter'da, bir veya daha fazla widget kullanlarak bir widget oluturulabilir. Birden ok widget' tek bir widget'ta oluturmak iin Flutter, dzen zellii olan ok sayda widget salar. rnein, chil widget, Center widget' kullanlarak ortalanabilir.

Popler dzen-layout widget'larndan bazlar unlardr:

Container: background, border ve shadow(glge) ieren BoxDecoration widget'lar kullanlarak dekore edilmi dikdrtgen bir kutu.
Center: Child widget' ortalar
Row: Child widget'larn yatay dorultuda yerletirir.
Column: Child widget'larn dikey dorultuda yerletirir.
Stack: Widget'lar birbirinin zerine yerletirir.

State maintenance widgets (Durum bakm widget'lar)

Flutter'da tm widget'lar ya StatelessWidget'tan ya da StatefulWidget'tan tretilir.

StatelessWidget'tan tretilen widget'n herhangi bir durum bilgisi yoktur, ancak StatefulWidget'tan tretilen widget'lar durum bilgisini ierebilir. Uygulamann dinamik doas, widget'larn etkileimli davran ve etkileim srasndaki durum deiiklikleri yoluyladr. rnein bir saya butonuna tkladnzda sayacn artmas gibi.

Platform bamsz/ temel widget'lar

Flutter, platformdan bamsz bir ekilde basit ve karmak kullanc arayz oluturmak iin ok sayda temel widget salar.

Text

Text widget', bir string'i grntlemek iin kullanlr. yaznn stili, style zellii ve TextStyle snf kullanlarak ayarlanabilir.

Bu amaca ynelik rnek kod aadaki gibidir:

Text('Hello World!', style: TextStyle(fontWeight: FontWeight.bold));

Text widget', string'i farkl stille belirtmek iin TextSpan trnn alt esini(child) kabul eden Text.rich adl zel bir constructor'a sahiptir.
TextSpan widget' zyinelemelidir(recursive) ve TextSpan' ocuklar olarak kabul eder.

Bu amaca ynelik rnek kod aadaki gibidir:

RichText(  text: TextSpan(    text: 'Hello ',    style: DefaultTextStyle.of(context).style,    children: const <TextSpan>[      TextSpan(text: 'bold', style: TextStyle(fontWeight: FontWeight.bold)),      TextSpan(text: ' world!'),    ],  ),)

kt:

Text widget'nn aracnn en nemli zellikleri unlardr:

maxLines, int: Gsterilecek maksimum satr says

overflow, TextOverFlow: TextOverFlow snf kullanlarak grsel tamann nasl ilendiini belirtin.

style, TextStyle: TextStyle snfn kullanarak string'in stilini belirtin.

textAlign, TextAlign: TextAlign snfn kullanarak saa, sola, yasla vb. gibi metnin hizalanmas

textDirection, TextDirection: Metnin ak yn, left-to-right veya right-to-left

Image

Image widget', uygulamada bir resmi grntlemek iin kullanlr. Image widget', birden ok kaynaktan grnt yklemek iin farkl contructor'lar salar ve bunlar aadaki gibidir:

Image - ImageProvider kullanan genel resim ykleyici
Image.asset - Flutter projesinin varlklarndan (assets) resim ykler
Image.file - Sistem klasrnden resim ykler
Image.memory - Resmi bellekten ykler
Image.Network - Resmi adan ykler

Flutter'da bir grnty yklemek ve grntlemek iin en kolay seenek, grnty uygulamann varlklar (assets) olarak eklemek ve istek zerine widget'a yklemektir.

Proje klasrnzde assets isimli bir klasr oluturun ve resimlerinizi ykleyin.

pubspec.yaml dosyasndaki asset'leri aada gsterildii gibi belirtin:

flutter:assets:- assets/smiley.png

Resmi grntleyin:
Image.asset('assets/smiley.png')

Image widget'nn en nemli zellikleri unlardr:

image, ImageProvider: Yklenecek resim

width, double - Resmin Genilii

height, double - Resmin ykseklii

alignment, AlignmentGeometry - Resmi kendi snrlar iinde hizalar

Resources:

https://api.flutter.dev/flutter/widgets/RichText-class.html
https://www.tutorialspoint.com/flutter/flutter_tutorial.pdf