Button style
- Flutter kursu
- Başlangıç
- Ders 64/99
- 4 dk
ButtonStyle ile buton rengini ve şeklini özelleştirmeyi öğrenirsin.
ButtonStyle ve styleFrom
ButtonStyle, bir butonun görünümünü özelleştiren nesnedir. Doğrudan oluşturmak yerine ElevatedButton.styleFrom() yardımcı metodunu kullanmak daha kolaydır. Bu metodun primary parametresi butonun arka plan rengini belirler.
ElevatedButton(
style: ElevatedButton.styleFrom(
primary: Colors.red,
),
onPressed: () {},
child: Text('Kirmizi'),
)primary ve shape
styleFrom içinde primary arka plan rengini, shape ise butonun köşe şeklini belirler. Örneğin RoundedRectangleBorder ile yuvarlatılmış köşeler yapabilirsin. style parametresi ElevatedButton, TextButton ve OutlinedButton'ın hepsinde bulunur.
Uygulama Kırmızı arka planlı ElevatedButton yap
sec adında bir fonksiyon yaz; çağrılınca Secildi yazdırsın. main içinde sec'i çağır. Bir ElevatedButton ekle; style ile kırmızı arka plan ver, onPressed'i sec'e, child'ı Text('Sec') olarak bağla.
Başlangıç kodu
import 'package:flutter/material.dart';
// sec fonksiyonu yaz: "Secildi" yazdirsin
void main() {
// sec'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 kirmizi arka planli bir buton yap
child: SizedBox(),
),
),
);
}
}Örnek çözüm
import 'package:flutter/material.dart';
void sec() {
print('Secildi');
}
void main() {
sec();
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.red,
),
onPressed: sec,
child: Text('Sec'),
),
),
),
);
}
}Beklenen çıktı
Secildi
Soru ve cevaplar
Dersin sorularını cevaplarıyla birlikte inceleyebilirsin. Kendini denemek istersen dersi interaktif olarak çöz.
1 ButtonStyle kolayca oluşturmak için hangi yöntem kullanılır?
- ElevatedButton.create()
- ElevatedButton.new()
- ElevatedButton.styleFrom() Doğru cevap
- ElevatedButton.build()
Açıklama: ElevatedButton.styleFrom() yardımcı metodu, ButtonStyle'ı kısa yoldan oluşturur; create, new veya build diye bir metot yoktur.
2 primary parametresini ekle
ElevatedButton(
style: ElevatedButton.styleFrom(
____: Colors.red,
),
onPressed: () {},
child: Text('Kirmizi'),
)ElevatedButton(
style: ElevatedButton.styleFrom(
primary: Colors.red,
),
onPressed: () {},
child: Text('Kirmizi'),
)Açıklama: styleFrom içinde arka plan rengi primary parametresi ile verilir; color, bgColor veya mainColor geçerli parametre adları değildir.
3 Stil parçaları
| Kavram | Anlamı |
|---|---|
ButtonStyle |
Stil nesnesi |
styleFrom |
Kolay stil oluşturucu |
primary |
Arka plan rengi |
shape |
Butonun köşe şekli |