Özet - ElevatedButton

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.

Örnek çözümü göster

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

Kendini test et

Stilli ve işlevsel bir buton için hangi parçalar bir arada kullanılır?
- ListView + ListTile + Separator
- ElevatedButton + ButtonStyle + onPressed
- Column + Row + SizedBox
- Text + Padding + Center
Cevabı göster

ElevatedButton + ButtonStyle + onPressed — Stilli buton için ElevatedButton widget'ı, ButtonStyle ile görünüm ve onPressed ile eylem birlikte verilir.

styleFrom metodunu ekle

ElevatedButton(
  style: ElevatedButton.
    ____(
      primary: Colors.green,
    ),
  onPressed: () =&gt; print('Kaydet'),
  child: Text('Kaydet'),
)

Cevabı göster

ElevatedButton(
  style: ElevatedButton.
    styleFrom(
      primary: Colors.green,
    ),
  onPressed: () =&gt; print('Kaydet'),
  child: Text('Kaydet'),
)

ElevatedButton özeti

ElevatedButton

Kabarık Material buton
ButtonStyle

Görünüm özelleştirme
onPressed

Basınca çağrılan callback
styleFrom

Kolay stil oluşturucu

Sıradaki ders: TextFormField nedir?

Deneyiminizi Geliştiriyoruz

Çerez Tercihleri

Kesinlikle Gerekli Çerezler

Analitik Çerezler