Flutter StreamBuilder를 활용한 간단한 타이머 만들기

Flutter에서 데이터 스트림을 처리하는 데 유용한 위젯 중 하나는 StreamBuilder입니다. StreamBuilder는 스트림을 구독하고 데이터가 변경될 때마다 위젯을 업데이트하는 기능을 제공합니다.

이 글에서는 StreamBuilder를 사용하여 간단한 타이머를 만드는 방법을 소개하고자 합니다.

 

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

void main() => runApp(MyApp());

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter StreamBuilder Timer',
      home: MyHomePage(),
    );
  }
}

class MyHomePage extends StatefulWidget {
  @override
  _MyHomePageState createState() => _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> {
  Stream<int> counterStream() async* {
    for (int i = 1; i <= 5; i++) {
      await Future.delayed(Duration(seconds: 1));
      yield i;
    }
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Flutter StreamBuilder Timer'),
      ),
      body: Center(
        child: StreamBuilder<int>(
          stream: counterStream(),
          builder: (context, snapshot) {
            if (snapshot.hasError) {
              return Text('Error: ${snapshot.error}');
            }

            switch (snapshot.connectionState) {
              case ConnectionState.none:
                return Text('No connection');
              case ConnectionState.waiting:
                return Text('Waiting for data...');
              case ConnectionState.active:
                return Text('${snapshot.data}');
              case ConnectionState.done:
                return Text('Timer finished!');
            }
          },
        ),
      ),
    );
  }
}

 

코드 설명

• counterStream 함수는 1부터 5까지 숫자를 1초 간격으로 출력하는 Stream을 생성합니다.
• StreamBuilder 위젯은 counterStream을 구독하고 데이터가 변경될 때마다 builder 함수를 실행합니다.
• builder 함수는 Stream에서 받은 데이터를 화면에 표시합니다.
• snapShot은 nullable이므로 null 체크를 반드시 할 수 있도록 합니다.
• snapshot.connectionState는 Stream의 현재 연결 상태를 나타냅니다.
  • ConnectionState.none: Stream이 아직 시작되지 않았습니다.
  • ConnectionState.waiting: Stream이 데이터를 기다리는 중입니다.
  • ConnectionState.active: Stream이 데이터를 활발하게 전송하고 있습니다.
  • ConnectionState.done: Stream이 종료되었습니다.