Flutter 0’dan Mobil Uygulama Geliştirme 30 – Scaffold Detaylı İnceleme 4 floatingActionButton


Merhabalar.

Scaffold içinde BottomNavigationBar özelliğimizi inceledikten sonra bir diğer özelliğimiz floatingActionButton’a bakacağız.

İsminden de anlaşılacağı üzere bu bir aksiyon butonu gibi düşünülebilir.

Uygulama içindeki en temel işlev ne ise onun yapılmasını sağlayan butondur.

Mesela Twitter’ın sağ alt köşedeki yeni twit yaz butonu. Gmail uygulamasının sağ alt kısmında bulunan yeni mail yaz butonu ve diğer uygulamalarda da sıklıkla rastlarsınız. Bu butonu nasıl yaparız nasıl özelleştiririz bunu öğreneceğiz şimdi.

FAB, Flutter’daki diğer widgetlar gibi method olarak yazılır. onPressed parametresi zorunludur(required) ve butona tıklanınca yapılacak eylemi belirler. Eğer null döndürürse devre dışı kalır ve butona tıkladığımızda FAB tepki vermez. Yaygın kullanımda Scaffold(iskelet) yapısının içinde Scaffold.floatingActionButton şeklinde kullanılır. Basit bir örnekle inceleyelim:

import 'package:flutter/material.dart';

void main(){
  runApp(MaterialApp(
    debugShowCheckedModeBanner: false,
    title: "Brainy Tech",
    home: Scaffold(
      appBar: AppBar(
        title: Text("Brainy Tech"),
        elevation: 12,
        centerTitle: true,
      ),
      body: Container(
        child: Text("Brainy Tech"),
      ),
      floatingActionButton: FloatingActionButton(
        onPressed: (){
          debugPrint("Ekle Uygulandı");
        },
        elevation: 12,
        child: Icon(Icons.add, size: 30,),
        backgroundColor: Colors.blueAccent,
        tooltip: "Add",
      ),
    ),
  ),
  );
}
floatingActionButton: FloatingActionButton(
        onPressed: (){
          debugPrint("Ekle Uygulandı");
        },
        elevation: 12,
        child: Icon(Icons.add, size: 30,),
        backgroundColor: Colors.blueAccent,
        tooltip: "Add",
      ),

Gördüğünüz gibi sağ alt köşeye buton geldi.

Kodlara bakalım.

onPressed zorunlu parametredir.

Buraya istersek bir fonksiyon ismi geçebiliriz.

Ama isimsiz bir fonksiyonla işlem orada da yazdırılabilir.

onPressed: (){
},

Bu şekilde tanımlanabilir.

İçine kod yazılarak aşağıdaki gibi de tanımlanabilir.

onPressed: (){
          debugPrint("Ekle Uygulandı");
        },

Bilmediğimiz özelliklerden biri tooltip. Bu butonun üzerine gittiğinizde uyarı olarak bir küçük tooltip açar üzerinde.

Iconun daha küçük görünmesini isterseniz mini özelliğine true değerini veriniz.

mini: true,
foregroundColor: Colors.amber,

FloatingActionButton ekrandaki konumunu nasıl değiştiririz?

Material design, FAB’ı varsayılan olarak ekranın sağ alt köşesinde tanımlar. Bu konumu değiştirmek için Scaffold yapısının içindefloatingActionButtonLocation parametresini kullanacağız. Şimdi bir örnekle inceleyelim.

floatingActionButtonLocation:
 FloatingActionButtonLocation.centerFloat,

Exit mobile version