FutureBuilder ile Tanışın

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

Çoğu ekran, herhangi bir düğme olmadan açıldığı anda verilerini yükler. Flutter, gelecekteki bir sonucu göstermek için bir bileşene sahiptir: FutureBuilder. Ona geleceği verirsiniz; gelecek her durum değiştirdiğinde ekranı yeniden oluşturur.

FutureBuilder<String>(
  future: _message,
  builder: (context, snapshot) {
    if (snapshot.hasData) {
      return Text(snapshot.data!);
    }
    return const CircularProgressIndicator();
  },
)

snapshot, geleceğin şu anda nasıl göründüğüdür. Yanıt gelmeden önce snapshot.hasData false olur, bu nedenle dönen yükleme simgesi görünür. Yanıt geldiğinde oluşturucu yeniden çalışır ve snapshot.data dizgeyi tutar.

snapshot.data türü String? değeridir: bir dizge ya da null; çünkü başlangıçta veri yoktur. Ardından gelen !, “Kontrol ettim, null değil” demektir. Bunu yalnızca hasData sonrasında kullanın: değer null olduğunda uygulama çöker.

Başlangıç kodu, gelecek değeri ekran açıldığında çalışan initState içinde zaten bir kez oluşturur. late, değişkenin kullanılmadan önce değerini orada alacağını Dart'a bildirir. Sonraki ders, neden orada bulunduğunu gösterir.

Görev

Orta

Uygulama, mesajı initState içinde yükler ancak hiçbir zaman göstermez. Yer tutucu Text öğesini, _message için bir FutureBuilder<String> ile değiştir:

yüklenirken bir CircularProgressIndicator
geldiğinde, 24 boyutunda mesaj

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> {
  late Future<String> _message;

  @override
  void initState() {
    super.initState();
    _message = fetch('/message');
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: Center(
        child: const Text('The message goes here', style: TextStyle(fontSize: 24)),
      ),
    );
  }
}