async와 await로 기다리기

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

차 앱은 먼저 Boiling...라고 표시하고 나중에 Tea is ready라고 표시해야 합니다. Future.delayed 안에 콜백을 넣으면 순서를 읽기 어렵습니다. Dart에는 더 명확한 방법인 await가 있습니다.

Future<void> boil() async {
  setState(() {
    message = 'Boiling...';
  });
  await Future.delayed(const Duration(seconds: 3));
  setState(() {
    message = 'Tea is ready';
  });
}

await는 future가 완료될 때까지 이 함수를 일시 중지한 다음, 다음 줄을 계속 실행합니다. 코드는 일이 일어나는 순서대로 위에서 아래로 읽힙니다.

여기에는 두 가지 규칙이 따릅니다. await를 사용하는 함수에는 async를 표시합니다. async 함수는 Future를 반환합니다. 아무것도 반환하지 않는 경우에는 Future<void>를 반환합니다. 일시 중지되는 것은 이 함수뿐입니다. 앱의 나머지 부분은 계속 실행됩니다.

챌린지

쉬움

boil을 async와 await를 사용해 다시 작성하세요:

탭한 직후 메시지는 Boiling...입니다.
3초 후에는 Tea is ready입니다.

직접 해보기

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() {
    Future.delayed(const Duration(seconds: 3), () {
      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 컴파일러