비동기 데이터 처리하기

FutureBuilder (비동기)

• Future와의 상호작용에 대한 최신 스냅샷을 기반으로 자체적으로 구축되는 위젯
• 주로 사용하는 속성
  • Future<dynamic>? future
    • 반환받을 데이터
    • 필수
  • Function(BuildContext, AsyncSnapshot<dynamic>) builder
    • future가 반환한 데이터를 통해 만들 위젯을 생성하는 빌더 메소드
    • 필수
  • dynamic initialData
    • 기본 데이터
• 참고

final Future<String> _calculation = Future<String>.delayed(
    const Duration(seconds: 2),
    () => 'Data Loaded',
);

FutureBuilder<String>(
    future: _calculation,
    builder: (BuildContext context, AsyncSnapshot<String> snapshot) {
        List<Widget> children;

        if (snapshot.hasData) {
            children = <Widget>[
                const Icon(
                    Icons.check_circle_outline,
                    color: Colors.green,
                    size: 60,
                ),
                Padding(
                    padding: const EdgeInsets.only(top: 16),
                    child: Text('Result: ${snapshot.data}'),
                ),
            ];
        } else if (snapshot.hasError) {
            children = <Widget>[
                const Icon(
                    Icons.error_outline,
                    color: Colors.red,
                    size: 60,
                ),
                Padding(
                    padding: const EdgeInsets.only(top: 16),
                    child: Text('Error: ${snapshot.error}'),
                ),
            ];
        } else {
            children = const <Widget>[
                SizedBox(
                    width: 60,
                    height: 60,
                    child: CircularProgressIndicator(),
                ),
                Padding(
                    padding: EdgeInsets.only(top: 16),
                    child: Text('Awaiting result...'),
                ),
            ];
        }

        return Center(
            child: Column(
                mainAxisAlignment: MainAxisAlignment.center,
                children: children,
            ),
        );
    },
)

StreamBuilder (비동기)

• Stream과의 상호작용의 최신 스냅샷을 기반으로 자체적으로 구축되는 위젯
• 주로 사용하는 속성
  • Stream<dynamic>? stream
    • 반환받을 데이터
    • 필수
  • Function(BuildContext, AsyncSnapshot<dynamic>) builder
    • future가 반환한 데이터를 통해 만들 위젯을 생성하는 빌더 메소드
    • 필수
  • dynamic initialData
    • 기본 데이터
• 참고

final Stream<int> _bids = (() {
    late final StreamController<int> controller;

    controller =
        StreamController<int>(
            onListen: () async {
                await Future<void>.delayed(const Duration(seconds: 1));
                controller.add(1);
                await Future<void>.delayed(const Duration(seconds: 1));
                await controller.close();
            },
        );
    return controller.stream;
})();

StreamBuilder<int>(
    stream: _bids,
    builder: (BuildContext context, AsyncSnapshot<int> snapshot) {
        List<Widget> children;

        if (snapshot.hasError) {
            children = <Widget>[
                const Icon(
                    Icons.error_outline,
                    color: Colors.red,
                    size: 60,
                ),
                Padding(
                    padding: const EdgeInsets.only(top: 16),
                    child: Text('Error: ${snapshot.error}'),
                ),
                Padding(
                    padding: const EdgeInsets.only(top: 8),
                    child: Text('Stack trace: ${snapshot.stackTrace}'),
                ),
            ];
        } else {
            switch (snapshot.connectionState) {
                case ConnectionState.none:
                    children = const <Widget>[
                        Icon(
                            Icons.info,
                            color: Colors.blue,
                            size: 60,
                        ),
                        Padding(
                            padding: EdgeInsets.only(top: 16),
                            child: Text('Select a lot'),
                        ),
                    ];
                case ConnectionState.waiting:
                    children = const <Widget>[
                        SizedBox(
                            width: 60,
                            height: 60,
                            child: CircularProgressIndicator(),
                        ),
                        Padding(
                            padding: EdgeInsets.only(top: 16),
                            child: Text('Awaiting bids...'),
                        ),
                    ];
                case ConnectionState.active:
                    children = <Widget>[
                        const Icon(
                            Icons.check_circle_outline,
                            color: Colors.green,
                            size: 60,
                        ),
                        Padding(
                            padding: const EdgeInsets.only(top: 16),
                            child: Text('\$${snapshot.data}'),
                        ),
                    ];
                case ConnectionState.done:
                    children = <Widget>[
                        const Icon(
                            Icons.info,
                            color: Colors.blue,
                            size: 60,
                        ),
                        Padding(
                            padding: const EdgeInsets.only(top: 16),
                            child: Text('\$${snapshot.data} (closed)'),
                        ),
                    ];
            }
        }

        return Column(
            mainAxisAlignment: MainAxisAlignment.center,
            children: children,
        );
    },
)