TextButton ve OutlinedButton

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.

Örnek çözümü göster

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

Kendini test et

Hangi buton yalnızca kenarlık çizer ve dolgu yapmaz?
- Container
- OutlinedButton
- ElevatedButton
- TextButton
Cevabı göster

OutlinedButton — OutlinedButton, metnin etrafına kenarlık çizer ama arka planı dolgusuz bırakır.

TextButton widget'ını ekle

TextButton(
  onPressed: () =&gt; print('Geri'),
  child: Text('Geri'),
)

____(
  onPressed: () =&gt; print('Iptal'),
  child: Text('Iptal'),
)

Cevabı göster

TextButton(
  onPressed: () =&gt; print('Geri'),
  child: Text('Geri'),
)

OutlinedButton(
  onPressed: () =&gt; print('Iptal'),
  child: Text('Iptal'),
)

Buton çeşitleri

ElevatedButton

Kabarık ve gölgeli
TextButton

Düz, sadece metin
OutlinedButton

Kenarlıklı, dolgusuz
variant

Buton çeşidi

Sıradaki ders: Button style

Deneyiminizi Geliştiriyoruz

Çerez Tercihleri

Kesinlikle Gerekli Çerezler

Analitik Çerezler