Your Web News in One Place

Help Webnuz

Referal links:

Sign up for GreenGeeks web hosting
April 12, 2022 02:32 am GMT

Flutter State Ynetimi : Blm 1

Blm ierii
StatefulWidget
Widget tree ve element tree
lifecycle methodlar
InheritedWidget

StatefulWidget

Bir StatefulWidget'n iki grevi vardr: tpk bir StatelessWidget gibi immutable (deimez) deikenleri tutar ve StatefulWidget zerindeki hibir zellik gncellenemez. kinci ii, ilikili bir State nesnesi oluturmaktr.

StatefulWidget rnei:

class ItemCounter extends StatefulWidget {    final String name;    ItemCounter({this.name});    @override    _ItemCounterState createState() =>        _ItemCounterState();}

Bir state nesnesinin temel ii, internal (mutable) (dahili (deiken)) bir durumu takip etmek ve State.build ile alt widget'lar oluturmaktr.

Widget tree ve element tree

Flutter, element aacn oluturarak widget'larn ekrana nasl ileneceini bilir. Widget aac dorudan render edilmez, nk widget'lar render edilebilir elementler iin "planlar"dr.

Stateless widget, bir elemente bire bir elenir. Uygulama oluturulurken ve Flutter widget aacn tararken, "Hey eleman aac, bu widget'a karlk gelen bir eleman yapabilir misin?" diyecektir.

Element tree (ekil 1), stateful widget'lar ayn ekilde ilemez.

Image description
ekil 1

StatefulWidget aata deitirilirse, yeni widget ayn trdedir (ve ayn anahtara sahiptir) karlk gelen element, aata ayn noktay iaret etmeye devam eder ve yeni stateful widget'a bavurur, ancak ilikili state nesnesi olduu yerde kalr ve yeniden kullanlr.

Flutter, state nesnesi zerinde, element aacndaki deiikliklere yant vermenize olanak tanyan methodlar salar. Bu methodlar belirli bir srayla arlr ve widget'n yaam dngs (lifecycle) olarak adlandrlrlar.

StatefulWidget yaam dngs ve ne zaman ne yaplaca

ekil 2, yaam dngsn srayla gsterir.

Image description
ekil 2

  1. Constructor arlr.

  2. State nesnesi, aata bir BuildContext veya konumla ilikilendirilir. Widget artk "mounted" (monte edilmi) olarak kabul edilir. Widget.mounted ile bir widget'n takl olup olmadn kontrol edebilirsiniz.

  3. State.initState arlr. Bu method tam olarak bir kez arlr. ve stateful widget'a veya build context'e bal olan State nesnesindeki zellikleri balatmak iin kullanlr.

  4. State.didChangeDependencies arlr. Bu yntem zeldir, nk initState'den hemen sonra bir kez arlr, ancak yaam dngsnn ilerleyen ksmlarnda da arlabilir. Bu method, InheritedWidget ieren balatmay yapmanz gereken yerdir.

  5. Bu noktada state "dirty" kabul edilir ve bu sayede Flutter hangi widget'larn yeniden oluturulmas gerektiini takip edebilir. lk kez de dahil olmak zere, bir state nesnesi oluturulmas gerektiinde, kendisini dirty olarak iaretler.

  6. State nesnesi tamamen balatlr ve State.build methodu arlr.

  7. Yeni bir build'den sonra state "clean" olarak iaretlenir. State nesnesi amaland gibi grntlenir ve framework'n kendisine daha fazla talimat vermesini bekler. Bu durumda birka ey olabilir:

state.setState, state'i her zaman dirty olarak iaretleyen kodunuzdan arlr.

Bir ancestor widget, aataki bu konumun yeniden oluturulmasn isteyebilir. Konum ayn widget tr ve anahtaryla yeniden oluturulacaksa, framework argman olarak nceki widget'la didUpdateWidget' arr. Bu ayn zamanda state'i dirty olarak iaretler ve bylece state yeniden ina edilir.

Widget'nz bir InheritedWidget'a balysa ve inherited widget deiirse, framework didChangeDependencies esini arr. Bu noktada, widget yeniden oluturulacaktr.

