Hot Reload Mempertahankan State

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

Pratinjau punya dua cara untuk menerapkan perubahanmu. Jalankan memulai aplikasi dari awal. Hot reload mengganti kodemu dengan kode baru saat aplikasi tetap berjalan, sekaligus mempertahankan state: penghitung tetap menyimpan angkanya.

Coba: tekan tombol plus beberapa kali, ubah warna angka, lalu tekan Hot reload. Warna baru akan terlihat, dan hitungannya tetap ada. Saat kamu mengatur tampilan layar, cara ini membuatmu tidak perlu mengetuk berulang kali untuk kembali ke posisi sebelumnya.

Hot reload membangun ulang layar dengan kode barumu, tetapi tidak membuat state baru. Jadi, perubahan pada nilai awal, seperti int _count = 0; menjadi int _count = 10;, tidak akan terlihat: baris itu hanya dijalankan saat state dibuat. Tekan Jalankan untuk melihatnya.

Hal yang sama berlaku untuk main, dan untuk mengubah StatelessWidget menjadi StatefulWidget. Jika perubahan tidak terlihat setelah Hot reload, tekan Jalankan.

Tantangan

Mudah

Atur ukuran angka menjadi 64 dan warnanya menjadi Colors.deepPurple. Tekan tombol plus beberapa kali terlebih dahulu, lalu gunakan Hot reload dan lihat bahwa jumlahnya tetap.
Atur agar penghitung dimulai dari 10. Perhatikan bahwa Hot reload tidak menampilkannya, tetapi tombol Jalankan menampilkannya.

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;

  void _increase() {
    setState(() {
      _count++;
    });
  }

  void _decrease() {
    setState(() {
      _count--;
    });
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: Text('Counter')),
      body: Center(
        child: Row(
          mainAxisSize: MainAxisSize.min,
          children: [
            IconButton(icon: Icon(Icons.remove), onPressed: _decrease),
            Text('$_count', style: TextStyle(fontSize: 48)),
            IconButton(icon: Icon(Icons.add), onPressed: _increase),
          ],
        ),
      ),
    );
  }
}