Flutter’da “context” Meselesi

 

Flutter çalışmaya başlayalı yaklaşık 8 ay kadar oldu, genel yazım prensiplerini, widget ağacını anlamakta pek zorlanmadım diyebilirim.

Flutter’ı tercih etmekteki sebebim ise giderek popüler olması ve aynı kodla farklı platformlarda çıktı alınabiliyor olmasıydı. Gerçekten de kısa sürede minik de olsa uygulamalar geliştirebildim ve bu beni daha da motive etti.

Fakat bir context meselesi var ki, bunu ilk başlarda ezbere kullandığımı söylemezsem olmaz :) Neyse ki üzerinde çalıştıkça, farklı uygulamalar ve widget yapılarında kullandıkça mantığını kavradım ve benim gibi zorlananlar olabileceğini düşündüğüm için ilk olarak bunun üzerine yazmaya karar verdim.

Context nedir?

context ile ilgili ilk bilmemiz gereken şey, uygulamamızdaki widget ağacında bulunması ve sözlük anlamında olduğu gibi bir bağlam. Bu bağlam içerisinde mevcut durumu, konumu ve diğer widget’lar ile etkileşimi kontrol ediyor. Daha basit anlatımla bir widget’in içinde bulunduğu bağlamı ifade ediyor.

BuildContext nedir?

context’in ne olduğunu daha iyi anlayabilmek için bağlı bulunduğu BuildContext sınıfını anlamak çok önemli.

BuildContext widget ağacında bir noktayı işaret eder. Bu noktada, widget’ın yeri, tema bilgileri ve diğer bağlam bilgileri de yer alır. Biz bu yapıyı kullanarak widget’lar arasındaki bilgi ve durumu paylaşır, navigator metodlarını kullanır, tema bilgilerine erişiriz, ve bunun gibi daha bir çok şey. Böylelikle uygulamamız daha modüler, esnek ve sürdürülebilir hale gelir.

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: MyHomePage(),
    );
  }
}

Yukarıdaki kod, Flutter’da proje oluştururken bizim için otomatik olarak oluşturulan ilk kod. Burada build metodunun parametresi olarak BuildContext kullanıldığını görüyoruz. Burada “context” bu metodu çağıran yerden gelen bağlam bilgisini temsil ediyor.

@override
Widget build(BuildContext context) {
  return Scaffold(
    appBar: AppBar(
      title: Text('BuildContext Örneği'),
    ),
    body: Center(
      child: ElevatedButton(
        onPressed: () {
          // 'context' burada kullanılabilir
          showSnackBar(context);
        },
        child: Text('Snackbar Göster'),
      ),
    ),
  );
}

Bu örnekte, BuildContext’i kullanarak bir snackbar gösteriyoruz. showSnackBar metoduna context’i geçerek, metodun widget ağacındaki mevcut bağlamı kullanmasını sağlıyoruz.

Dolayısıyla SnackBar widget ağacının neresinde konumlandığını, bağlamının ne olduğunu, nereden tetiklendiğini bu context sayesinde tespit ederek buna göre davranıyor. Yani shoxSnackBar context’ini build metodunun context’inden alıyor. O context, bu context :).

Sonuç olarak geliştirdiğimiz Flutter uygulamamızın daha sürdürülebilir ve esnek olabilmesi widget’lar arasındaki düzgün iletişime bağlı ve bunu da BuildContext yapısıyla çok kolay bir şekilde kullanabiliyoruz.

Umarım mevcut kafa karışıklıklarını biraz olsun giderebilmişimdir ve faydam dokunmuştur.

Sevgiler.

Selin.