FloatingActionButton

FloatingActionButton ile yüzen eylem butonu eklemeyi öğrenirsin.

FloatingActionButton nedir?

FloatingActionButton, Scaffold'ın sağ alt köşesinde yüzen yuvarlak bir butondur. onPressed parametresine bir callback, child parametresine ise genellikle bir Icon verilir. Scaffold'ın floatingActionButton parametresine bağlanır.

Scaffold(
  floatingActionButton: FloatingActionButton(
    onPressed: () {},
    child: Icon(Icons.add),
  ),
)

onPressed ve child

FloatingActionButton'ın onPressed parametresi, butona basıldığında çağrılacak callback'i belirler. child parametresi ise butonun içinde gösterilen widget'tır; en sık bir Icon verilir. onPressed verilmezse buton devre dışı kalır.

Uygulama FloatingActionButton ekle

ekle adında bir fonksiyon yaz; çağrılınca Eklendi yazdırsın. main içinde ekle'yi çağır. Scaffold'a bir body ve bir FloatingActionButton ekle; FAB'ın onPressed'i ekle'ye, child'ı Icon(Icons.add) olsun.

Örnek çözümü göster

import 'package:flutter/material.dart';

void ekle() {
  print('Eklendi');
}

void main() {
  ekle();
  runApp(const Uygulama());
}

class Uygulama extends StatelessWidget {
  const Uygulama({super.key});

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        body: Center(child: Text('Gorev')),
        floatingActionButton: FloatingActionButton(
          onPressed: ekle,
          child: Icon(Icons.add),
        ),
      ),
    );
  }
}

Kendini test et

FloatingActionButton Scaffold'a hangi parametre ile bağlanır?
- floatingActionButton
- body
- appBar
- drawer
Cevabı göster

floatingActionButton — FloatingActionButton, Scaffold'ın floatingActionButton parametresine bağlanır; body, appBar veya drawer bu amaca yönelik değildir.

floatingActionButton parametresini ekle

Scaffold(
  body: Center(child: Text('Gorev')),
  ____: FloatingActionButton(
    onPressed: () {},
    child: Icon(Icons.add),
  ),
)

Cevabı göster

Scaffold(
  body: Center(child: Text('Gorev')),
  floatingActionButton: FloatingActionButton(
    onPressed: () {},
    child: Icon(Icons.add),
  ),
)

FAB parçaları

FloatingActionButton

Yüzen yuvarlak buton
onPressed

Basınca çağrılan callback
child

Butonun içindeki widget
floatingActionButton

Scaffold'ın parametresi

Sıradaki ders: Drawer

Deneyiminizi Geliştiriyoruz

Çerez Tercihleri

Kesinlikle Gerekli Çerezler

Analitik Çerezler