iT邦幫忙

第 12 屆 iThome 鐵人賽

DAY 10
1
Mobile Development

Flutter App 開發實戰系列 第 10

專案的好幫手 Firebase |補充篇 [DAY 10]

在 firebase 中最重要的部分就是,它提供了實時監聽的功能,當資料庫的狀態被改變時,我們能夠很及時的拿到更新後的資料,這個部分在 iOS 與 Android 中,firebase 都幫我們做好了相關的功能讓我們去使用,我們就可以不需要自己去實作對後端的即時觀察和更新,我第一次在 flutter 上使用 firebase 時,想到的就是可以把 setState() 交給 firebase 做狀態的更新,當資料改變時,狀態也會跟著改變,這樣就完成一個簡單的綁定囉。
對基本使用跟部署有興趣的人可以參考下面這兩篇
專案的好幫手 Firebase |部署篇
專案的好幫手 Firebase |使用篇


實時監聽

onChildChanged

//FirebaseService.dart 
class FirebaseService{
  FirebaseDatabase _database = FirebaseDatabase.instance ;
  //定義 onChange 傳入一個 function在資料更新後去執行
  void listen(User user , Function(DataSnapshot) onChange) async{
     
    //監聽 users/user.id/ 底下的資料 
    Query query = _database.reference().child("users").child(user.id);
    //開始監聽 
    query.onChildChanged.listen((event) async {
      if(event.snapshot != null) {
        //執行 onChange
        onChange(event.snapshot);
      }
    });
  }
}

使用

User user = User("0","Leo");
FirebaseService().listen(user, (snapshot) => {
    print(snapshot.key),
    print(snapshot.value)
}) ;

我們可以手動新增/更新資料看看
https://ithelp.ithome.com.tw/upload/images/20200910/20130127VOpw0lCzNd.png

可以發現輸出也有跟著改變,
//output
flutter: name
flutter: Leo1

當我們開啟新的一個 page 時,firebase 其實還在後台運作,這時候更新data 依然有反應,當我們不需要監聽時:

//選擇要取消的 query 
query.cancel()

實際使用

  Future<User> getUser(String id) async{
    DataSnapshot dataSnapshot = await _database.reference()
    .child("users")
    .child(id)
    .once() ;
    Map<String, dynamic> json =  Map<String, dynamic>.from(dataSnapshot.value);
    return User.fromJson(json);
  }
  
  //當 user 更新時我們可以獲得一個新的 user 
  //Function 可以 傳入 setState 做狀態的綁定 
  void listen(User user , Function(User) onChange) async{
    
    Query query = _database.reference()
    .child("users").child(user.id);
    
    query.onChildChanged.listen((event) async {
      if(event.snapshot != null) {
        User userData = await getUser(user.id);
        onChange(userData);
      }
    });
    
  }

Firebase 到目前這邊應該可以先告個段落了,如果之後有用到可以再跟大家分享實際使用的狀況,或是有人想繼續了解相關的主題也可以回覆給我知道,不然每天要想主題也是蠻累人的哈哈


上一篇
專案的好幫手 Firebase |使用篇 [DAY 9]
下一篇
來做個儲值頁面吧 [DAY 11]
系列文
Flutter App 開發實戰30

尚未有邦友留言

立即登入留言