Coddy'nin Alıştırma API'si

Coddy'nin Flutter Journey'sinin Veri ve Ağ bölümünün bir parçası. Ders 4 / 27.

Çoğu uygulama verilerini internet üzerindeki bir sunucudan alır. Bu derslerde denetimler internete erişemediğinden, sunucu uygulamanızın içinde bulunur: lib/api.dart, Coddy'nin alıştırma API'si. Dosya listesinden açıp okuyun. Onu değiştiremezsiniz.

Çağırdığınız bölüm tek bir işlevdir: fetch. Ona bir yol, yani alan adından sonra gelen web adresi bölümünü verirsiniz; o da 2 saniye sonra sunucunun yanıtını bir String olarak verir:

import 'api.dart';

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

Gerçek bir uygulama da http paketiyle aynı şeyi yapar. Bir istek gönderir ve sunucunun geri gönderdiği metin olan yanıtın gövdesini bekler:

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

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

Çevresindeki kod aynıdır: bir async işlevi, bir await, ardından sonuçla birlikte setState. Burada oluşturduğunuz her şey gerçek bir sunucuya karşı da aynı şekilde çalışır.

Görev

Kolay

Load message düğmesine dokunmak Loading... ifadesini gösterir ve orada kalır. loadMessage işlevini tamamla: fetch ile /message yolundaki metni al, ardından Loading... ifadesinin yerine göster.

Kendin dene

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