how to execute the VoidCallback in flutter

Viewed 19664

I'm trying to test the VoidCallback so I created the main file, that have a function called from a flat button in the widget, which is in a separate file, but did not work.

main.dart

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

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Retrieve Text Input',
      home: MyCustomForm(),
    );
  }
}

// Define a Custom Form Widget
class MyCustomForm extends StatefulWidget {
  @override
  _MyCustomFormState createState() => _MyCustomFormState();
}

class _MyCustomFormState extends State<MyCustomForm> {
  final myController = TextEditingController();

  @override
  void initState() {
    super.initState();

    myController.addListener(_printLatestValue);
  }

  _printLatestValue() {
    print("Second text field: ${myController.text}");
  }

  _test() {
    print("hi there");
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Retrieve Text Input'),
      ),
      body: Con(_test, myController)
    );
  }
}

controller_test.dart

import 'package:flutter/material.dart';

class Con extends StatelessWidget {
  Con(this.clickCallback, this.tc);
  final TextEditingController tc;
  final VoidCallback clickCallback;

  @override
  Widget build(BuildContext context) {
    return Padding(
      padding: const EdgeInsets.all(16.0),
      child: Column(
        children: <Widget>[
          TextField(
            onChanged: (text) {
              print("First text field: $text");
            },
          ),
          TextField(
            controller: tc,
          ),
          FlatButton(
            onPressed: () => clickCallback,
            child: Text("click me"),
          )
        ],
      ),
    );
  }
}

When I click the FlatButton in the widget, nothing is happening, I was expecting hi there to be printed

4 Answers

there are two options here.

  1. onPressed: () => fun() is like onPressed argument is an anonymous method that calls fun.

  2. onPressed: fun is like onPressed argument is the function fun.

I just found it in another answer here I was missing the (), so correct call is:

      FlatButton(
        onPressed: () => clickCallback(),
        child: Text("click me"),
      )

In your callback make sure to call setState if any variables change. I repopulate an list in my provider and then use assign that list to the variable list which I convert into a list of cards. The variable list needs state refreshed to see it.

You can get callback from stateless widget to your current page by using Voidcallback class.

Just add this custom widget in your current page (widget.build() function)

DefaultButton(
        buttonText: Constants.LOGIN_BUTTON_TEXT,
        onPressed: () => validateInputFields(),
        size: size,
      );

My custom widget class is

class DefaultButton extends StatelessWidget {

  DefaultButton({this.buttonText, this.onPressed, this.size});

  final String buttonText;
  final VoidCallback onPressed;
  final Size size;

  @override
  Widget build(BuildContext context) {
    return MaterialButton(
      minWidth: size.width,
      onPressed: () => onPressed(), //callback to refered page
      padding: EdgeInsets.all(0.0),
      shape: RoundedRectangleBorder(
        borderRadius: BorderRadius.circular(DEFAULT_BORDER_RADIUS),
      ),
      child: Ink(
        width: size.width,
        decoration: BoxDecoration(
          gradient: LinearGradient(
            begin: Alignment.centerLeft,
            end: Alignment.centerRight,
            colors: <Color>[
              SECONDARY_COLOR_SHADE_LITE,
              SECONDARY_COLOR_SHADE_DARK,
            ],
          ),
          borderRadius: BorderRadius.circular(DEFAULT_BORDER_RADIUS),
        ),
        child: Padding(
            padding: EdgeInsets.only(left: 20, right: 20, top: 12, bottom: 12),
            child: Text(
              buttonText,
              style: Theme.of(context).textTheme.button,
              textAlign: TextAlign.center,
            )),
      ),
    );
  }
}
Related