Button style

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.

Örnek çözümü göster

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'),
          ),
        ),
      ),
    );
  }
}

Kendini test et

ButtonStyle kolayca oluşturmak için hangi yöntem kullanılır?
- ElevatedButton.create()
- ElevatedButton.new()
- ElevatedButton.styleFrom()
- ElevatedButton.build()
Cevabı göster

ElevatedButton.styleFrom() — ElevatedButton.styleFrom() yardımcı metodu, ButtonStyle'ı kısa yoldan oluşturur; create, new veya build diye bir metot yoktur.

primary parametresini ekle

ElevatedButton(
  style: ElevatedButton.styleFrom(
    ____: Colors.red,
  ),
  onPressed: () {},
  child: Text('Kirmizi'),
)

Cevabı göster

ElevatedButton(
  style: ElevatedButton.styleFrom(
    primary: Colors.red,
  ),
  onPressed: () {},
  child: Text('Kirmizi'),
)

Stil parçaları

ButtonStyle

Stil nesnesi
styleFrom

Kolay stil oluşturucu
primary

Arka plan rengi
shape

Butonun köşe şekli

Sıradaki ders: Özet - ElevatedButton

Deneyiminizi Geliştiriyoruz

Çerez Tercihleri

Kesinlikle Gerekli Çerezler

Analitik Çerezler