Menu
CoddyTech

Métodos nas suas classes

Parte da seção Gerenciamento de estado do Journey de Flutter da Coddy. Lição 5 de 27.

Até agora, suas classes armazenavam dados: um nome, um preço. Uma classe também pode armazenar o código que altera esses dados. Uma função dentro de uma classe é chamada de método:

class Wallet {
  int coins = 10;

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

Chame um método usando um ponto, como faria com um campo: wallet.earn(3). Dentro do método, coins é o campo da carteira em que ele foi chamado.

Por que se dar ao trabalho, se a página poderia escrever wallet.coins = wallet.coins + 3 por conta própria? Porque assim as regras ficam em um só lugar. Se uma carteira nunca puder ficar com menos de zero, o método spend verifica isso, e todo botão que faz um gasto passa por essa verificação.

O widget ainda chama setState em volta da chamada, para que a tela mostre o novo número.

challenge icon

Desafio

Fácil

No momento, Spend 5 retira moedas diretamente do campo, e a carteira fica com um valor abaixo de zero.

  • Adicione um método void spend(int amount) a Wallet que retire as moedas somente quando houver moedas suficientes.
  • Faça o botão Spend 5 chamar wallet.spend(5) dentro de setState.

Experimente você mesmo

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 iconTeste seus conhecimentos

Esta lição inclui um quiz rápido. Comece a lição para respondê-lo e acompanhar seu progresso.

Todas as lições de Gerenciamento de estado

Pratique por conta própria: Compilador de Flutter online