onPressed and child

Learn the roles of onPressed callback and child content.

Roles of onPressed and child

onPressed is the callback function called when the button is pressed. child is the widget shown inside the button, most often a Text. If you set onPressed to null, the button becomes disabled; it appears gray and cannot be pressed.

ElevatedButton(
  onPressed: null,
  child: Text('Disabled'),
)

child can be different widgets

child is usually a Text widget, but you can give other widgets too. For example, you can put an icon and text inside a Row to make an icon button. child determines the button's size and content.

ElevatedButton(
  onPressed: () {},
  child: Row(
    mainAxisSize: MainAxisSize.min,
    children: [Icon(Icons.save), Text('Save')],
  ),
)

Exercise Make a cancel button with ElevatedButton

Write a function cancel that prints Iptal. In main call cancel. Add an ElevatedButton; wire onPressed to cancel and child to Text('Iptal').

Show example solution

import 'package:flutter/material.dart';

void iptal() {
  print('Iptal');
}

void main() {
  iptal();
  runApp(const Uygulama());
}

class Uygulama extends StatelessWidget {
  const Uygulama({super.key});

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        body: Center(
          child: ElevatedButton(
            onPressed: iptal,
            child: Text('Iptal'),
          ),
        ),
      ),
    );
  }
}

Test yourself

What happens if null is given to the onPressed parameter?
- The button becomes disabled and cannot be pressed
- An empty function is automatically assigned to onPressed
- The app crashes
- child is removed
Show answer

The button becomes disabled and cannot be pressed — If onPressed is null, ElevatedButton becomes disabled; it appears gray and no callback is called when pressed.

Add the child parameter

ElevatedButton(
  onPressed: () {},
  ____: Text('Tamam'),
)

Show answer

ElevatedButton(
  onPressed: () {},
  child: Text('Tamam'),
)

onPressed and child

onPressed

Callback called on press
child

Widget shown inside the button
null

Disables the button
Text

Common choice for child

Next lesson: TextButton and OutlinedButton

We Are Enhancing Your Experience

Cookie Preferences

Strictly Necessary Cookies

Analytical Cookies