Métodos en tus clases

Parte de la sección Gestión del estado del Journey de Flutter de Coddy. Lección 5 de 27.

Hasta ahora, tus clases contenían datos: un nombre, un precio. Una clase también puede contener el código que modifica esos datos. Una función dentro de una clase se llama método:

class Wallet {
  int coins = 10;

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

Llama a un método con un punto, como a un campo: wallet.earn(3). Dentro del método, coins es el campo de la billetera sobre la que se llamó.

¿Para qué molestarse, si la página podría escribir wallet.coins = wallet.coins + 3 por sí sola? Porque así las reglas quedan en un solo lugar. Si una billetera nunca debe bajar de cero, el método spend lo comprueba, y todos los botones que gastan pasan por esa comprobación.

El widget sigue llamando a setState alrededor de la llamada, así que la pantalla muestra el nuevo número.

Desafío

Fácil

Ahora mismo, Spend 5 resta monedas directamente del saldo, y la billetera queda con un saldo negativo.

Añade un método void spend(int amount) a Wallet que reste las monedas solo cuando haya suficientes.
Haz que el botón Spend 5 llame a wallet.spend(5) dentro de setState.

Pruébalo tú mismo

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