Spinner Saat Memuat

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

Dua detik adalah waktu yang lama untuk menatap layar yang tidak bergerak. Lingkaran yang berputar memberi tahu pengguna bahwa aplikasi sedang memprosesnya. Di Flutter, ini adalah CircularProgressIndicator.

const CircularProgressIndicator()

Widget ini tidak memerlukan apa pun untuk berfungsi: letakkan di layar dan widget ini akan berputar. Tugasnya adalah menampilkannya hanya selama data sedang diproses. bool dalam state-mu bisa melakukannya:

bool loading = false;

// sebelum await: loading = true
// setelah await: loading = false

loading ? const CircularProgressIndicator() : Text(message)

Atur loading menjadi true dalam setState sebelum kamu menggunakan await, lalu kembalikan menjadi false dalam setState yang menampilkan jawabannya.

Tantangan

Mudah

Ganti teks Loading... dengan pemutar:

tambahkan bool loading = false; ke state
atur menjadi true sebelum fetch dan kembalikan menjadi false saat pesan tiba
selama loading bernilai true, tampilkan CircularProgressIndicator sebagai pengganti pesan

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: 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...';
    });
    final text = await fetch('/message');
    setState(() {
      message = text;
    });
  }

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

Uji dirimu

Pelajaran ini berisi kuis singkat. Mulai pelajarannya untuk menjawab kuis dan melacak progresmu.

Semua pelajaran di Data dan Jaringan

Latihan sendiri: Compiler Flutter online