initState içinde Bir Kez Veri Getirme

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

Flutter, ekran her yeniden çizildiğinde build işlevini tekrar çağırır: her setState çağrısından sonra, telefon döndüğünde, bir üst öğe değiştiğinde. Bu, saniyede birçok kez gerçekleşebilir. build yalnızca ekranı tanımlamalı, asla bir iş başlatmamalıdır.

Bu nedenle, build içine yazılan bir fetch her yeniden çizimde tekrar çalışır. Her çalıştırma sunucuya yeni bir istek gönderir ve ekran, hiçbir şey yeni bir yanıt istememişken farklı bir yanıta geçebilir:

// her yeniden çizimde yeni bir istek
FutureBuilder<String>(
  future: fetch('/tip'),
  ...
)

Future'ı ekran açıldığında, initState içinde bir kez oluştur ve her seferinde FutureBuilder'a aynı future'ı ver:

late Future<String> _tip;

@override
void initState() {
  super.initState();
  _tip = fetch('/tip');
}

initState, ilk build çağrısından önce bir kez çalışır. Flutter'ın istediği gibi, super.initState(); ile başlat.

Görev

Orta

Üst çubuktaki kalbe dokun: ipucu değişiyor, çünkü fetch build içinde. İpucunu bir kez yükle:

duruma late Future<String> _tip; ekle
initState içinde fetch('/tip') ile değer ata
FutureBuilder öğesine _tip ver

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: TipScreen(),
    );
  }
}

class TipScreen extends StatefulWidget {
  const TipScreen({super.key});

  @override
  State<TipScreen> createState() => _TipScreenState();
}

class _TipScreenState extends State<TipScreen> {
  bool liked = false;

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: const Text('Tip of the Day'),
        actions: [
          IconButton(
            icon: Icon(liked ? Icons.favorite : Icons.favorite_border),
            onPressed: () {
              setState(() {
                liked = !liked;
              });
            },
          ),
        ],
      ),
      body: Center(
        child: Padding(
          padding: const EdgeInsets.all(24),
          child: FutureBuilder<String>(
              future: fetch('/tip'),
              builder: (context, snapshot) {
                if (snapshot.hasData) {
                  return Text(
                    snapshot.data!,
                    textAlign: TextAlign.center,
                    style: const TextStyle(fontSize: 24),
                  );
                }
                return const CircularProgressIndicator();
              },
            ),
        ),
      ),
    );
  }
}