Flutter ve Widget Kavramı

 

Flutter öğrenirken genel mantığını kavramak için yapılacak ilk şey, sanırım, widget’ları ve bunların hiyerarşisini öğrenmek. Ben de bu yazımda Flutter’da widget’lar ve widget ağacından bahsetmek istedim.

Widget Nedir?

Widget’lar, Flutter uygulamalarında kullanıcı arayüzünü oluşturmak için temel yapı taşlarıdır. Her şey bir widget’tir. Bir metin kutusu da, bir buton da, bir resim de, hatta ikonlar bile. Flutter’da her şey bir widget olarak temsil edilir.

Widget Türleri

Flutter’da kullanılan iki tür widget bulunur.

StatelessWidget:

• Durumsuz (Stateless): İçinde durum (state) barındırmaz. Yani, bir kez oluşturulduktan sonra içerdiği bilgiler değiştirilemez. Widget'ın görünümü, başlangıçtaki özelliklerine bağlıdır ve bu özellikler değişmedikçe widget kendisi değişmez.
• Sadece Build Metodu: Genellikle sadece “build” metodunu içerir. Bu metod, widget'ın nasıl görüntüleneceğini belirtir.

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(
          title: Text('Flutter ve Widget Kavramı'),
        ),
        body: Center(
          child: Text('Stateless Widget'),
        ),
      ),
    );
  }
}

Yukarıdaki örnekte appBar ve body içerisine yerleştirilen metinler değişmez olarak yazıldığından, burada bir durum değişimi yoktur. Uygulama her yenilendiğinde tekrar tekrar “build” edilmesine gerek olmadığından StatelessWidget tercih edilmelidir.

StatefulWidget:

• Durum İçerir (Stateful): İçerdiği bir “State” nesnesi sayesinde durumu takip edebilir. Yani, widget oluşturulduktan sonra durumu değişebilir ve bu durum değişiklikleri UI'ı güncellemek için kullanılır.
• State Sınıfı: Stateful Widget bir sınıftır, ancak asıl durum (state) bu sınıftan ayrı bir “State” sınıfında bulunur. “State” sınıfı, widget'ın durumunu içerir ve güncellendiğinde “build” metodu tekrar çağrılır.

class CounterApp extends StatefulWidget {
  @override
  _CounterAppState createState() => _CounterAppState();
}

class _CounterAppState extends State<CounterApp> {
  int _counter = 0;

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

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(
          title: Text('Sayac Uygulaması'),
        ),
        body: Center(
          child: Column(
            mainAxisAlignment: MainAxisAlignment.center,
            children: <Widget>[
              Text('Sayac Değeri: $_counter'),
              SizedBox(height: 20),
              ElevatedButton(
                onPressed: _incrementCounter,
                child: Text('Arttır'),
              ),
            ],
          ),
        ),
      ),
    );
  }
}

Bu örnekte ise CounterApp içerisinde bir State yönetimi gerekir. Burada bir sayaç işlemi mevcut ve bu sayacın değeri başlangıçta ekranda gösterilir ve “Arttır” butonuna tıklandığında sayacın değeri artar. Bu örnekte, _CounterAppState sınıfı durum değişikliklerini takip eder ve sayacın güncel değerini ekranda gösterir. Yani arka planda ve UI’da değişiklik mevcuttur ve uygulama her yenilendiğinde bu kod parçasının yeniden build edilmesi gerekir. Bu sebepten StatefulWidget kullanılması gerekir.

Öğrenim sürecimin başlarında state nedir, build etmek ne demektir gibi sorgulamaları sıkça yaparken şunu düşünmüştüm. Uygulamanın hangi kısmında stateful hangisinde stateless kullanacağımıza karar veremediysek stateful kullanıp geçebiliriz. Çünkü stateless stateful’un işlemlerini yapamıyor ama stateful her işi görür. :) Siz de böyle düşünmüş olabilirsiniz. Ancak burada karşımıza performans sorunları çıkıyor.

Kullanım Tavsiyeleri:

• Eğer bir widget’ın görünümü, oluşturulduktan sonra değişmeyecekse ve durum takibine ihtiyaç duyulmuyorsa, “Stateless Widget” kullanmak daha uygun olabilir.
• Eğer bir widget’ın görünümü, içerdiği verilere bağlı olarak değişecekse veya kullanıcı etkileşimleri sonucunda değişiklik gösterecekse, “Stateful Widget” kullanmak mantıklıdır.

İdeal durumda, widget’lar mümkün olduğunca durumsuz (stateless) olmalıdır, çünkü durumsuz widget’lar genellikle daha basit, hafif ve performanslıdır. Stateful, sadece gerekli olduğunda kullanılmalıdır.

Widget Ağacı

Flutter’da, widget’lar bir hiyerarşi oluşturarak bir ağaç yapısında düzenlenir.

- MaterialApp
  - Scaffold
    - AppBar
      - Text
    - Center
      - Column
        - Text
        - SizedBox
        - ElevatedButton

Yukarıdaki basit sayaç uygulamasının widget’ları şu şekilde bir ağaç yapısı oluşturur. Bu hiyerarşi, widget’ların nasıl gömülü olduğunu ve birbirleriyle ilişkili olduklarını gösterir. Bu, widget’ların nasıl yerleştirildiğini ve birbirleriyle etkileşime girdiğini anlamak için önemlidir.

Sonuç olarak, Flutter’da Widget ağacı, uygulamamızın arayüzünü oluşturmak için kullanılan temel bir kavram. Widget’lar, bir hiyerarşi içinde düzenleniyor ve bu ağaç yapısı, uygulamamızın görünümünü ve davranışını belirliyor. Umarım basitçe anlatabilmişimdir, faydalı olmayı umuyorum.

Sevgiler.

Selin.