Flutter State Managament Nedir?

Bunu öğrenmek ve iyice anlayıp kavramak için en temele inmemiz gerekir, ilk öğrendiğimiz şeye gidelim projeyi oluşturup flutter öğrenmeye başladığımız da gördüğümüz ve hep kullandığımız Stateful Widget ve Stateless Widget ama önce state nedir ona bakalım.

State Nedir?

State durum demektir, bir widget’ın ve uygulama’nın görünüm ve davranışına state denir, o Widgetın anlık bilgisi state dir. Flutter da her widgetın kendisine ait bir state vardır. Örneğin bir Text ,bu textin tüm özelliklerinin bir durumu vardır ve buna state denir mesela rengi kırmızı olsun , kırmızı onun durumu(state) dur.

State Managament Nedir?

Her widget da bir state var dedik, Widgetın durumunun(state) değişimini UI da kullanıcıya göstermeye ve yönetmeye State Managament denir.

Yukarıda bir Text var demiştik butona basınca text rengi siyah olmalı

Not: Bu kod, mantığın kolay anlaşılması için temel seviye basitleştirilmiş kullanım’dır profesyonel olarak Mimari ve oop ye uyulmalıdır.

Bu kod parçasında 2 tane farklı renk belirledik.

class MyHomePage extends StatefulWidget {
  const MyHomePage({super.key,});
  @override
  State<MyHomePage> createState() => _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> {

  Color rengim= Colors.red;
  Color siyah = Colors.black;

  @override

Burada Text Widget ekledik ve yazı rengine üstte belirlediğim ‘rengim’ değişkenini verdim.

 Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        backgroundColor: Theme.of(context).colorScheme.inversePrimary,
        title: Text("Medium"),
      ),
      body: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: <Widget>[

            Text(
              'Bu yazı',
              style: TextStyle(color: rengim),
            ),
          ],
        ),
      ),

Texte rengini verdik şimdi floatingActionButton a basınca text rengini değiştirmeye geldi.

 floatingActionButton: FloatingActionButton(
        onPressed: (){
          setState(() {
            rengim = siyah;
          });
        },
        tooltip: 'Increment',
        child: const Icon(Icons.add),
      ),

Eğer setState metodu olmazsa onPress içerisine yazdığım kod bellekte kalacak UI da gösterilmeyecekti , setState() ile Widget tree de bulunan tüm widgetlar yeniden çizildi son görüntüyü gördük ve her butona basışımızda widget tree de bulunan tüm widgetlar en baştan çizilecek ve son görüntüyü göreceğiz. Uygulama ne kadar büyükse State Yönetimini (State Managament) o kadar iyi yapmak gerekir. burada kullandığımız setState metodu bizim ilk State Managmentimizdir , bir widget ile başka bir widgeti kontrol ettik ve UI ya yansıttık .State ne olduğunu öğrendik State Managament mantığını da öğrendik sayılır, Stateles Widget ,Stateful Widget ve setState , ardından State Managament paketlerine baktığımızda tam kafamıza oturacak.

Dip Not: Bu konuya geldiğinize göre Stateless ve Statefull konularını bildiğinizi varsayıyorum çünkü arada uçurum var sadece mantığı kavratmak için özet geçeceğim eğer stateless ve statefull konularında detaylı bilginiz yoksa bu yazıyı bitirdikten sonra o konulara dönüp ciddi araştırma yapmalısınız, o halde devam👊

State: Durum

Managament: Yönetim, yönetmek

UI: Kullanıcı Arayüzü

Stateless Widget Nedir?

Uygulama Screenleri Statless Widget ve Statefull Widget ile oluşturulur bu 2 widget’dan birini seçersin ve uygulama ekranını oluşturmaya başlarsın ama neye göre seçilir ve State Managament için neden bu kadar önemlidir ? Hadi ona bakalım

Stateless: Durumsuz

Stateful: Durumsal

Stateless Widget kullanıldığında o widget ekrana 1 defa tek çizilir ve bir daha çizilmez yani State Mangament için uygun değildir ,örneğin yukarıdaki işlemi Stateful yerine Stateless da yapsaydık yazı rengini setState() kullanarak değişemezdik.

Stateless widgetlar ekrana çizildikten sonra güncellenmezler ve yaşam döngüleri yoktur. Build metodu override edilir ekrana çizilir ve öyle kalır, Statlessı sabit olarak kullanacağımız widgetlar da tercih ederiz, örneğin başlık değişmez o yüzden Stateless kullanırız.

Mesela şöyle düşün bir minbüsün ön camında kağıtla nereye gidildiği yazsın hastane, sanayi vb.😁 o yazılar sabit kalıyor değişmek için silip yeniden yazması lazım işte bu Stateless widget oluyor , birde led’li olanı var ama ona stateful widget da değineceğim😀.

Örnek bir Stateless Widget;

class Medium extends StatelessWidget {
  const Medium({Key? key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return const Scaffold();
  }
}

Stateful Widget

Aslında Stateless Widgetın tam tersi diyebiliriz, Statefull widget ile State işlemlerini yaparız. Adı üzerinde durumsal widget’dır duruma göre ekrana çizilir, Widgetın duruma göre değişen bir özelliği varsa Statefull kullanılır örneğin ilk örnek de gördüğünüz butona tıkladık ve yazı rengi değişti burada kullanılan setState metodu bizim ilk state managamentimiz dir.

Yolcu minbüsünü hatırladınız mı ? önünde cama asılı bir kağıtta gideceği yerler sabit bir şekilde yazılıydı, işte ledli ekran varsa ve o ekran sürekli değişip diğer adresler yazıyorsa ve şoförün durumuna isteğine göre değişiyorsa dinamik oluyordu yani Stateful.

Stateful widget mantığını öğrendik şimdi kod bloğuna bakalım

class Medium extends StatefulWidget {
  const Medium({Key? key}) : super(key: key);

