Méthodes dans vos classes

Fait partie de la section Gestion d’état du Journey Flutter de Coddy. Leçon 5 sur 27.

Jusqu’à présent, tes classes contenaient des données : un nom, un prix. Une classe peut aussi contenir le code qui modifie ces données. Une fonction à l’intérieur d’une classe s’appelle une méthode :

class Wallet {
  int coins = 10;

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

Appelle une méthode avec un point, comme pour un champ : wallet.earn(3). À l’intérieur de la méthode, coins est le champ du portefeuille sur lequel la méthode a été appelée.

Pourquoi s’embêter, alors que la page pourrait écrire wallet.coins = wallet.coins + 3 elle-même ? Parce que les règles se trouvent alors au même endroit. Si un portefeuille ne doit jamais passer sous zéro, la méthode spend le vérifie, et chaque bouton qui dépense passe par cette vérification.

Le widget appelle toujours setState autour de l’appel, afin que l’écran affiche le nouveau nombre.

Défi

Facile

Actuellement, Spend 5 prélève directement des pièces du champ, et le portefeuille peut passer sous zéro.

Ajoute à Wallet une méthode void spend(int amount) qui ne retire les pièces que s’il y en a suffisamment.
Fais en sorte que le bouton Spend 5 appelle wallet.spend(5) à l’intérieur de setState.

Essayez vous-même

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