Tulis StatefulWidget

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

Kali ini kamu menulis StatefulWidget sendiri. Layar menampilkan I feel Sleepy, dan menekan Drink coffee seharusnya mengubahnya menjadi I feel Awake. Sebagai StatelessWidget, widget itu tidak akan pernah bisa melakukannya.

Mengubah StatelessWidget menjadi StatefulWidget memerlukan tiga langkah:

Ubah extends StatelessWidget menjadi extends StatefulWidget, lalu ganti build dengan createState.
Tulis class State di bawahnya dan pindahkan build ke sana tanpa perubahan.
Pindahkan variabel yang berubah dari build ke bagian atas class State.

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

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

class _HomePageState extends State<HomePage> {
  String _mood = 'Sleepy';

  @override
  Widget build(BuildContext context) {
    ...
  }
}

Langkah 3 penting. Variabel di bagian atas build dibuat ulang setiap kali build dijalankan, jadi setelah setState, nilainya akan kembali menjadi 'Sleepy'. Di bagian atas class State, variabel itu dibuat satu kali dan mempertahankan nilai yang kamu berikan.

Tantangan

Sedang

Ubah HomePage menjadi StatefulWidget dengan class _HomePageState. Simpan mood di String _mood = 'Sleepy'; di bagian atas State, lalu buat Drink coffee mengubahnya menjadi 'Awake' dengan 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 StatelessWidget {
  const HomePage({super.key});

  @override
  Widget build(BuildContext context) {
    String mood = 'Sleepy';
    return Scaffold(
      appBar: AppBar(title: Text('Mood')),
      body: Center(
        child: Column(
          mainAxisSize: MainAxisSize.min,
          children: [
            Text('I feel $mood', style: TextStyle(fontSize: 32)),
            SizedBox(height: 16),
            ElevatedButton(
              onPressed: () {},
              child: Text('Drink coffee'),
            ),
          ],
        ),
      ),
    );
  }
}