[TIL] 21.04.09

스트림 예제 - 카운터

지난번에 이해했던 스트림에 대한 예제를 작성해보겠다. 가장 기본적인 카운터 앱을 예제로 삼아 제작해볼건데, 스트림의 특징을 살리기에는 조금 부족한 예제일 수는 있어도 기본적인 상태 관리에 스트림이 어떻게 적용되는지 알기에는 적합할 것 같다.
실제 스트림의 특징인 비동기 처리에 장점을 갖는다는 것은 API를 연동하여 데이터를 가져오는 경우에 확인할 수 있을 것이다. 이는 BloC을 공부하며 심화 예제를 실습할 때 해보겠다.

// lib/screen_home.dart
import 'dart:async';
import 'package:flutter/material.dart';

class HomeScreen extends StatefulWidget {
  @override
  _HomeScreenState createState() => _HomeScreenState();
}

class _HomeScreenState extends State<HomeScreen> {
  int _counter = 0;
  late StreamController _streamController; // late: 나중에 초기화시켜주겠다고 미뤄놓기
  late Stream _stream;

  @override
  void initState() {
    super.initState();
    _streamController = StreamController();
    _stream = _streamController.stream;
  }

  void _incrementCounter() {
    _streamController.sink.add(_counter++);
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Counter'),
      ),
      body: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: <Widget>[
            Text(
              'You have pushed the button this many times:',
            ),
            StreamBuilder(
                stream: _stream,
                builder: (BuildContext context, AsyncSnapshot snapshot) {
                  return Text(
                    snapshot.data != null ? snapshot.data.toString() : "0",
                  );
                })
          ],
        ),
      ),
      floatingActionButton: FloatingActionButton(
        onPressed: _incrementCounter,
        tooltip: 'Increment',
        child: Icon(Icons.add),
      ),
    );
  }

  @override
  void dispose() {
    _streamController.close();
    super.dispose();
  }
}

코드를 보면 스트림 관련하여 총 3가지의 객체가 등장한다. 각각에 대해 정리해보겠다.

1. Stream: 앞서 말했던 데이터가 흐르는 강 역할이다.
2. StreamController: 스트림을 제어/관리해주는 객체이다.
3. StreamBuilder: 스트림의 데이터를 활용해 위젯을 빌드하기 위한 객체이다. 스트림 데이터를 받아와 위젯을 빌드한다.

이제 스트림을 대강 살펴보았다. 사실 스트림은 내용이 엄청 많고 할 것도 많음.. 더 봐야겠지만 지금은 BloC을 빨리 적용하고 싶은 마음이 커서 일단은 이정도에서만 마무리하겠다.