다시 시도 버튼

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

연결은 복구됩니다. 좋은 오류 화면은 사용자를 막막하게 두지 않습니다. 무슨 일이 일어났는지 알려 주고 다시 시도할 방법을 제공합니다.

다시 시도하는 것은 새로고침입니다. 새로고침 버튼과 마찬가지로 setState에서 새 Future를 만듭니다.

void tryAgain() {
  setState(() {
    _message = fetch('/message');
  });
}

한 가지 세부 사항이 있습니다. 새 Future가 실행되는 동안 스냅샷은 이전 데이터를 유지하는 것처럼 마지막 오류를 유지합니다. 새 응답이 도착할 때까지 hasError는 true로 남습니다. 두 번째 시도 중에 스피너를 표시하려면 먼저 snapshot.connectionState를 확인하세요.

if (snapshot.connectionState == ConnectionState.waiting) {
  return const CircularProgressIndicator();
}
if (snapshot.hasError) {
  // 오류와 버튼
}
return Text(snapshot.data!);

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

챌린지

중급

오류 상태에서 벗어날 방법을 추가하세요:

오류 텍스트 아래에 다시 시도 버튼을 추가하세요
이 버튼을 누르면 setState에서 새 fetch('/message')를 설정합니다
다시 시도하는 동안 스피너가 표시됩니다. 빌더에서 먼저 ConnectionState.waiting을 확인하세요

직접 해보기

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.hasError) {
              return Text(
                'Could not load: ${snapshot.error}',
                style: const TextStyle(fontSize: 20),
              );
            }
            if (snapshot.hasData) {
              return Text(snapshot.data!, style: const TextStyle(fontSize: 24));
            }
            return const CircularProgressIndicator();
          },
        ),
      ),
    );
  }
}

실력 점검

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

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

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