Question 356573 in Flutter Question posted in
The official Flutter documentation can be found here.

Trying to create a callback function from one widget to another in Flutter. It won't work

I’m trying to create the simple "press button to increase number" program in Flutter. I separated the text widget that shows the number and the button that increases the number into their own classes and files. I then imported them to the main file.

I’m trying to use a callback function to connect the two widget together to create functionality.
I doesn’t show any errors but the button doesn’t do anything.

Here is the main file:

import 'package:flutter/material.dart';
import 'package:searchbartest/number.dart';
import 'package:searchbartest/button.dart';

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

class MyApp extends StatelessWidget {
  const MyApp({super.key});
  
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        body: Center(
          child: Row(
            children: [
              const SizedBox(width: 20,),
              AddButton(increaseNumberCallBack: (){},),
              const SizedBox(width: 20,),
              const Number(),
            ],
          ),
        )),
    );
  }

}

Here is the file containing the text widget that shows the number and the function to increase it:

import 'package:flutter/material.dart';

class Number extends StatefulWidget {
  const Number({super.key});

  @override
  State<Number> createState() => _NumberState();
}

class _NumberState extends State<Number> {

  void increaseNumber() {
    setState(() {
      number ++;
    });
  }


  int number = 0;

  @override
  Widget build(BuildContext context) {
    return Text(number.toString(),
    style: const TextStyle(
      fontSize: 50.0
    ),
    );
  }
}

Here is the file containing the button that is supposed to increase the number and my poor attempt at making a callback function:

import 'package:flutter/material.dart';

class AddButton extends StatefulWidget {
  const AddButton({super.key, required this.increaseNumberCallBack});

  final Function() increaseNumberCallBack;

  void increaseNumber() {
    increaseNumberCallBack();
  }

  @override
  State<AddButton> createState() => _AddButtonState();
}

class _AddButtonState extends State<AddButton> {
  @override
  Widget build(BuildContext context) {
    return IconButton(
      onPressed: () {
        widget.increaseNumber();
      }, 
      icon: const Icon(Icons.add,
      size: 50,
      ));
  }
}

For some reason it’s not working. Thanks for any help.

Tags:

2

Answers


  1. 0

    To fix the callback function between widgets in Flutter, you need to connect the increaseNumber function from the Number widget to the AddButton widget.

    1. In the MyApp widget, when using AddButton, pass the callback function to it:
    AddButton(increaseNumberCallBack: _increaseNumber,)
    1. Define the _increaseNumber function in the MyApp widget, which will update the state of the Number widget:
    void _increaseNumber() {
  setState(() {
    // Call the increaseNumber function from the Number widget
    _numberKey.currentState.increaseNumber();
  });
}
    1. You need to provide a GlobalKey to the Number widget in order to call its method. Define GlobalKey like this:
    GlobalKey<_NumberState> _numberKey = GlobalKey();
    1. Make sure to pass this key to the Number widget:
    const Number(key: _numberKey),
    Login or Signup to reply.
  2. 0

    Callback Functions are technically functions triggered in the child widget and executed in the parent widget.
    When you click the button, it will trigger whatever function you pass into the widget (so nothing in your code, since you dont pass any function).

    Create a class Variable for your counter in MyApp. Increase it when the callback is triggered and pass it into your "Number" Widget.
    AddButton(increaseNumberCallBack: (){INCREASE COUNTER},),

    Here’s some details: How to pass callback in Flutter

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search