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.
Desafio
FácilO botão Add point está no widget AddButton e ainda não faz nada.
- Adicione ao
AddButtonum campofinal VoidCallback onAdd, definido pelo construtor. - Use-o como
onPresseddo botão. - Na página, passe uma função que adicione 1 a
scoredentro desetState.
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'),
);
}
}
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
1Elevando o estado
Passar o estado para um componente filhoPassar um callback para um componente filhoCallbacks que enviam um valorElevar o estadoPratique por conta própria: Compilador de Flutter online