Flutter : JSON 데이터 주고받기, Stream(스트림)

서버와의 통신은 대부분 JSON 데이터를 이용 함.

 

dart에서 JSON 데이터를 사용하려면 dart:convert 라이브러리를 포함해야 합니다.

import 'dart:convert';

 

jsonDecode(jsonString); 함수

JSON 형태의 데이터를 dynamic 형식의 리스트로 변환해서 반환합니다. 

 

서버로 데이터를 보낼 때는 jsonEncode() 함수 이용해서 JSON 형식으로 변환해야 함.

예 :

var num = [{'num': 1},{'num':2, 'boolean':true}];

var jsonText = jsonEncode(num); 

 

jsonEncdoe() 함수를 호출하면 키를 큰따옴표로 묶고 전체 데이터를 작은 따옴표로 묶어서 JSON 형식으로 변환해줌

 

✅ 스트림(Stream) = “데이터가 계속 흐르는 파이프”

📌 비동기 Future는 한 번만 값 줘요

Future<int> getDataOnce() async {
  await Future.delayed(Duration(seconds: 1));
  return 1; // 🎯 한 번만 값 줌
}

 

📌 Stream은 여러 개의 값을 순차적으로 줘요

Stream<int> countStream() async* {
  for (int i = 1; i <= 3; i++) {
    await Future.delayed(Duration(seconds: 1));
    yield i; // 🎯 1초마다 하나씩 값 줌
  }
}

🧠 Stream은 **“Future 여러 개가 시간 순서대로 흐르는 것”**이라고 생각하면 돼.

 

✅ 왜 Stream을 쓰는 거야?

상황	Future 쓰기 힘들고, Stream이 좋은 예
채팅 메시지 수신	계속 들어오는 메시지를 실시간으로 처리해야 함
센서 데이터	매초 온도나 위치 데이터를 받아야 함
실시간 리스트 로딩	예: 유튜브 댓글이 계속 올라옴

 

✅ Stream 기본 구조

void main() {
  Stream<int> numbers = countStream();

  numbers.listen((value) {
    print('받은 값: $value');
  });
}

 

💡 이건 이렇게 동작:

1초 후 → 받은 값: 1  
1초 후 → 받은 값: 2  
1초 후 → 받은 값: 3

• listen()은 스트림이 값을 보낼 때마다 실행되는 함수야.

✅ async* + yield 문법 설명

키워드	설명
async*	여러 값을 비동기로 보낼 함수임을 나타냄
yield	값을 하나씩 보내는 키워드 (return은 한 번만, yield는 여러 번)

Stream<String> greetings() async* {
  yield '안녕';
  await Future.delayed(Duration(seconds: 1));
  yield '반가워';
}

 

✅ UI에서 Stream 쓰는 법: 

StreamBuilder

Stream<int> countStream() async* {
  for (int i = 1; i <= 3; i++) {
    await Future.delayed(Duration(seconds: 1));
    yield i;
  }
}

class MyWidget extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return StreamBuilder<int>(
      stream: countStream(),
      builder: (context, snapshot) {
        if (!snapshot.hasData) {
          return CircularProgressIndicator();
        }
        return Text('현재 값: ${snapshot.data}');
      },
    );
  }
}

• StreamBuilder는 Stream의 상태에 따라 UI를 자동으로 다시 그림