What is ElevatedButton?

Learn to make a raised button with ElevatedButton.

What is ElevatedButton?

ElevatedButton is a Material design button that appears raised with a shadow. You provide a callback to onPressed and usually a Text widget to child. When the user presses the button, the onPressed callback is called and its code runs.

ElevatedButton(
  onPressed: () {
    print('Tapped');
  },
  child: Text('Tap'),
)

Raised appearance

ElevatedButton has a raised surface with a shadow underneath, which makes it suitable for important actions. Since it provides the Material component itself, you do not need to wrap it with Material as you do with InkWell. The child is usually a Text widget, but you can put a Row with an icon and text inside.

Exercise Capture a tap with ElevatedButton

Write a function tapped that prints Tiklandi. In main call tapped. Add an ElevatedButton and wire onPressed to tapped and child to Text('Tikla').

Show example solution

import 'package:flutter/material.dart';

void tiklandi() {
  print('Tiklandi');
}

void main() {
  tiklandi();
  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: tiklandi,
            child: Text('Tikla'),
          ),
        ),
      ),
    );
  }
}

Test yourself

What happens when ElevatedButton is pressed?
- The child widget is hidden
- The app crashes
- The button automatically changes color and closes
- The onPressed callback is called
Show answer

The onPressed callback is called — When ElevatedButton is pressed, the callback function given to the onPressed parameter is called.

Add the onPressed parameter

ElevatedButton(
  ____: () {
    print('Tiklandi');
  },
  child: Text('Tikla'),
)

Show answer

ElevatedButton(
  onPressed: () {
    print('Tiklandi');
  },
  child: Text('Tikla'),
)

ElevatedButton parts

ElevatedButton

Raised Material button
onPressed

Callback called on press
child

The button's content
Text

Common widget for child

Next lesson: onPressed and child

We Are Enhancing Your Experience

Cookie Preferences

Strictly Necessary Cookies

Analytical Cookies