Özet - FutureBuilder

FutureBuilder ve snapshot'ı birleştirerek veri ekranı yaparsın.

Özet - FutureBuilder

Bu bölümde üç şey öğrendin: FutureBuilder ile bir Future'ı arayüze bağlarsın; AsyncSnapshot ile connectionState ve data'ya erişirsin; waiting ve hasError ile yükleniyor ve hata durumlarını yönetirsin.

FutureBuilder<String>(
  future: _future,
  builder: (context, snapshot) {
    if (snapshot.connectionState == ConnectionState.waiting) {
      return CircularProgressIndicator();
    }
    return Text(snapshot.data ?? 'boş');
  },
)

Bunları birleştirerek veri ekranı yaparsın.

Uygulama Veri ekranı yap

veriGetir async metodu 100 ms bekleyip 'Veri hazır' döndürsün. Ekrani stateful widget'ında _future field'ı tut, initState'te print('ekran açıldı') çağır ve _future = veriGetir() ata. FutureBuilder<String> içinde: waiting iken CircularProgressIndicator, hasError iken Text('hata'), değilse Text(snapshot.data!) göster. main'de uygulamayı başlat.

Örnek çözümü göster

import 'package:flutter/material.dart';

Future<String> veriGetir() async {
  await Future.delayed(Duration(milliseconds: 100));
  return 'Veri hazır';
}

class Ekrani extends StatefulWidget {
  @override
  _EkraniState createState() => _EkraniState();
}

class _EkraniState extends State<Ekrani> {
  late Future<String> _future;

  @override
  void initState() {
    super.initState();
    print('ekran açıldı');
    _future = veriGetir();
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: Center(
        child: FutureBuilder<String>(
          future: _future,
          builder: (context, snapshot) {
            if (snapshot.connectionState == ConnectionState.waiting) {
              return CircularProgressIndicator();
            } else if (snapshot.hasError) {
              return Text('hata');
            }
            return Text(snapshot.data!);
          },
        ),
      ),
    );
  }
}

void main() => runApp(MaterialApp(home: Ekrani()));

Kendini test et

FutureBuilder'da yükleniyor durumunu nasıl anlarız?
- snapshot.hasError
- snapshot.data == null
- snapshot.connectionState == ConnectionState.none
- snapshot.connectionState == ConnectionState.waiting
Cevabı göster

snapshot.connectionState == ConnectionState.waiting — ConnectionState.waiting, Future'ın henüz tamamlanmadığını ve yükleniyor aşamasında olduğunu belirtir.

FutureBuilder'ın future parametresini bağla

FutureBuilder<String>(
  future: ____,
  builder: (context, snapshot) => Text('?'),
)

Cevabı göster

FutureBuilder<String>(
  future: _future,
  builder: (context, snapshot) => Text('?'),
)

FutureBuilder bölümünün parçaları

FutureBuilder

Future'ı arayüze bağlayan widget
AsyncSnapshot

Future'ın o anki durumunu taşır
ConnectionState.waiting

Yükleniyor aşaması
hasError

Hata durumunu belirten özellik

Sıradaki ders: StreamBuilder nedir?

Deneyiminizi Geliştiriyoruz

Çerez Tercihleri

Kesinlikle Gerekli Çerezler

Analitik Çerezler