  @override
  State<Medium> createState() => _MediumState();
}

class _MediumState extends State<Medium> {
  @override
  Widget build(BuildContext context) {
    return const Scaffold();
  }
}

Stateful Widgetın 8 adımdan oluşan bir yaşam döngüsü vardır, yaşam döngüsüne hızlıca göz atalım ardından Stateful konusunu geçelim;

Yaşam Döngüsü için Melisa Öztürk den alıntılayıp yazdım, yaşam döngüsünü daha iyi anlamak için *bu yazıyı* okumanızı tavsiye ederim çünkü ayrı önem verilmesi gereken bir konu.

1. createState(): Stateful widget için state nesnesini oluşturur. Her stateful widget ’ın state ‘i olmalıdır.

class Medium extends StatefulWidget {
  const Medium({Key? key}) : super(key: key);

  @override
  State<Medium> createState() => _MediumState();
}

2. initState(): State nesnesi oluşturulduğunda çalışan ilk metottur. Sadece bir kere çağırılır. Sadece çağırdığımızda çalışmasını istediğimiz değerler için kullanırız.

@override
void initState() {
super.initState();
// TODO: implement initState
}

3. didChangeDependencies(): Bir state değişikliği varsa ve initState() ve setState() ‘den hemen sonra çağırılır. Bu metodu, bu iki case arasında yapmak istediğimiz işlemler için kullanırız. Bu metottan sonra build metodu çağılır. Örneğin; build metodunu ağırlaştırmamak için API işlemlerini burada yapabiliriz.

@override
void didChangeDependencies() {
super.didChangeDependencies();
}

4.build(): Her ne zaman widget state değiştirmek istese çağırılır. Yani yaşam döngüsü boyunca defalarca çağırılabilir. (Örneğin; didUpdateWidget() ya da setState() metotlarından sonra çağırılır.) Widget ağaç yapının oluştuğu, döndürüldüğü yerdir. Bu metot olmadan state nesnesini oluşturamayız.

@override
Widget build(BuildContext context) {
return Scaffold(
);}

5. didUpdateWidget(): Parent widget ‘ta bir state değişikliği varsa bununla ilgili olarak state değişikliği yapılması gereken subWidget ‘lar için kullanırız. Widget aynı runtime ‘da rebuilt edilir. Bu metottan sonra her zaman build() metodu çağırılarak widget tekrar oluşturulur.

6. setState(): UI ‘ı etkileyebilecek bir durum değişikliğini bildirmek için kullanılır. Sonrasında build() metodu çağırılır ve widget tekrar çizilir.

setState(() {
// implement setState
});

7.deactivate(): Widget ağaç yapısından bir widget ya da state silindiği zaman state inactive duruma geçer. UI işlemleri tamamlandıktan sonra widget tekrar oluşturamamış yani hala inactive durumda ise kesin olarak silinir. Inactive durumdaki widget‘lar ekranda görünmez.

@override
void deactivate() {
super.deactivate();
_state.deactivate();
// TODO: implement deactivate
}

8. dispose(): State widget ağaç yapısından kalıcı olarak silindiğinde çağırılır. Nesnemize ait hafıza, listener vb. bağlantılı olduğu yapılar varsa bağlantıları kopartılır.

@override
void dispose() {
super.dispose();
// TODO: implement dispose
}

Stateful Widget ve Stateless Widget farkını iyi bilip detaylarıyla kavramanız state managament için çok önemlidir.

Evet State, State Managment , Stateless Widget ve Statefull Widget kavramlarını kafamıza oturttuk, şimdi paketlere geçelim.

State Mangament için setState metodu hem yetersiz hem çok fazla soruna neden olabiliyor, anladığınız üzere bu çok öenmli bir konu proje ne kadar büyük ve karmaşıksa o kadar iyi State Mangament yapmamız lazım örneğin instagramı baz alalım profil resminizi değiştirdiniz profil kısmında ve hikaye kısmında aynı anda nasıl değişmesi lazım setState ile bu ne kadar mümkün ? Birde işin içine veriler backend girdimi aboo 😱işte bu gibi ve daha gelişmiş durumlarda daha iyi State Managment yapmamız için Google ve developerlar tarafından çıkartılan çeşitli paketler bulunuyor.

Bu paketler ;

1. Provider
2. Mobx
3. Bloc

vb. paketler var uygulamanız için hangisi daha uygunsa onu kullanmalısınız , peki uygulamam için hangisinin uygun olduğunu nereden bileceğim ? işte bu sefer bu paketleri kullanmanız ve bilgi sahibi olmanız lazım örneğin normal basit bir projede provider kullanmanız çok daha iyi olurken karmaşık uygulamlarda Bloc tercihimdir. Evet State Mangament konusunu detaylıca anlattığımı düşünüyorum unutmayın canlı proje üzerinde çalışmadıkca öğrenemezsiniz başka yazılar da görüşmek üzere 👋