setState Menggambar Ulang Layar

Termasuk bagian Membuat Aplikasi Interaktif dalam perjalanan Flutter di Coddy. Pelajaran 11 dari 34.

Tekan Add one di aplikasi ini dan lihat Console: 1, 2, 3. Angka di layar tetap 0. Flutter membuat layar sekali, dan tidak ada yang memberitahunya untuk membuatnya lagi.

StatelessWidget tidak pernah berubah. Layar yang berubah menggunakan StatefulWidget, yang ditulis sebagai dua class:

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

  @override
  State<HomePage> createState() => _HomePageState();
}

class _HomePageState extends State<HomePage> {
  int _count = 0;

  @override
  Widget build(BuildContext context) {
    return Text('$_count');
  }
}

HomePage hanya menentukan State yang harus dibuat (createState, ditulis dalam bentuk panah seperti pada Functions That Return Values). _HomePageState melakukan tugasnya: class ini menyimpan data layar dalam variabel di bagian atasnya, seperti _count, dan membuat layar. Class ini tetap ada selama layar ditampilkan, jadi _count mempertahankan nilainya dari satu proses pembuatan layar ke proses berikutnya.

Untuk mengubah layar, ubah data di dalam setState. Ini memberi tahu Flutter, "ada perubahan, buat lagi", dan Text menampilkan angka baru:

setState(() {
  _count = _count + 1;
});

Garis bawah di awal _HomePageState dan _count membuat nama menjadi pribadi: hanya file ini yang dapat menggunakannya. Class state dan variabelnya biasanya memiliki garis bawah.

Tantangan

Sedang

Buat angka di layar bertambah satu setiap kali kamu menekan Add one: letakkan perubahan pada _count di dalam setState.

Coba sendiri

import 'package:flutter/material.dart';

void main() {
  runApp(const MyApp());
}

class MyApp extends StatelessWidget {
  const MyApp({super.key});

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      debugShowCheckedModeBanner: false,
      home: HomePage(),
    );
  }
}

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

  @override
  State<HomePage> createState() => _HomePageState();
}

class _HomePageState extends State<HomePage> {
  int _count = 0;

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: Text('Counter')),
      body: Center(
        child: Column(
          mainAxisSize: MainAxisSize.min,
          children: [
            Text('$_count', style: TextStyle(fontSize: 48)),
            SizedBox(height: 16),
            ElevatedButton(
              onPressed: () {
                _count = _count + 1;
                print(_count);
              },
              child: Text('Add one'),
            ),
          ],
        ),
      ),
    );
  }
}