What is ElevatedButton?
- Flutter course
- Beginner
- Lesson 61/99
- 4 min
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.
Practice 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').
Starter code
import 'package:flutter/material.dart';
// tiklandi fonksiyonu yaz: "Tiklandi" yazdirsin
void main() {
// tiklandi'yi cagir
runApp(const Uygulama());
}
class Uygulama extends StatelessWidget {
const Uygulama({super.key});
@override
Widget build(BuildContext context) {
return MaterialApp(
home: Scaffold(
body: Center(
// ElevatedButton ekle: onPressed ve child ver
child: SizedBox(),
),
),
);
}
}Sample 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'),
),
),
),
);
}
}Expected output
Tiklandi
Questions and answers
Review the lesson questions together with their answers. To test yourself, solve the lesson interactively.
1 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 Correct answer
Explanation: When ElevatedButton is pressed, the callback function given to the onPressed parameter is called.
2 Add the onPressed parameter
ElevatedButton(
____: () {
print('Tiklandi');
},
child: Text('Tikla'),
)ElevatedButton(
onPressed: () {
print('Tiklandi');
},
child: Text('Tikla'),
)Explanation: In ElevatedButton the press event is captured with the onPressed parameter; onClick or onPress are not valid parameter names.
3 ElevatedButton parts
| Term | Meaning |
|---|---|
ElevatedButton |
Raised Material button |
onPressed |
Callback called on press |
child |
The button's content |
Text |
Common widget for child |