stream, StreamBuilder

stream은 정보의 흐름으로 비디오, 오디오 등 연속적인 정보를 말합니다.

비동기적으로 연속적인 데이터 흐름을 처리하는 방식을 Stream이라고 보시면 될 것 같습니다.

 

자세한 내용은 buffer, stream 등을 다룬 포스트가 따로 있으니 그 글을 살펴보시고, 여기서는 flutter의 StreamBuilder를 활용해보는 코드를 작성해보겠습니다.

 

우선 간단한 카운터 기능을 하는 위젯은 StreamBuilder를 통해 만들어보겠습니다.

물론 간단히 stful 위젯에서 setState로 count값을 조정하는 식으로 코딩하는 것이 훨씬 당연한 일일터입니다만 연습이니까...

 

우선 일반적인 state를 활용하는 방식입니다.

class Home extends StatefulWidget {
  @override
  _HomeState createState() => _HomeState();
}

class _HomeState extends State<Home> {
  int counter = 0;

  @override
  Widget build(BuildContext context) {
    return Scaffold(
    
        appBar: AppBar(title: Text("Counter!")),
        
        body: Center(
        
          child: Container(
          
            child: Column(
            
              mainAxisAlignment: MainAxisAlignment.center,
              children: <Widget>[
                RaisedButton(
                    onPressed: () {
                      setState(() {
                        counter++;
                      });
                    },
                    child: Text("add")),
                    
                Text("$counter", style: TextStyle(fontSize: 30)),
                
              ],
            ),
          ),
        ));
  }
}

 

 

StreamBuilder를 사용해서 진행해보겠습니다. 

 

stream을 만들기 위해 rxdart를 이용하겠습니다.

(rxjs 들어보셨죠? 예 그겁니다. 리액티브하게 만들어주는 거. Reactive Extension)

https://pub.dev/packages/rxdart#-readme-tab-

 

class Home extends StatefulWidget {
  @override
  _HomeState createState() => _HomeState();
}

class _HomeState extends State<Home> {
  final counterSubject = BehaviorSubject<int>();

  int counter = 0;

  @override
  Widget build(BuildContext context) {
    return Scaffold(
        appBar: AppBar(title: Text("Counter!")),
        body: Center(
          child: Container(
            child: Column(
              mainAxisAlignment: MainAxisAlignment.center,
              children: <Widget>[
                RaisedButton(
                    onPressed: () {
                      counterSubject.add(++counter);
                    },
                    child: Text("add")),
                    
                // StreamBuilder를 하나 만들었습니다.
                StreamBuilder<int>(
                    // 사용할 stream을 지정합니다.
                    stream: counterSubject.stream,
                    
                    // stream을 바디 전 초기값을 설정합니다.
                    initialData: 0,
                    
                    // builder를 통해 stream의 정보를 조작합니다.
                    builder: (context, snapshot) {
                    
                      // stream은 snapshot의 형태로 (일정 시점의 값) 넘어옵니다.
                      
                      if (snapshot.hasData) {
                        return Text("${snapshot.data}",
                            style: TextStyle(fontSize: 30));
                      }
                    }),
              ],
            ),
          ),
        ));
  }
}