Coddyの練習用API

CoddyのFlutterジャーニー「データとネットワーク」セクションの一部。レッスン 4/27。

ほとんどのアプリは、インターネット上のサーバーからデータを取得します。このレッスンではチェックがインターネットに接続できないため、サーバーはアプリの中にあります。lib/api.dartはCoddyの練習用APIです。ファイル一覧から開いて読んでください。変更することはできません。

呼び出す部分は、fetchという1つの関数です。ドメインの後に続くウェブアドレスの一部であるパスを渡すと、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')),
          ],
        ),
      ),
    );
  }
}