TextButton ve OutlinedButton
- Flutter kursu
- Başlangıç
- Ders 63/99
- 4 dk
TextButton ve OutlinedButton çeşitlerini öğrenirsin.
TextButton ve OutlinedButton
Material, ElevatedButton dışında iki yaygın buton çeşidi daha sunar. TextButton düz bir metin butonudur; arka planı veya gölgesi yoktur. OutlinedButton ise metnin etrafında bir kenarlık çizer ama dolgu yapmaz. Üçü de onPressed ve child parametrelerini alır.
TextButton(
onPressed: () {},
child: Text('Geri'),
)
OutlinedButton(
onPressed: () {},
child: Text('Sec'),
)Hangi buton ne zaman?
ElevatedButton, ekrandaki birincil eylem için kullanılır; örneğin form gönderme. TextButton, daha az önemli ikincil eylemler için uygundur; örneğin iptal veya kapat. OutlinedButton, önemli ama birincil olmayan eylemler için kullanılır; örneğin alternatif seçenek.
Uygulama TextButton ile geri butonu yap
geri adında bir fonksiyon yaz; çağrılınca Geri yazdırsın. main içinde geri'yi çağır. Bir TextButton ekle; onPressed'i geri'ye, child'ı Text('Geri') olarak bağla.
Başlangıç kodu
import 'package:flutter/material.dart';
// geri fonksiyonu yaz: "Geri" yazdirsin
void main() {
// geri'yi cagir
runApp(const Uygulama());
}
class Uygulama extends StatelessWidget {
const Uygulama({super.key});
@override
Widget build(BuildContext context) {
return MaterialApp(
home: Scaffold(
body: Center(
// TextButton ekle: onPressed ve child ver
child: SizedBox(),
),
),
);
}
}Örnek çözüm
import 'package:flutter/material.dart';
void geri() {
print('Geri');
}
void main() {
geri();
runApp(const Uygulama());
}
class Uygulama extends StatelessWidget {
const Uygulama({super.key});
@override
Widget build(BuildContext context) {
return MaterialApp(
home: Scaffold(
body: Center(
child: TextButton(
onPressed: geri,
child: Text('Geri'),
),
),
),
);
}
}Beklenen çıktı
Geri
Soru ve cevaplar
Dersin sorularını cevaplarıyla birlikte inceleyebilirsin. Kendini denemek istersen dersi interaktif olarak çöz.
1 Hangi buton yalnızca kenarlık çizer ve dolgu yapmaz?
- Container
- OutlinedButton Doğru cevap
- ElevatedButton
- TextButton
Açıklama: OutlinedButton, metnin etrafına kenarlık çizer ama arka planı dolgusuz bırakır.
2 TextButton widget'ını ekle
TextButton(
onPressed: () => print('Geri'),
child: Text('Geri'),
)
____(
onPressed: () => print('Iptal'),
child: Text('Iptal'),
)TextButton(
onPressed: () => print('Geri'),
child: Text('Geri'),
)
OutlinedButton(
onPressed: () => print('Iptal'),
child: Text('Iptal'),
)Açıklama: Dolgu yapmadan kenarlık göstermek istediğinde OutlinedButton kullanılır; ElevatedButton gölgeli, IconButton ikonludur.
3 Buton çeşitleri
| Kavram | Anlamı |
|---|---|
ElevatedButton |
Kabarık ve gölgeli |
TextButton |
Düz, sadece metin |
OutlinedButton |
Kenarlıklı, dolgusuz |
variant |
Buton çeşidi |