Summary - ElevatedButton
- Flutter course
- Beginner
- Lesson 65/99
- 4 min
Combine ElevatedButton and styles to make an action bar.
Combine three parts
To make a styled raised button, you combine three parts: the button itself (ElevatedButton), its appearance (ButtonStyle), and its action (onPressed). You pass ElevatedButton.styleFrom(primary: ...) to the style parameter and wire onPressed and child. This gives you a button that is both colored and functional.
ElevatedButton(
style: ElevatedButton.styleFrom(
primary: Colors.green,
),
onPressed: () => print('Save'),
child: Text('Save'),
)Practice Make a green save button
Write a function save that prints Kaydet. In main call save. Add an ElevatedButton; give a green background via style, wire onPressed to save and child to Text('Kaydet').
Starter code
import 'package:flutter/material.dart';
// kaydet fonksiyonu yaz: "Kaydet" yazdirsin
void main() {
// kaydet'i 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: style, onPressed, child ver
// style ile yesil arka planli bir buton yap
child: SizedBox(),
),
),
);
}
}Sample solution
import 'package:flutter/material.dart';
void kaydet() {
print('Kaydet');
}
void main() {
kaydet();
runApp(const Uygulama());
}
class Uygulama extends StatelessWidget {
const Uygulama({super.key});
@override
Widget build(BuildContext context) {
return MaterialApp(
home: Scaffold(
body: Center(
child: ElevatedButton(
style: ElevatedButton.styleFrom(
primary: Colors.green,
),
onPressed: kaydet,
child: Text('Kaydet'),
),
),
),
);
}
}Expected output
Kaydet
Questions and answers
Review the lesson questions together with their answers. To test yourself, solve the lesson interactively.
1 Which parts are used together for a styled and functional button?
- ListView + ListTile + Separator
- ElevatedButton + ButtonStyle + onPressed Correct answer
- Column + Row + SizedBox
- Text + Padding + Center
Explanation: For a styled button, the ElevatedButton widget, ButtonStyle for appearance and onPressed for action are given together.
2 Add the styleFrom method
ElevatedButton(
style: ElevatedButton.
____(
primary: Colors.green,
),
onPressed: () => print('Kaydet'),
child: Text('Kaydet'),
)ElevatedButton(
style: ElevatedButton.
styleFrom(
primary: Colors.green,
),
onPressed: () => print('Kaydet'),
child: Text('Kaydet'),
)Explanation: To create a ButtonStyle, the ElevatedButton.styleFrom() helper is used; there is no method named createStyle, makeStyle or buildStyle.
3 ElevatedButton summary
| Term | Meaning |
|---|---|
ElevatedButton |
Raised Material button |
ButtonStyle |
Appearance customization |
onPressed |
Callback called on press |
styleFrom |
Easy style builder |