Özet - ElevatedButton
- Flutter kursu
- Başlangıç
- Ders 65/99
- 4 dk
ElevatedButton ve stillerini birleştirerek aksiyon çubuğu yaparsın.
Üç parçayı birleştir
Stilli bir kabarık buton yapmak için üç parçayı birleştirirsin: butonun kendisi (ElevatedButton), görünümü (ButtonStyle) ve eylemi (onPressed). style parametresine ElevatedButton.styleFrom(primary: ...) verirsin ve onPressed ile child'ı bağlarsın. Böylece hem renkli hem de işlevsel bir buton elde edersin.
ElevatedButton(
style: ElevatedButton.styleFrom(
primary: Colors.green,
),
onPressed: () => print('Kaydet'),
child: Text('Kaydet'),
)Uygulama Yeşil kaydet butonu yap
kaydet adında bir fonksiyon yaz; çağrılınca Kaydet yazdırsın. main içinde kaydet'i çağır. Bir ElevatedButton ekle; style ile yeşil arka plan ver, onPressed'i kaydet'e, child'ı Text('Kaydet') olarak bağla.
Başlangıç kodu
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(),
),
),
);
}
}Örnek çözüm
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'),
),
),
),
);
}
}Beklenen çıktı
Kaydet
Soru ve cevaplar
Dersin sorularını cevaplarıyla birlikte inceleyebilirsin. Kendini denemek istersen dersi interaktif olarak çöz.
1 Stilli ve işlevsel bir buton için hangi parçalar bir arada kullanılır?
- ListView + ListTile + Separator
- ElevatedButton + ButtonStyle + onPressed Doğru cevap
- Column + Row + SizedBox
- Text + Padding + Center
Açıklama: Stilli buton için ElevatedButton widget'ı, ButtonStyle ile görünüm ve onPressed ile eylem birlikte verilir.
2 styleFrom metodunu ekle
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'),
)Açıklama: ButtonStyle oluşturmak için ElevatedButton.styleFrom() yardımcı metodu kullanılır; createStyle, makeStyle veya buildStyle diye bir metot yoktur.
3 ElevatedButton özeti
| Kavram | Anlamı |
|---|---|
ElevatedButton |
Kabarık Material buton |
ButtonStyle |
Görünüm özelleştirme |
onPressed |
Basınca çağrılan callback |
styleFrom |
Kolay stil oluşturucu |