로딩 중 표시되는 스피너

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

움직이지 않는 화면을 2초 동안 바라보는 것은 긴 시간입니다. 빙글빙글 도는 원은 앱이 작업 중이라는 것을 사용자에게 알려 줍니다. Flutter에서는 CircularProgressIndicator입니다.

const CircularProgressIndicator()

작동하는 데 필요한 것은 없습니다. 화면에 놓으면 회전합니다. 할 일은 데이터가 도착하는 동안에만 표시하는 것입니다. 상태의 bool이 이를 처리합니다.

bool loading = false;

// await 이전: loading = true
// await 이후: loading = false

loading ? const CircularProgressIndicator() : Text(message)

await하기 전에 setState에서 loading을 true로 설정하고, 답변을 표시하는 setState에서 다시 false로 설정하세요.

챌린지

쉬움

Loading... 텍스트를 스피너로 바꾸세요:

상태에 bool loading = false;를 추가하세요
fetch를 호출하기 전에 true로 설정하고 메시지가 도착하면 다시 false로 설정하세요
loading이 true인 동안 메시지 대신 CircularProgressIndicator를 표시하세요

직접 해보기

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> {
  String message = 'No message yet';

  Future<void> loadMessage() async {
    setState(() {
      message = 'Loading...';
    });
    final text = await fetch('/message');
    setState(() {
      message = text;
    });
  }

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

실력 점검

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

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

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