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.

Image for post

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,


What's Your Reaction?

hate hate
0
hate
fail fail
0
fail
fun fun
0
fun
geeky geeky
0
geeky
love love
0
love
lol lol
0
lol
omg omg
0
omg
win win
0
win
Murat Bilginer
21 Şubat 1992 Doğumlu. Endüstri Mühendisi olarak Lisansını 2016 yılında tamamlamıştır. Industryolog Akademi - NGenius oluşumlarının kurucusudur. Şu anda kendi şirketi Brainy Tech ile hem Yazılım Hizmetleri Sunmakta Hem de Online Eğitimler Vermektedir.