FutureBuilder 알아보기

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

대부분의 화면은 버튼 없이 열리는 순간 데이터를 불러옵니다. Flutter에는 비동기 결과를 보여 주는 위젯인 FutureBuilder가 있습니다. 여기에 비동기 작업을 전달하면, 작업의 상태가 바뀔 때마다 화면을 다시 구성합니다.

FutureBuilder<String>(
  future: _message,
  builder: (context, snapshot) {
    if (snapshot.hasData) {
      return Text(snapshot.data!);
    }
    return const CircularProgressIndicator();
  },
)

snapshot은 비동기 작업의 현재 상태를 나타냅니다. 결과가 도착하기 전에는 snapshot.hasData가 false이므로 로딩 표시기가 나타납니다. 결과가 도착하면 빌더가 다시 실행되고 snapshot.data에 문자열이 들어 있습니다.

snapshot.data의 타입은 String?입니다. 처음에는 데이터가 없으므로 문자열이거나 null입니다. 뒤에 붙은 !는 "확인했으며, null이 아니다"라는 뜻입니다. hasData를 확인한 뒤에만 사용하세요. 값이 null이면 앱이 충돌합니다.

시작 코드는 화면이 열릴 때 실행되는 initState에서 비동기 작업을 이미 한 번 만듭니다. late는 변수가 사용되기 전에 그곳에서 값을 받는다고 Dart에 알립니다. 다음 강의에서 왜 그곳에 두는지 알아봅니다.

챌린지

중급

앱은 initState에서 메시지를 불러오지만 표시하지는 않습니다. 자리 표시자 Text를 _message용 FutureBuilder<String>로 바꾸세요.

불러오는 동안 CircularProgressIndicator
메시지가 도착하면 크기 24로 표시

직접 해보기

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: const Text('The message goes here', style: TextStyle(fontSize: 24)),
      ),
    );
  }
}

실력 점검

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

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

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