I am lacking experience in Flutter to understand how to pass a callback funciton into a Widget:

Custom button :

class IconButtonWidget extends StatelessWidget {

  final Future<void> callback;
  const IconButtonWidget({Key? key, required this.callback}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return TextButton.icon(
      icon: const Icon(
        Icons.add_alarm,
        size: 30,
      ),
      label: const Text(
        'New alarm',
        style: TextStyle(
            fontWeight: FontWeight.bold,
            fontSize: 20,
            letterSpacing: 1.0),
      ),
      onPressed: () async {
        await callback;
      },
    );
  }
}

I have a simple Home Screen where I use it (see commented out line):

class _HomeState extends State<Home> {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: SafeArea(
          child: Column(
        mainAxisAlignment: MainAxisAlignment.center,
        children: const <Widget>[
          Center(
            child: IconButtonWidget(
              // callback: () {Navigator.pushNamed(context, '/alarms');},
            ),
          ),
          SizedBox(
            height: 20.0,
          ),
        ],
      )),
    );
  }
}

I want to pass a function to the Widget, but don't understand how i can do that.

Previously it was used like this (before I separated the widget in a separate class)

                child: TextButton.icon(
                  icon: const Icon(
                    Icons.add_alarm,
                    size: 30,
                    // color: Colors.teal,
                  ),
                  label: const Text(
                    'New alarm',
                    style: TextStyle(
                        fontWeight: FontWeight.bold,
                        fontSize: 20,
                        letterSpacing: 1.0),
                  ),
                  onPressed: () async {
                    dynamic result =
                    await Navigator.pushNamed(context, '/alarms');
                  },
                ),
              ),

CodePudding user response：

Please refer to below code

import 'package:flutter/material.dart';

const Color darkBlue = Color.fromARGB(255, 18, 32, 47);

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      theme: ThemeData.dark().copyWith(
        scaffoldBackgroundColor: darkBlue,
      ),
      debugShowCheckedModeBanner: false,
      home: Scaffold(
        body: Center(
          child: IconButtonWidget(callback: () async {
            print("Call back Function");
          }),
        ),
      ),
    );
  }
}

class IconButtonWidget extends StatelessWidget {
  final Function callback;
  const IconButtonWidget({Key? key, required this.callback}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return TextButton.icon(
      icon: const Icon(
        Icons.add_alarm,
        size: 30,
      ),
      label: const Text(
        'New alarm',
        style: TextStyle(
            fontWeight: FontWeight.bold, fontSize: 20, letterSpacing: 1.0),
      ),
      onPressed: () {
        callback();
      },
    );
  }
}

CodePudding user response：

class IconButtonWidget extends StatelessWidget {

  final VoidCallback onPressed;
  const IconButtonWidget({Key? key, required this.onPressed}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return TextButton.icon(
      icon: const Icon(
        Icons.add_alarm,
        size: 30,
      ),
      label: const Text(
        'New alarm',
        style: TextStyle(
            fontWeight: FontWeight.bold,
            fontSize: 20,
            letterSpacing: 1.0),
      ),
      onPressed: onPressed,
    );
  }
}

.........

Center(
   child: IconButtonWidget(
     onPressed: () async {
        dynamic result =
                await Navigator.pushNamed(context, '/alarms');
     },
   ),
),

.........