API Latihan Coddy

Termasuk bagian Data dan Jaringan dalam perjalanan Flutter di Coddy. Pelajaran 4 dari 27.

Sebagian besar aplikasi mendapatkan datanya dari server di internet. Dalam pelajaran ini, pemeriksaan tidak dapat menjangkau internet, jadi server berada di dalam aplikasimu: lib/api.dart, API latihan Coddy. Buka file itu di daftar file dan baca isinya. Kamu tidak dapat mengubahnya.

Bagian yang kamu panggil adalah satu fungsi, fetch. Kamu memberinya path, bagian alamat web setelah domain, lalu fungsi itu memberikan jawaban server dalam bentuk String, 2 detik kemudian:

import 'api.dart';

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

Aplikasi sungguhan melakukan hal yang sama dengan package http. Aplikasi itu mengirim permintaan dan menunggu body jawaban, yaitu teks yang dikirim kembali oleh server:

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

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

Kode di sekelilingnya sama: fungsi async, sebuah await, lalu setState dengan hasilnya. Semua yang kamu buat di sini bekerja dengan cara yang sama saat digunakan dengan server sungguhan.

Tantangan

Mudah

Mengetuk Load message menampilkan Loading... dan berhenti di situ. Selesaikan loadMessage: ambil teks dari path /message dengan fetch, lalu tampilkan sebagai pengganti Loading....

Coba sendiri

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

Uji dirimu

Pelajaran ini berisi kuis singkat. Mulai pelajarannya untuk menjawab kuis dan melacak progresmu.

Semua pelajaran di Data dan Jaringan

Latihan sendiri: Compiler Flutter online