Menu
CoddyTech

Metodi nelle tue classi

Fa parte della sezione Gestione dello stato del percorso Flutter di Coddy. Lezione 5 di 27.

Finora le tue classi contenevano dati: un nome, un prezzo. Una classe può contenere anche il codice che modifica quei dati. Una funzione all'interno di una classe si chiama metodo:

class Wallet {
  int coins = 10;

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

Chiama un metodo con un punto, proprio come un campo: wallet.earn(3). All'interno del metodo, coins è il campo del portafoglio su cui è stato chiamato.

Perché preoccuparsene, se la pagina potrebbe scrivere direttamente wallet.coins = wallet.coins + 3? Perché così le regole si trovano in un unico posto. Se il saldo di un portafoglio non deve mai scendere sotto zero, il metodo spend lo controlla e ogni pulsante che spende passa attraverso quel controllo.

Il widget chiama comunque setState attorno alla chiamata, così lo schermo mostra il nuovo numero.

challenge icon

Sfida

Facile

Al momento Spend 5 sottrae le monete direttamente dal campo e il portafoglio scende sotto zero.

  • Aggiungi a Wallet un metodo void spend(int amount) che sottragga le monete solo quando ce ne sono abbastanza.
  • Fai in modo che il pulsante Spend 5 chiami wallet.spend(5) dentro setState.

Provalo tu

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'),
            ),
          ],
        ),
      ),
    );
  }
}
quiz iconMettiti alla prova

Questa lezione include un breve quiz. Inizia la lezione per rispondere e tenere traccia dei tuoi progressi.

Tutte le lezioni di Gestione dello stato

Esercitati da solo: Compilatore Flutter online