Stateless vs Stateful Widget Yaşam Döngüsü Detayları

Stateless vs Stateful Widget Yaşam Döngüsü Detayları

Konunun Mimari Önemi ve Temel Çalışma Prensipleri

Flutter’da widget’lar, kullanıcı arayüzü oluşturmak için kullanılan temel yapı taşlarıdır. Widget’lar iki ana kategoriye ayrılır: Stateless ve Stateful widget’lar. Bu iki tür widget arasındaki temel fark, durum (state) yönetimi ve yaşam döngüsüleri üzerinde bulunur.

Stateless Widget: Durumu hiç değişmeyen widget’lardır. Her bir güncelleme veya yeniden oluşturma sırasında, yeni bir nesne yaratılır ve önceki durum kaybedilir. Bu, genellikle sabit veri veya yapı gösterimi için kullanılır.

Stateful Widget: Durumu değiştirebilen widget’lardır. Her bir durum değişimi, widget’ın yeniden oluşturulmasını ve yeni bir durumla güncellenmesini sağlar. Bu, kullanıcı girdisi veya dinamik veri akışları gibi durum değişiklikleri gerektiren senaryolar için kullanılır.

Kurumsal Projelerde Dikkat Edilmesi Gereken En İyi Pratikler (Best Practices)

• Stateless Widget Kullan: Olası olduğunda Stateless widget’ları tercih edin. Bu, performansı artırır ve kodun daha basit ve daha okunaklı olmasını sağlar.
• Stateful Widget Kapsayıcı Yap: Stateful widget’lar, durumu yönetmek için gereken tüm bilgileri içermelidir. Bu, kodun daha modüler ve yönetilebilir olmasını sağlar.
• Stateless Widget’ları Stateful Widget’ların Alt Elemanları Yap: Durumu yönetmeyen widget’lar, Stateful widget’ların alt elemanları olarak kullanılmalıdır. Bu, kodun daha akıcı ve anlaşılır olmasını sağlar.
• Performansı Optimizasyonu: Stateful widget’ların yaşam döngüsünü doğru bir şekilde yönetmek ve sadece gerekli widget’ları güncellemek, uygulamanın performansını büyük ölçüde artırabilir.

Gerçek Dünya Senaryolarına Uygun Kod Bloğu Örneği

import 'package:flutter/material.dart';

void main() {
  runApp(MyApp());
}

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(title: Text('Stateless vs Stateful Example')),
        body: Center(
          child: MyStatefulWidget(),
        ),
      ),
    );
  }
}

class MyStatefulWidget extends StatefulWidget {
  @override
  _MyStatefulWidgetState createState() => _MyStatefulWidgetState();
}

class _MyStatefulWidgetState extends State {
  int _counter = 0;

  void _incrementCounter() {
    setState(() {
      _counter++;
    });
  }

  @override
  Widget build(BuildContext context) {
    return Column(
      mainAxisAlignment: MainAxisAlignment.center,
      children: [
        Text('You have pushed the button this many times:'),
        Text(
          '$_counter',
          style: Theme.of(context).textTheme.headline4,
        ),
        ElevatedButton(
          onPressed: _incrementCounter,
          child: Text('Increment'),
        ),
      ],
    );
  }
}
    

Performans Optimizasyonu ve Olası Darboğazlar

Stateful widget’ların performansı, durum güncellemelerinin sıklığı ve widget ağacının derinliği üzerinde etkilidir. Aşağıdaki stratejiler, performansı artırmak için kullanılabilir:

• Stateless Widget’ları Kullan: Olası olduğunda Stateless widget’ları kullanarak, widget ağacındaki gereksiz güncellemeleri önler.
• Statefull Widget’ları Minimize Et: Sadece durumu yönetmek gereken widget’ları Stateful widget’lar olarak tutun. Diğer widget’lar Stateless widget’lar olarak bırakın.
• Widget Ağacını Optimizasyon: Widget ağacını mümkün olduğunca düz ve sade tutun. Gereksiz wrapper widget’larını ve gereksiz nested yapıları önleyin.
• Statefull Widget’ları Kapsayıcı Yap: Stateful widget’lar, durumu yönetmek için gereken tüm bilgileri içermelidir. Bu, kodun daha modüler ve yönetilebilir olmasını sağlar.