Home > database >  passing a function to a widget and call function when button press in flutter
passing a function to a widget and call function when button press in flutter

Time:11-16

I am facing an issue in flutter where I want to pass a function to a button widget and when the button is pressed, I want that function to be called. however, the opposite is occurring. When I passed the function to the widget, the function gets called and when I press the button, nothing happens. The function doesn't get called.

Here is the button widget code

import 'package:flutter/material.dart';
import 'package:finsec/core/res/export_resources.dart';
import 'package:provider/provider.dart';
import 'package:reactive_dropdown_search/reactive_dropdown_search.dart';
import 'package:reactive_forms/reactive_forms.dart';

import '../../../income/data/models/AddEditIncomeModel.dart';
import '../../data/repositories/app_database.dart';

class SaveButtons extends StatefulWidget {
  SaveButtons({
    Key key,
    this.onPressCallback
  }) : super(key: key);


  final VoidCallback onPressCallback;

  @override
  State<StatefulWidget> createState() {
    return SaveButtonsState();
  }
}

class SaveButtonsState extends State<SaveButtons> {
  @override
  Widget build(BuildContext context) {
    return Row(
      children: <Widget>[
        Expanded(
            child: button(save, database),
        ),
        SizedBox(width: margin_10dp),
        Expanded(
            child: button(save_and_continue, database),
        ),
      ],
    );
  }

  Widget button (String saveType, AppDatabase database) {
    return ElevatedButton(
      style: ElevatedButton.styleFrom(
        primary: colorPrimary,
        onPrimary: white,
        shadowColor: Colors.grey,
        elevation: margin_3dp,
        shape: RoundedRectangleBorder(
            borderRadius: BorderRadius.circular(margin_5dp)),
        minimumSize: Size(margin_100dp, margin_40dp), //////// HERE
      ),
      onPressed: () {
        onPressCallback;
      },
      child: Text(saveType,   style: TextStyle(fontWeight: FontWeight.bold, fontSize: text_size_16, color: white)),
    );
  }
}

and here is partial code on how I am passing the printLine function to my widget SaveButtons

 return Scaffold(
      appBar: AppBar(title: Text(incomeTitle), backgroundColor: colorPrimary,),
      floatingActionButtonLocation: FloatingActionButtonLocation.endTop,
      floatingActionButton: FloatingActionButton(
        backgroundColor: colorPrimary,
        onPressed: () async {    }
        },
        child: Icon(
          Icons.save,
        ),
      ),
      body: SingleChildScrollView(
        physics: ClampingScrollPhysics(),
        child: ReactiveForm(
          formGroup: viewModel.form,
          child: Container(
              margin: EdgeInsets.all(margin_20dp),
              child: Column(
                children: [
              
                  SaveButtons(onPressCallback: printLine())
                ],
              ),
            )
        ),
      ),
    );

  printLine() {print('TEST FUNCTION CALLBACK');}

when SaveButtons is called, the text TEST FUNCTION CALLBACK is printed. I don't want the printLine function to be executed when SaveButtons is called. I want printLine to execute when the button is pressed in the SaveButtons widget. Currently, when I pressed the button the printLine function doesn't get called. it only gets called when passed as a parameter to SaveButtons and SaveButtons widget is called from the main class. can someone help me fix this so that the correct action is performed? thanks in advance

CodePudding user response:

change:

  final VoidCallback onPressCallback;

with:

  final void Function() onPressCallback;

and change this:

  SaveButtons(onPressCallback: printLine())

with this:

  SaveButtons(onPressCallback: printLine)

and change:

  onPressed: () {
    onPressCallback;
  },

with:

onPressed: () {
        onPressCallback();
      },
  • Related