Kayan Eylem Düğmesi

Coddy'nin Flutter Journey'sinin Etkileşimli Uygulamalar bölümünün bir parçası. Ders 5 / 34.

Birçok uygulamada sağ alt köşede duran yuvarlak bir düğme bulunur: yeni mesaj, yeni not, yeni fotoğraf. Flutter buna FloatingActionButton der.

Bu düğme body içine yerleştirilmez. Scaffold içinde, appBar: ve body: yanında, kendisine ayrılmış bir yer vardır:

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

Scaffold bu düğmeyi köşeye yerleştirir ve ekrandaki diğer her şeyin üstünde tutar. child: genellikle bir Icon olur.

Görev

Kolay

Scaffold'a, basıldığında New note yazdıran Icons.add simgeli bir kayan işlem düğmesi ekle.

Kendin dene

import 'package:flutter/material.dart';

void main() {
  runApp(const MyApp());
}

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

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      debugShowCheckedModeBanner: false,
      home: Scaffold(
        body: Center(
          child: Text('No notes yet'),
        ),
      ),
    );
  }
}