Coddy의 연습용 API

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

대부분의 앱은 인터넷에 있는 서버에서 데이터를 가져옵니다. 이 수업에서는 검사 과정에서 인터넷에 접속할 수 없으므로, 서버는 앱 내부에 있습니다. lib/api.dart는 Coddy의 실습용 API입니다. 파일 목록에서 열어 읽어 보세요. 이 파일은 변경할 수 없습니다.

호출할 부분은 함수 하나인 fetch입니다. 도메인 뒤에 오는 웹 주소의 일부인 경로를 전달하면, 2초 후에 서버의 답변을 String으로 돌려줍니다.

import 'api.dart';

final text = await fetch('/message');

실제 앱에서는 http 패키지를 사용해 같은 작업을 합니다. 요청을 보내고 서버가 돌려보낸 텍스트인 답변의 본문을 기다립니다.

import 'package:http/http.dart' as http;

final response = await http.get(Uri.parse('https://example.com/message'));
final text = response.body;

주변 코드는 동일합니다. async 함수, await, 그리고 결과와 함께 호출하는 setState입니다. 여기서 만드는 모든 것은 실제 서버를 대상으로도 같은 방식으로 작동합니다.

챌린지

쉬움

Load message를 탭하면 Loading...이 표시되고 그대로 멈춥니다. loadMessage를 완성하세요. fetch를 사용해 경로 /message에서 텍스트를 가져온 다음, Loading... 대신 표시하세요.

직접 해보기

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...';
    });
  }

  @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 컴파일러