method pada class-mu

Termasuk bagian Pengelolaan State dalam perjalanan Flutter di Coddy. Pelajaran 5 dari 27.

Sejauh ini, class-mu menyimpan data: nama, harga. Class juga bisa menyimpan kode yang mengubah data tersebut. Fungsi di dalam class disebut method:

class Wallet {
  int coins = 10;

  void earn(int amount) {
    coins = coins + amount;
  }
}

Panggil method dengan titik, seperti field: wallet.earn(3). Di dalam method, coins adalah field dari wallet yang method-nya dipanggil.

Mengapa perlu repot, kalau halaman bisa menulis wallet.coins = wallet.coins + 3 sendiri? Karena dengan begitu, aturannya berada di satu tempat. Jika wallet tidak boleh kurang dari nol, method spend akan memeriksanya, dan setiap tombol yang mengurangi saldo akan melalui pemeriksaan itu.

Widget tetap memanggil setState di sekitar pemanggilan itu, agar layar menampilkan angka baru.

Tantangan

Mudah

Saat ini, Spend 5 mengambil koin langsung dari field, sehingga jumlah koin di wallet bisa kurang dari nol.

Tambahkan method void spend(int amount) ke Wallet yang mengambil koin hanya jika jumlahnya mencukupi.
Buat tombol Spend 5 memanggil wallet.spend(5) di dalam setState.

Coba sendiri

import 'package:flutter/material.dart';

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

class Wallet {
  int coins = 10;

  void earn(int amount) {
    coins = coins + amount;
  }
}

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

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

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

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

class _HomePageState extends State<HomePage> {
  final wallet = Wallet();

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: const Text('Wallet')),
      body: Center(
        child: Column(
          mainAxisSize: MainAxisSize.min,
          children: [
            Text('${wallet.coins} coins', style: const TextStyle(fontSize: 32)),
            const SizedBox(height: 16),
            ElevatedButton(
              onPressed: () {
                setState(() {
                  wallet.earn(3);
                });
              },
              child: const Text('Earn 3'),
            ),
            ElevatedButton(
              onPressed: () {
                setState(() {
                  wallet.coins = wallet.coins - 5;
                });
              },
              child: const Text('Spend 5'),
            ),
          ],
        ),
      ),
    );
  }
}

Uji dirimu

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

Semua pelajaran di Pengelolaan State

Latihan sendiri: Compiler Flutter online