Learn Functions and Callbacks in Flutter | Dart Language Core for Flutter

Dart functions are a fundamental building block in Flutter apps. You define a function using the void or a return type, followed by the function name and parameters in parentheses. Dart also supports concise arrow syntax for single-expression functions, making code cleaner and more readable. In Flutter, callbacks are functions that you pass as arguments to widgets—commonly for event handling, such as responding to button presses. These callbacks allow widgets to notify your code when something happens, enabling interactive and dynamic UIs.

main.dart


              12345678910111213141516171819202122232425262728
            
// main.dart
import 'package:flutter/material.dart';

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

// StatelessWidget that takes a callback and uses arrow syntax
class MyApp extends StatelessWidget {
  // The callback is a final Function field
  final VoidCallback onButtonPressed;

  MyApp({Key? key, this.onButtonPressed = _defaultCallback}) : super(key: key);

  // Arrow function for the default callback
  static void _defaultCallback() => print('Button pressed!');

  @override
  Widget build(BuildContext context) => MaterialApp(
        home: Scaffold(
          appBar: AppBar(title: Text('Arrow Functions & Callbacks')),
          body: Center(
            child: ElevatedButton(
              onPressed: onButtonPressed, // Passing the callback
              child: Text('Press Me'),
            ),
          ),
        ),
      );
}

Passing functions as parameters is a common pattern in Flutter, especially for event handlers like the onPressed property of buttons. You can pass a named function, an anonymous function, or use arrow syntax for a compact callback. This approach lets you control widget behavior from outside the widget itself, making your code modular and flexible.

main.dart


              123456789101112131415161718192021
            
// main.dart
import 'package:flutter/material.dart';

void main() => runApp(MaterialApp(home: MyButtonExample()));

class MyButtonExample extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: Center(
        child: ElevatedButton(
          // Passing an anonymous function as a callback
          onPressed: () {
            print('Button was pressed!');
          },
          child: Text('Click Me'),
        ),
      ),
    );
  }
}

Note

When you pass a function as a callback (like onPressed: myFunction), you are providing a reference to that function. If you write onPressed: myFunction(), the function is called immediately when the widget builds, not when the button is pressed. Always pass the function reference, not the result of calling it, unless you are using an anonymous function or arrow syntax to wrap logic.

Everything was clear?

Thanks for your feedback!

Section 1. Chapter 2

Ask AI

Ask anything or try one of the suggested questions to begin our chat

Suggested prompts:

Can you show an example of passing a function as a parameter in Flutter?

What is the difference between a named function and an anonymous function in this context?

How do I use arrow syntax for callbacks in Flutter?

Swipe to show menu

main.dart


              12345678910111213141516171819202122232425262728
            
// main.dart
import 'package:flutter/material.dart';

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

// StatelessWidget that takes a callback and uses arrow syntax
class MyApp extends StatelessWidget {
  // The callback is a final Function field
  final VoidCallback onButtonPressed;

  MyApp({Key? key, this.onButtonPressed = _defaultCallback}) : super(key: key);

  // Arrow function for the default callback
  static void _defaultCallback() => print('Button pressed!');

  @override
  Widget build(BuildContext context) => MaterialApp(
        home: Scaffold(
          appBar: AppBar(title: Text('Arrow Functions & Callbacks')),
          body: Center(
            child: ElevatedButton(
              onPressed: onButtonPressed, // Passing the callback
              child: Text('Press Me'),
            ),
          ),
        ),
      );
}

main.dart


              123456789101112131415161718192021
            
// main.dart
import 'package:flutter/material.dart';

void main() => runApp(MaterialApp(home: MyButtonExample()));

class MyButtonExample extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: Center(
        child: ElevatedButton(
          // Passing an anonymous function as a callback
          onPressed: () {
            print('Button was pressed!');
          },
          child: Text('Click Me'),
        ),
      ),
    );
  }
}

Note

Everything was clear?

Thanks for your feedback!

Section 1. Chapter 2