[Flutter] realtimedatabae에서 Data를 불러오자! 3편 RealtimeDatabase불러오기

https://firebase.google.com/docs/database/flutter/start?authuser=0 

실시간 데이터베이스 시작하기  |  Firebase 실시간 데이터베이스

 

 

요약 : RealtimeDatabase의 get()이 뱉어주는 응답은 List<object?> 혹은 Map<object, Object?>이기 때문에 파싱을 잘해야 한다.

 

일단 set부터 하는게 좋겠다. 

 

getData를 다음과 같이 바꿔준다.

그러면

 

이렇게 될 것이다.

 

다시 추가했던 부분을 지워주기

우리는 RealtimeDatabase에서 데이터를 받고싶다.

 

FutureBuilder부분에 getData가 아닌 

을 해준다.

value.value의 런타입을 찍어보면 List<object?>인 것을 볼 수 있다.

 

아까처럼 jsonDecode(snapshot.data)를 하면 빨간줄로 오류가 찍힌다.

tostring으로 바꾸고 실행 해보면

오류뜸 이 이유는 우리가 받아온 데이터가 Json형식이 아니기 때문이다.

 

이유는 왜인지 모르겠는데, 우리가 받아온 Realtimedatabase의 값들은 json값이 아니다. 그래서 우리는 jsondecode를 이용할려면, 정말 기이하게도 다음과 같은 형식을 취해야 한다.

jsonDecode(jsonencode(snapshot.data))

를 하여 데이터를 파싱해야 한다.

다음과 같은 runtmeType을 얻을 수 있다.

 

 

처음에 봤던 json형식으로 데이터를 model에 넣을 수 있다.

 

import 'dart:convert';
import 'package:firebase_database/firebase_database.dart';
import 'package:flutter/material.dart';
import 'package:http/http.dart' as http;
import 'package:testjson/Model.dart';

Future<String> getData() async {
  String url = "https://jsonplaceholder.typicode.com/comments";
  http.Response response = await http.get(Uri.parse(url));
  return response.body;
}

Future<Object?> getDataFromRTDB() async {
  var ref = FirebaseDatabase.instance.ref('comments');
  var value = await ref.get();
  return value.value;
}

class TestRestAPI extends StatefulWidget {
  const TestRestAPI({Key? key}) : super(key: key);

  @override
  State<TestRestAPI> createState() => _TestRestAPIState();
}

class _TestRestAPIState extends State<TestRestAPI> {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(),
      body: Center(
          child: FutureBuilder(
              future: getDataFromRTDB(),
              builder: (context, snapshot) {
                if (!snapshot.hasData) {
                  //future실행 할 때 데이터를 기다림
                  return CircularProgressIndicator();
                } else if (snapshot.hasError) {
                  //만약 통신시 에러가 날 경우 데이터 표시
                  return Text('${snapshot.hasError.toString()}');
                } else {
                  var tempvalue = jsonDecode(jsonEncode(snapshot.data));
                  List<Comment> Comments = [];
                  for (Map<String, dynamic> i in tempvalue) {
                    var tempValue = Comment.fromJson(i);
                    Comments.add(tempValue);
                  }
                  print('Comments[1]의 이름은? ${Comments[1].name}');
                  return ListView(
                    children: [
                      Text('${Comments[1].name}'),
                    ],
                  );
                }
              })),
    );
  }
}

class Comment {
  int? postid;
  int? id;
  String? name;
  String? email;
  String? body;

  Comment({this.postid, this.id, this.body, this.name, this.email});

  Comment.fromJson(Map<String, dynamic> json) {
    postid = json['postId'];
    id = json['id'];
    name = json['name'];
    email = json['email'];
    body = json['body'];
  }

  Map<String, dynamic> toJson() {
    final Map<String, dynamic> data = new Map<String, dynamic>();
    data['postId'] = this.postid;
    data['id'] = this.id;
    data['name'] = this.name;
    data['email'] = this.email;
    data['body'] = this.body;
    return data;
  }
}