FutureBuilder 오류 상태

Coddy Flutter 여정의 데이터와 네트워크 섹션에 포함된 레슨. 27개 중 13번째.

FutureBuilder는 오류를 대신 처리해 줍니다. future에서 예외가 발생해도 아무것도 충돌하지 않습니다. 빌더가 다시 실행되고 snapshot.hasError는 true로 설정되며, snapshot.error에는 발생한 예외가 저장됩니다.

따라서 모든 로딩 화면에는 세 가지 상태가 있으며, 빌더가 각 상태를 처리합니다.

if (snapshot.hasError) {
  return Text('Could not load: ${snapshot.error}');
}
if (snapshot.hasData) {
  return Text(snapshot.data!);
}
return const CircularProgressIndicator();

오류, 데이터, 그리고 그 외의 경우에는 여전히 로딩 중입니다. 데이터만 처리하는 빌더는 호출이 실패했을 때 로딩 표시기를 계속 보여 줍니다. 데이터가 들어올 일이 없기 때문입니다.

각 검사는 해당 검사를 가릴 수 있는 return보다 앞에 두세요. "데이터 없음"을 처리하는 로딩 표시기의 return이 먼저 나오면, 그 아래의 오류 줄은 실행될 수 없습니다.

미리보기에서 실패하는 것을 확인하려면 main의 첫 줄에 offline = true;를 작성하고 실행을 누르세요. offline은 api.dart에서 가져옵니다. 이 값은 휴대전화에 신호가 없는 것처럼 모든 호출을 실패하게 합니다. 확인을 누르기 전에 이 줄을 삭제하세요.

챌린지

중급

연결이 없으면 이 화면은 계속 로딩됩니다. 빌더에 오류 상태를 추가하세요. snapshot.hasError일 때 Could not load: 뒤에 snapshot.error를 표시하고 크기는 20으로 설정하세요.

직접 해보기

import 'package:flutter/material.dart';

import 'api.dart';

void main() {
  runApp(const MyApp());
}

class MyApp extends StatelessWidget {
  const MyApp({super.key});

  @override
  Widget build(BuildContext context) {
    return const MaterialApp(
      debugShowCheckedModeBanner: false,
      home: MessageScreen(),
    );
  }
}

class MessageScreen extends StatefulWidget {
  const MessageScreen({super.key});

  @override
  State<MessageScreen> createState() => _MessageScreenState();
}

class _MessageScreenState extends State<MessageScreen> {
  late Future<String> _message;

  @override
  void initState() {
    super.initState();
    _message = fetch('/message');
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: Center(
        child: FutureBuilder<String>(
          future: _message,
          builder: (context, snapshot) {
            if (snapshot.hasData) {
              return Text(snapshot.data!, style: const TextStyle(fontSize: 24));
            }
            return const CircularProgressIndicator();
          },
        ),
      ),
    );
  }
}

실력 점검

이 레슨에는 짧은 퀴즈가 포함되어 있습니다. 레슨을 시작해 문제를 풀고 진행 상황을 기록하세요.

데이터와 네트워크의 모든 레슨

직접 연습해 보세요: 온라인 Flutter 컴파일러