Menu
CoddyTech

Passar um callback para um componente filho

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

Um valor desce do pai para o filho. Um toque percorre o caminho inverso: o botão está no filho, mas a pontuação que ele altera pertence ao pai.

O pai entrega uma função ao filho, e o filho a chama. Uma função sem parâmetros que não retorna nada tem o tipo VoidCallback:

class AddButton extends StatelessWidget {
  const AddButton({super.key, required this.onAdd});

  final VoidCallback onAdd;

  @override
  Widget build(BuildContext context) {
    return ElevatedButton(onPressed: onAdd, child: Text('Add point'));
  }
}

O pai define o que o toque faz, usando setState como de costume:

AddButton(
  onAdd: () {
    setState(() {
      score++;
    });
  },
)

Escreva onPressed: onAdd, não onAdd(). A primeira forma entrega a função ao botão para ser usada depois. A segunda a chama imediatamente durante a construção e passa o que ela retorna.

challenge icon

Desafio

Fácil

O botão Add point está no widget AddButton e ainda não faz nada.

  • Adicione ao AddButton um campo final VoidCallback onAdd, definido pelo construtor.
  • Use-o como onPressed do botão.
  • Na página, passe uma função que adicione 1 a score dentro de setState.

Experimente você mesmo

import 'package:flutter/material.dart';

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

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> {
  int score = 0;

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: Center(
        child: Column(
          mainAxisSize: MainAxisSize.min,
          children: [
            Text('Score: $score', style: const TextStyle(fontSize: 32)),
            const SizedBox(height: 16),
            const AddButton(),
          ],
        ),
      ),
    );
  }
}

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

  @override
  Widget build(BuildContext context) {
    return ElevatedButton(
      onPressed: () {},
      child: const Text('Add point'),
    );
  }
}
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