Flutter :: StreamBuilder vs FutureBuilder

 

streambuilder / futurebuilder는 firebase를 연동하며 자주 만날 수 있는 친구들이다.

firebase안에 data들이 있는데, 그것들이 변할 때, 정보를 계속적으로 읽는 역할을 한다.

 

Futurebuilder

한 번만 가져온다.

 

StreamBuilder

변화가 발생할 때마다 연속적으로 계속 가져온다

 

1) CollectionReference로 접근하여 특정 Document 하나의 data 읽기

Future<void> _getProduct() async {
      try {
        CollectionReference products =
            FirebaseFirestore.instance.collection('Products');

        await products
            .doc(arguments.docsName)
            .get()
            .then((DocumentSnapshot ds) {
          setState(() {
            _price = ds.data()['price'];
            _name = ds.data()['name'];
            _description = ds.data()['description'];
            _like = ds.data()['like'];
          });
        });
      } on firebase_storage.FirebaseException catch (e) {
        print(e);
      }
    }

 

2) DocumentReference로 접근하여 Data 읽기

Future<void> _getProduct() async {
      try {
        DocumentReference products = FirebaseFirestore.instance.collection("Products").doc(arguments.docsName);
        await products
            .get()
            .then((DocumentSnapshot ds) {
          setState(() {
            _price = ds.data()['price'];
            _name = ds.data()['name'];
            _description = ds.data()['description'];
            _like = ds.data()['like'];
          });
        });
      } on firebase_storage.FirebaseException catch (e) {
        print(e);
      }
    }

 

3) StreamBuilder사용하기

import 'package:Shrine/app.dart';
import 'package:cloud_firestore/cloud_firestore.dart';
import 'package:flutter/material.dart';
import 'package:firebase_storage/firebase_storage.dart' as firebase_storage;

import 'home.dart';

class DetailPage extends StatefulWidget {
  @override
  _DetailPageState createState() => _DetailPageState();
}

class _DetailPageState extends State<DetailPage> {

  @override
  Widget build(BuildContext context) {
    
    DetailArguments arguments = ModalRoute.of(context).settings.arguments;
    Record record = arguments.record;

    print("record Name:!! $record");

    Future<void> _deleteProduct() async {
      try {
        CollectionReference products =
            FirebaseFirestore.instance.collection('Products');
        products
            .doc(arguments.docsName)
            .delete()
            .then((value) => Navigator.pop(context));
      } on firebase_storage.FirebaseException catch (e) {
        ////e.code == 'canceled'
        print(e);
      }
    }

    Widget _buildContainer(
        BuildContext context, AsyncSnapshot<DocumentSnapshot> snapshot) {
      return Column(
        children: <Widget>[
          SizedBox(height: 20),
          SizedBox(
            height: 230,
            width: double.infinity,
            //child: Image.network(imageURL),
            child: Image.network(snapshot.data.data()['imageURL']),
          ),
          Container(
              padding: EdgeInsets.all(50),
              child: Column(
                crossAxisAlignment: CrossAxisAlignment.start,
                children: <Widget>[
                  Row(
                    children: <Widget>[
                      Text(
                        "${snapshot.data.data()['name']}",
                        style: TextStyle(fontSize: 30),
                      ),
                      IconButton(
                        icon: Icon(Icons.thumb_up),
                        onPressed: () {
                          //TODO 좋아요 숫자.
                        },
                      ),
                      Text(
                        "${snapshot.data.data()['like'].toString()}"
                      ),
                    ],
                  ),
                  Text(
                    "\$ ${snapshot.data.data()['price'].toString()}",
                    style: TextStyle(fontSize: 20),
                  ),
                  Divider(
                    thickness: 3,
                  ),
                  Text(
                    record.description,
                  ),
                  SizedBox(height: 200),
                  Text(
                    "Creator: <${record.uid}>",
                  ),
                  Text(
                    "${snapshot.data.data()['creationTime'].toDate().toString()} Created",
                  ),
                  Text(
                    "${snapshot.data.data()['updateTime'].toDate().toString()} Modified",
                  ),
                ],
              )),
        ],
      );
    }

    return Scaffold(
        appBar: AppBar(
          title: Text("Detail"),
          centerTitle: true,
          actions: <Widget>[
            IconButton(
                icon: Icon(Icons.edit),
                onPressed: () {
                  } else {
                    print("It is not yours!!");
                  }
                }),
            IconButton(
                icon: Icon(Icons.delete),
                onPressed: () {
                    _deleteProduct();
                }),
          ],
        ),
        body: StreamBuilder<DocumentSnapshot>(
          stream: FirebaseFirestore.instance
              .collection("Products")
              .doc(arguments.docsName)
              .snapshots(),
          builder: (context, snapshot) {

            return _buildContainer(context, snapshot);
}