State nesnesinin aatan kaldrlmas iin State.disposed arlr. Bu method, etkin animasyonlar durdurmak veya aklar(streams) kapatmak gibi widget tarafndan kullanlan kaynaklar temizlemeniz gereken yerdir. disposed bir kez arldnda, widget bir daha asla oluturamaz. Bu noktada setState'i armak bir hatadr.

Flutter'daki tm yeniden oluturmalar, State nesnesine ve yaam dngsne (lifecycle) baldr.

InheritedWidget

Inherited widget'lar muhtemelen daha nce grmsnzdr: Tema, MediaQuery ve Scaffold'un tm inherited'dr. Bu widget'lar zeldir, nk inherited widget'n alt aacndaki herhangi bir widget, inherited widget'a eriebilir. Ardndan, gelitirme srasnda widget'lar aa etrafnda tamak istiyorsanz, dier widget'larn kodunu deitirmeniz gerekmez.

InheritedWidget snfnn belgelerine bakarsanz, bunun nc bir widget tr olduunu ve daha da nemlisi stateful widget snfnn bir uzants olmadn grrsnz. Bu widget "bilgiyi aata verimli bir ekilde yayan widget'lar iin temel bir snftr."

Bu, merkezi bir depolama olarak almasn salamak iin stateful widget' bir inherited widget'la birletirmeniz gerektii anlamna gelir.

runApp(    AppStateContainer(        blocProvider: blocProvider,        child: ECommerceApp(),    ),);

Koddaki AppStateContainer snf, bir StatefulWidget'tr ve state.build methodu, bir InheritedWidget geer.

Widget aacnzda bir inherited widget'tan bilgi almak istiyorsanz, muhtemelen o inherited widget'a of adl bir methodla bavuru salarsnz. Bu method aaca bakar ve o trden en yakn parent inherited widget' bulur.

Bir InheritedWidget kullanarak, of methoduyla aata daha yksekteki widget'lara referanslar alabilirsiniz.

Image description

of methodlarnn ou, inherited widget'larn kendisinde tanmlanr ve saladnz BuildContext ile BuildContext.inheritFromWidgetOfExactType' arr.

Bu method statik olduundan, snfn bir rneine herhangi bir bavuru yaplmadan herhangi bir yerden arlabilir.

updateShouldNotify methodu

Inherited widget yeniden oluturulduunda, verilerine bal olan tm widget'lara da yeniden oluturmalarn sylemesi gerekebilir. Bu method, yeniden oluturmalardan sonra arlr ve her zaman eski widget'a bir argman olarak geer. Bu size Flutter'n yeniden ina edilip edilmeyeceini (rebuilt) kontrol etme ans verir.

bool updateShouldNotify(_AppStoreContainer oldWidget) =>      oldWidget.appData != this.appData;

Aacn tepesinde inherited widget kullanmak, bir bakma state'i yukar kaldrmann daha temiz bir tarzdr. Bu yntemi kullanarak, setState yntemlerinizin tm AppState durum nesnesinde yaayabilir ve bunlar AppState.of(context).callMyMethod() kullanarak arabilirsiniz.

Inherited widget'n state'ini deitiren herhangi bir method arldnda, deiikliin aacn aasndaki widget'larda yeniden oluturmalar tetikleyip tetiklemeyeceini bilmesi gerekir.

class AppState extends State<AppStateContainer> {  BlocProvider get blocProvider => widget.blocProvider;  // ... build methodu ve dier snf yeleri  // 'LIFTING STATE UP' REGION:  int cartCount = 0;  void updateCartCount(int count) {    setState(() => cartCount += count);  }}

AppState.setState arldnda kendini yeniden oluturur. Bu, inherited child widget'n yeniden oluturulmasna neden olur ve ardndan dahili olarak updateShouldNotify esini arr. Bu true ise, inherited widget bileenine bal state bilgisi olan widgetlarda didChangeDependencies arlr ve ardndan widgetlar yeniden oluturulur.

Bi sonraki blmde BLoC modelini reneceiz.. :)

Resources:
Flutter In Action Chapter:8
https://api.flutter.dev/flutter/widgets/InheritedWidget-class.html


Original Link: https://dev.to/gulsenkeskin/flutter-state-yonetimi-bolum-1-35a3

Share this article:    Share on Facebook
View Full Article

Dev To

An online community for sharing and discovering great ideas, having debates, and making friends

More About this Source Visit Dev To