ElevatedButton nedir?

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.

Örnek çözümü göster

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

Kendini test et

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
Cevabı göster

onPressed callback'i çağrılır — ElevatedButton basıldığında onPressed parametresine verilen callback fonksiyonu çağrılır.

onPressed parametresini ekle

ElevatedButton(
  ____: () {
    print('Tiklandi');
  },
  child: Text('Tikla'),
)

Cevabı göster

ElevatedButton(
  onPressed: () {
    print('Tiklandi');
  },
  child: Text('Tikla'),
)

ElevatedButton parçaları

ElevatedButton

Kabarık Material buton
onPressed

Basınca çağrılan callback
child

Butonun içeriği
Text

child için yaygın widget

Sıradaki ders: onPressed ve child

Deneyiminizi Geliştiriyoruz

Çerez Tercihleri

Kesinlikle Gerekli Çerezler

Analitik Çerezler