Flutter StreamBuilder vs FutureBuilder

Flutter’da StreamBuilder vs FutureBuilder arasındaki farkları anlatacağım bu yazıya hoşgeldiniz. FutureBuilder’ın nasıl kullanıldığını anlattığım bu yazıyı okumadıysanız hemen okuyun. Daha sonrasında da bu yazı içerisinde hem ufaktan StreamBuilder nedir ne değildir sorularına cevap verirken hem de bir yandan FutureBuilder ile StreamBuilder’ı karşılaştıracağız.

StreamBuilder nedir?

StreamBuilder, aktif olarak sürekli yeni event verilerini sağlayan bir Stream bağlantısının verilerini ekrana anlık olarak basmasını sağlayan bir widget’tır. Bildiğimiz üzere Stream, Türkçe’ye akıntı, akış olarak çevrilebilir. Yani bir kaynaktan sürekli akan verileri uygulamamızda göstermek istiyorsak, bir StreamBuilder kullanırız.

StreamBuilder hangi durumlarda kullanılır?

StreamBuilder, birçok verinin anlık değişebileceği ve bu değişimlerin de anlık kullanıcılara gösterilmesi gerektiği durumlarda kullanılabilir. Örneğin UBER gibi bir uygulamadan taksi çağırdınız. Taksinin konumunun anlık haritada değişmesi StreamBuilder gibi bir widget’la mümkündür.

StreamBuilder nasıl kullanılır?

Flutter projenizde varsayalım Firebase kullanıyorsunuz ve bir collection içerisindeki dökümanların değişip değişmediği durumları anlık olarak kullanıcıya göstermek istiyorsunuz diyelim. Bu durumda bir StreamBuilder yazalım ve stream: kısmını ise şu şekilde dolduralım:

      stream: _firestore
          .collection('users')
          .doc(Provider.of<Store>(context).userId)
          .collection('location')
          .snapshots(),

Yukarıdaki kod parçasını kendi uygulamanıza uygun olarak doldurabilirsiniz. Bu query ile beraber bir snapshot oluşturuyorsunuz ve aynı zamanda active snapshot listener açmış oluyorsunuz. Böylelikle belirttiğiniz collection içerisindeki tüm döküman değişikliklerini anlık kullanıcıya gösterebilirsiniz demek oluyor.

    return StreamBuilder<QuerySnapshot>(
      stream: _firestore
          .collection('users')
          .doc(Provider.of<Store>(context).userId)
          .collection('locations')
          .snapshots(),
      builder: (context, snapshot) {
        if (!snapshot.hasData || snapshot.data == null) return Container();

        final locations = snapshot.data.docs.reversed;
        List<Widget> locationList = [];
        for (var location in locations) {
          final lat = location.data()['lat'];
          final lng = location.data()['lng'];
          final widget = LocationWidget(
            lat: lat,
            lng: lng,
          );
          locationList.add(widget);
        }
        return ListView(
          padding: EdgeInsets.symmetric(vertical: 5.0, horizontal: 5.0),
          children: locationList,
        );
      },
    );

StreamBuilder vs FutureBuilder : Arasındaki farklar neler?

FutureBuilder, Future ile beraber kullanılan bir widget’tır ve yalnızca bir defa tetiklenir yani sadece build anında tetiklenir. Veri ekrana basıldığında veya FutureBuilder ile istendikten sonra veri kaynağında değişse dahi bu değişiklik FutureBuilder’a yansımaz. Bu yüzden Future objeleri tıpkı Javascript’teki Promise, C#’taki Task gibi objelere benzer.

StreamBuilder, Stream ile beraber kullanılan bir widget’tır ve verileri daima dinleyen bir yapıdır. Verilerde değişiklik oldukça bu değişiklikler snapshot listener aracılığıyla daima kullanıcı tarafına aktarılır. Ayrıca Stream objelerine Listener eklenebilirken, Future objelerine Listener eklenemez çünkü Stream daimi bir veri akışını sağlarken Future yalnızca bir defa çalışır, bir request ve bir response tutar.

Son olarak bir uyarıyla yazımı sonlandırmak istiyorum: StreamBuilder ve Stream objesi siz kapatmadıkça verileri dinler, bu da Firebase üzerinde ciddi bir okuma yükü demek. Bu yüzden StreamBuilder’ı kullanırken bir yandan da dikkat etmenizi tavsiye ederim. Kabarık bir faturayla karşılaşmak istemezsiniz. 🙂 Firebase ile çalışırken okuma sayısını azaltmanın birçok yolu var, merak ediyorsanız bu yazımı da okuyabilirsiniz.

StreamBuilder ve FutureBuilder arasındaki farkları anlattığım bu yazının sonuna geldik. Artık Flutter projenizde hangi yerlerde StreamBuilder, hangi yerlerde ise FutureBuilder kullanabileceğinizi biliyorsunuz. İyi kodlamalar! 🙂

Okuyucuya Not

Merhaba okuyucu! Blogum son zamanlarda yüksek trafik almaya başladı ve bu durumdan memnunum fakat aynı zamanda siz ziyaretçileri tatmin edememekten endişeliyim. 🙂 Eğer yazılarım ile ilgili bir tavsiyeniz olursa mail adresimden bana ulaşabilir veya Twitter üzerinden direct message gönderebilirsiniz. Github’ta örnek olarak yaptığım projelere göz atmak isterseniz de bu linki kullanabilirsiniz. Umarım bu ziyaretinizle size bir şeyler katabilmişimdir.

Sağlıcakla kalın!