나중에 도착하는 값

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

지금까지는 앱에서 모든 일이 한꺼번에 일어났습니다. 버튼을 누르면 화면이 바뀝니다. 실제 앱은 기다리는 경우가 많습니다. 서버의 응답을 기다리고, 파일이 로드되기를 기다리고, 타이머가 끝나기를 기다립니다.

Dart에서는 아직 준비되지 않은 값을 Future라고 합니다. 가장 간단한 예는 Future.delayed입니다. Duration만큼 기다린 다음, 전달한 함수를 실행합니다.

Future.delayed(const Duration(seconds: 2), () {
  setState(() {
    message = 'Done';
  });
});

기다리는 동안 앱이 멈추지는 않습니다. 화면은 계속 그려지고 버튼도 계속 작동합니다. 2초가 지나면 Dart가 함수를 실행하고, setState가 새 메시지가 표시되도록 화면을 다시 그립니다.

챌린지

쉬움

Boil water를 탭하면 Tea is ready가 즉시 표시됩니다. 물이 끓는 데는 시간이 걸립니다. 탭한 후 3초 뒤에 Future.delayed를 사용해 메시지가 바뀌도록 하세요.

직접 해보기

import 'package:flutter/material.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: TeaScreen(),
    );
  }
}

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

  @override
  State<TeaScreen> createState() => _TeaScreenState();
}

class _TeaScreenState extends State<TeaScreen> {
  String message = 'The water is cold';

  void boil() {
    setState(() {
      message = 'Tea is ready';
    });
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: Center(
        child: Column(
          mainAxisSize: MainAxisSize.min,
          children: [
            Text(message, style: const TextStyle(fontSize: 28)),
            const SizedBox(height: 24),
            ElevatedButton(onPressed: boil, child: const Text('Boil water')),
          ],
        ),
      ),
    );
  }
}

실력 점검

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

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

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