Ambil Data Sekali di initState

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

Flutter memanggil build lagi setiap kali layar digambar ulang: setelah setiap setState, saat ponsel berputar, atau saat parent berubah. Ini bisa terjadi berkali-kali dalam satu detik. build hanya boleh menjelaskan layar, jangan pernah memulai pekerjaan.

Jadi, fetch yang ditulis di dalam build akan dijalankan lagi setiap kali layar digambar ulang. Setiap kali dijalankan, fungsi itu mengirim permintaan baru ke server, dan layar bisa berubah ke jawaban lain meski tidak ada yang memintanya:

// permintaan baru setiap kali digambar ulang
FutureBuilder<String>(
  future: fetch('/tip'),
  ...
)

Buat future sekali saja saat layar terbuka, di dalam initState, lalu berikan future yang sama itu kepada FutureBuilder setiap kali:

late Future<String> _tip;

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

initState berjalan sekali, sebelum build pertama. Mulailah dengan super.initState();, sesuai permintaan Flutter.

Tantangan

Sedang

Ketuk ikon hati di bilah atas: petunjuknya berubah karena fetch ada di dalam build. Muat petunjuk sekali saja:

tambahkan late Future<String> _tip; ke state
atur nilainya di initState dengan fetch('/tip')
berikan _tip kepada FutureBuilder

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