ElevatedButton nedir?
- Flutter kursu
- Başlangıç
- Ders 61/99
- 4 dk
ElevatedButton ile kabarık buton yapmayı öğrenirsin.
ElevatedButton nedir?
ElevatedButton, Material tasarıma uygun, kabarık ve gölgeli bir buton widget'ıdır. onPressed parametresine bir callback, child parametresine ise genellikle bir Text widget'ı verirsin. Kullanıcı butona bastığında onPressed callback'i çağrılır ve içindeki kod çalışır.
ElevatedButton(
onPressed: () {
print('Tiklandi');
},
child: Text('Tikla'),
)Kabarık görünüm
ElevatedButton, altında gölge olan kabarık bir yüzeye sahiptir; bu yüzden önemli eylemler için uygundur. Material bileşeni kendiliğinden sağladığından InkWell'de olduğu gibi ayrıca Material sarmalamana gerek yoktur. child genellikle bir Text widget'ıdır, ama Row içine ikon ve metin koyabilirsin.
Uygulama ElevatedButton ile tıklama yakala
tiklandi adında bir fonksiyon yaz; çağrılınca Tiklandi yazdırsın. main içinde tiklandi'yı çağır. Bir ElevatedButton ekle ve onPressed'i tiklandi'ya, child'ı Text('Tikla') olarak bağla.
Başlangıç kodu
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(),
),
),
);
}
}Örnek çözüm
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'),
),
),
),
);
}
}Beklenen çıktı
Tiklandi
Soru ve cevaplar
Dersin sorularını cevaplarıyla birlikte inceleyebilirsin. Kendini denemek istersen dersi interaktif olarak çöz.
1 ElevatedButton'a basıldığında ne olur?
- child widget'ı gizlenir
- Uygulama çöker
- Buton otomatik olarak renk değiştirip kapanır
- onPressed callback'i çağrılır Doğru cevap
Açıklama: ElevatedButton basıldığında onPressed parametresine verilen callback fonksiyonu çağrılır.
2 onPressed parametresini ekle
ElevatedButton(
____: () {
print('Tiklandi');
},
child: Text('Tikla'),
)ElevatedButton(
onPressed: () {
print('Tiklandi');
},
child: Text('Tikla'),
)Açıklama: ElevatedButton'da basma olayı onPressed parametresi ile yakalanır; onClick veya onPress geçerli parametre adları değildir.
3 ElevatedButton parçaları
| Kavram | Anlamı |
|---|---|
ElevatedButton |
Kabarık Material buton |
onPressed |
Basınca çağrılan callback |
child |
Butonun içeriği |
Text |
child için yaygın widget |