DEV Community

Cover image for Flutter Temel Bilgiler ­čĺź ­čîî ÔťĘ
G├╝lsen Keskin
G├╝lsen Keskin

Posted on • Updated on

Flutter Temel Bilgiler ­čĺź ­čîî ÔťĘ

Flutter'da her ┼čey bir widget't─▒r ve widget'lar yaln─▒zca g├Âr├╝n├╝mlerini nas─▒l tan─▒mlayaca─č─▒n─▒ bilen Dart s─▒n─▒flar─▒d─▒r.

Her widget ├Â─česi bir build methodu i├žermelidir ve bu method bir widget ├Â─česi d├Ând├╝rmelidir.

Widget'lar Flutter'da immutable(de─či┼čmez) olmal─▒d─▒r, ancak state nesneleri immutable olmamal─▒d─▒r.

Widget'lar─▒n ├žo─ču durumda const constructor'lar─▒ vard─▒r. Flutter'da widget'lar olu┼čtururken new ve const anahtar s├Âzc├╝klerini atlayabilirsiniz.

Bir StatefulWidget, ili┼čkili bir state nesnesi arac─▒l─▒─č─▒yla kendi internal state'ini (dahili durumunu) izler. Bir StatelessWidget "aptald─▒r" ve Flutter onu widget a─čac─▒ndan kald─▒rd─▒─č─▒nda tamamen yok edilir.

setState, Flutter'a baz─▒ stateleri g├╝ncellemesini ve ard─▒ndan yeniden boyamas─▒n─▒ (repaint) s├Âylemek i├žin kullan─▒l─▒r. Herhangi bir asenkron ├žal─▒┼čma yap─▒lmamal─▒d─▒r.

State nesnesinin, widget ├Â─česi a─čaca monte edilir edilmez ├ža─čr─▒lan initState adl─▒ bir methodu vard─▒r. State.initState methodu, Flutter ekran─▒ boyamaya ├žal─▒┼čmadan ├Ânce gereken t├╝m verileri ba┼člatt─▒─č─▒n─▒z methoddur. Flutter bir stateful widget ve onun state objesini olu┼čturdu─čunda, yapaca─č─▒ ilk ┼čey initState methodunu ├ža─č─▒rmakt─▒r.

initState, her state objesi olu┼čturuldu─čunda bir kez ├ža─čr─▒l─▒r. setState, Flutter'─▒n yeniden olu┼čturmas─▒n─▒(render) istedi─činiz zaman, geli┼čtirici olarak sizin taraf─▒n─▒zdan ├ža─čr─▒l─▒r.

BuildContext, bir widget ├Â─česinin widget ├Â─česi a─čac─▒ndaki konumuna bir referanst─▒r. Bu, widget'─▒n─▒z─▒n a─ča├žtaki yeri hakk─▒nda bilgi toplayabilece─či anlam─▒na gelir.

Flutter'da widget'lar, ili┼čkili RenderBox nesneleri taraf─▒ndan olu┼čturulur. RenderBox'lar, widget'a ger├žek, fiziksel boyutunu bildirmekten sorumludur. Bu nesneler, parent ├Â─čelerinden k─▒s─▒tlamalar al─▒r ve ard─▒ndan bunlar─▒ ger├žek boyutlar─▒n─▒ belirlemek i├žin kullan─▒r.

Flutter Row ve Column widget'lar─▒, CSS'deki FlexBox'a ├žok benzeyen flex layout kavram─▒n─▒ kullan─▒r.

State nesneleri Widget'lardan farkl─▒ olarak widget'lar yeniden olu┼čturuldu─čunda yok edilmez ve yeniden olu┼čturulmazlar (re-render).

State nesneleri widget'lar taraf─▒ndan de─čil, elementler taraf─▒ndan y├Ânetilir.

T├╝m Dart uygulamalar─▒, uygulama i├žin baz─▒ yap─▒land─▒rmalar─▒ a├ž─▒klayan bir pubspec.yaml dosyas─▒ gerektirir. Dart, uygulaman─▒z─▒ olu┼čturan bir derleme sistemine sahiptir ve uygulaman─▒z─▒ ├žal─▒┼čt─▒rd─▒─č─▒n─▒zda yapt─▒─č─▒ ilk ┼čey bir pubspec.yaml dosyas─▒ aramakt─▒r.

Uygulamay─▒ yatay veya dikey moda ├ževirmek gibi cihaz ├Âzelliklerini de─či┼čtirmek i├žin SystemChrome s─▒n─▒f─▒n─▒ kullan─▒n.

Ekran boyutu hakk─▒nda bilgi almak i├žin MediaQuery'yi kullan─▒n. Bu, widget'lar─▒ ekran boyutuna g├Âre ├Âl├žeklendirerek boyutland─▒rmak istiyorsan─▒z kullan─▒┼čl─▒d─▒r.(├Ârn %80 gibi)

Uygulaman─▒zdaki hemen hemen her widget'─▒ etkileyecek stil ├Âzelliklerini ayarlamak i├žin Theme'y─▒ kullan─▒n.

Widgetlar─▒ ├╝st ├╝ste konumland─▒rmak i├žin stack widget'─▒n─▒ kullan─▒n.

ListView ve builder constructor, sonsuz ├Â─čeler i├žeren listeler olu┼čturman─▒n h─▒zl─▒ ve performansl─▒ bir yolunu sunar.

Flutter'da kullan─▒c─▒ etkile┼čimi iki t├╝r widget arac─▒l─▒─č─▒yla ger├žekle┼čtirilir: input ve gesture detector.

Flutter, GestureDetectorwidget'─▒ arac─▒l─▒─č─▒yla hareketleri ve kullan─▒c─▒ etkile┼čimi olaylar─▒n─▒ y├Ânetir.

Herhangi bir text field'a (metin alan─▒na) programl─▒ olarak odaklanmak istiyorsan─▒z, bir FocusNodewidget kullanman─▒z ve bunun i├žin focus talep etmeniz gerekir.

Bir gesture detector, ├že┼čitli callback'ler arac─▒l─▒─č─▒yla bir├žok hareketi dinleyebilir. Bunlar yakla┼č─▒k 30'dan sadece 5'idir:
Ôś╝ onTap
Ôś╝ onLongPress
Ôś╝ onDoubleTap
Ôś╝ onVerticalDragDown
Ôś╝ onPanDown

Yerle┼čik widget'lar ┼ču hareketleri de dinler: Dismissible, Button, FormFieldve daha fazlas─▒.

Flutter formlar─▒, karma┼č─▒k formlar─▒ y├Ânetmeyi kolayla┼čt─▒ran ├že┼čitli input widget'lar─▒n─▒n etraf─▒ndaki kullan─▒┼čl─▒ sarmalay─▒c─▒lard─▒r.

Bir formun state'i, bir FormState nesnesine referans olan GlobalKey<FormState> ile y├Ânetilebilir.

Form alanlar─▒ birka├ž y├Ântem sa─člar: onChange, onSave, ve validator'd─▒r. Bu y├Ântemler, kullan─▒c─▒ eylemlerine yan─▒t vermek ve FormState'e ba─članmak i├žin kullan─▒l─▒r.

Resource: Flutter in Action chapter: 3-4-5

Discussion (0)