How can I pass a parameter wit callback in Flutter?

I have two files main.dart and block.dart. My goal is to add an int (12 for example) to myCallback in block.dart to use it in main.dart in the function whatToDo (instead of print ('Should receive the Value from myCallback');)

Here is the code of the main.dart File:

import 'package:flutter/material.dart';
import 'block.dart';

void main() => runApp(MyApp());

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: MainBlock(),
    );
  }
}

class MainBlock extends StatefulWidget {
  @override
  _MainBlockState createState() => _MainBlockState();
}

class _MainBlockState extends State<MainBlock> {
  void whatToDo() {
    print('Should receive the Value from myCallback');
  }

  @override
  Widget build(BuildContext context) {
    // print(getraenke.asMap());
    // print(getraenke.asMap().keys);
    // print(getraenke);

    return Scaffold(
      body: Container(
        margin: EdgeInsets.all(30.0),
        color: Color(0xFF122C39),
        child: Column(
          crossAxisAlignment: CrossAxisAlignment.stretch,
          children: [
            Expanded(
              child: Block(
                myCallback: whatToDo,
              ),
            ),
          ],
        ),
      ),
    );
  }
}

And here is the Code from block.dart with the callback:

import 'package:flutter/material.dart';

class Block extends StatelessWidget {
  final Function myCallback;

  Block({this.myCallback});

  @override
  Widget build(BuildContext context) {
    return Container(
      margin: EdgeInsets.all(10.0),
      color: Color(0xFF722662),
      child: Center(
        child: GestureDetector(
          onTap: myCallback,
          child: Text(
            'Button',
            style: TextStyle(
              color: Color(0xFFFFFFFF),
              fontSize: 22.0,
            ),
          ),
        ),
      ),
    );
  }
}

CodePudding user response：

If I understood it correctly, You want your function to accept a parameter. do it like this.

class Block extends StatelessWidget {
  final Function(int num) myCallback;

  Block({this.myCallback});

and when you call it, you provide it with the parameter

GestureDetector(
          onTap:()=> myCallback(12),
          child: ...

and finally you can access it from your main

void whatToDo(int num) {
    print(num);
  }

CodePudding user response：

in main.dart:

  void whatToDo(int value) {
    print('the value is $value');
  }

in block.dart:

class Block extends StatelessWidget {
  final ValueChanged<int> myCallback;

  Block({required this.myCallback});

  @override
  Widget build(BuildContext context) {
    return Container(
      margin: const EdgeInsets.all(10.0),
      color: const Color(0xFF722662),
      child: Center(
        child: GestureDetector(
          onTap: () => myCallback(100),
          child: const Text(
            'Button',
            style: TextStyle(
              color: Color(0xFFFFFFFF),
              fontSize: 22.0,
            ),
          ),
        ),
      ),
    );
  }
}

CodePudding user response：

Simple way without any advanced topic. Better read some articles about state management. Official documentation.

import 'package:flutter/material.dart';

void main() => runApp(MyApp());

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: MainBlock(),
    );
  }
}

class MainBlock extends StatefulWidget {
  @override
  _MainBlockState createState() => _MainBlockState();
}

class _MainBlockState extends State<MainBlock> {
  void whatToDo(int value) {
    print('Should receive the Value from myCallback');
    print(value);
  }

  @override
  Widget build(BuildContext context) {
    // print(getraenke.asMap());
    // print(getraenke.asMap().keys);
    // print(getraenke);

    return Scaffold(
      body: Container(
        margin: EdgeInsets.all(30.0),
        color: Color(0xFF122C39),
        child: Column(
          crossAxisAlignment: CrossAxisAlignment.stretch,
          children: [
            Expanded(
              child: Block(
                myCallback: whatToDo,
              ),
            ),
          ],
        ),
      ),
    );
  }
}

class Block extends StatelessWidget {
  final void Function(int) myCallback;

  Block({required this.myCallback});

  @override
  Widget build(BuildContext context) {
    return Container(
      margin: EdgeInsets.all(10.0),
      color: Color(0xFF722662),
      child: Center(
        child: GestureDetector(
          onTap: (){myCallback(12);},
          child: Text(
            'Button',
            style: TextStyle(
              color: Color(0xFFFFFFFF),
              fontSize: 22.0,
            ),
          ),
        ),
      ),
    );
  }
}

CodePudding user response：

I add more info to Ethsan Askari's answer.

You can define your custom callback and reuse it throughout your app.

typedef OnWhatToDoCallback = Function(int value);

class Block extends StatefulWidget {
  const Block({
    Key? key,
    required this.onWhatToDo,
  }) : super(key: key);

  final OnWhatToDoCallback onWhatToDo;
  ...
}