Flutter Button Çeşitleri ve Özellikleri

Merhabalar, Bu dersimizde, en çok kullanılan Flutter button çeşitlerine ve özelliklerine değineceğiz. Flutter ile uygulama geliştirirken, ilk açtığımızda karşımıza gelen örnekle başlayabiliriz. Ekranın sağ alt köşesine yerleştirilmiş buton ile, tıklandıkça ekranın merkezindeki sayıyı çoğaltıyoruz. Aslında bu örnekte kullanılan buton türü, Floating Action Button olarak geçmektedir.

Flutter Button

– Floating Action Button

Kullanım yeri olarak diğer butonlardan farklı, Scaffold’da body’nin dışında da kullanılabilir. Eğer body’nin dışında kullanılıyorsa, küçük harfle başlıyoruz ve konumu otomatik olarak ekranın sağ alt köşesidir. Örnek olarak,

floatingActionButton: FloatingActionButton(
        onPressed: _incrementCounter,
        tooltip: 'Increment',
        child: Icon(Icons.add),
      ),

Eğer body’nin içinde kullanırsak da konumlandırmayı istediğimiz gibi yapabiliriz. Bu kez kullanımında ise büyük harfle başlıyoruz.

Butonların hepsi tek bir widget alabildiği için child kullanır. İçlerine istediğimiz herhangi bir widget’ı ekleyebiliriz. Kodlar üzerinden giderek, Floating Action Button’un özelliklerini inceleyelim.

floatingActionButton: FloatingActionButton(
        splashColor: Colors.blueAccent,
        backgroundColor: Colors.pinkAccent,
        onPressed: (){
          debugPrint("Butona tıklandı");
        },
        tooltip: 'Artım',
        child: Icon(Icons.add),
      ),

Yukarıdaki kodu incelediğimizde, buton widget’ımızın içine ikon widget’ını yerleştirdiğimizi görebiliriz. Arkaplan rengini, backgroundColor ile değiştirirken; butona basılı tutarken alacağı rengi ise splashColor ile belirleyebiliyoruz. tooltip ise bize bilgi veren kısımdır, butona basılı tuttuğumuzda kısa süreliğine ekrana yansır resimde gördüğümüz gibi. onPressed‘la tıklama özelliğini vermiş oluruz.

FloatingActionButton(
        heroTag: "floatingActionButton1",
        mini: true,
        backgroundColor: Colors.greenAccent,
        onPressed: (){
          debugPrint("Butona tıklandı");
        },
        tooltip: 'Artım',
        child: Icon(Icons.filter_vintage),
      ),

İstersek tabi ki bu butonların boyutlarıyla da oynayabiliriz. mini, bool değer alarak büyük veya küçük olmasını belirtebiliriz. Ayrıca, eğer uygulamamızda birden fazla Floating Action Button varsa bu bazen karışık sebebiyle hata almamıza sebep olabilir kodda. Bunu önlemek amacıyla da heroTag ile isimlendirebiliriz.

floatingActionButtonLocation: FloatingActionButtonLocation.centerDocked,

Scaffold’ın içinde, body’nin dışında yukarıdaki kodla; Floating Action Button’ı konumlandırabiliriz.

floatingActionButton: FloatingActionButton(
        backgroundColor: Colors.deepPurpleAccent,
        onPressed: (){
          debugPrint("Butona tıklandı");
        },
        shape: RoundedRectangleBorder(borderRadius: BorderRadius.circular(5)),
        tooltip: 'Artım',
        child: Icon(Icons.insert_emoticon),
      ),

Peki Floating Action Button, her zaman yuvarlak mıdır? Hayır, shape ile istediğimiz gibi şekil verebiliriz resimde olduğu gibi.

Ve en çok rastlanan kullanım yerlerinden biri de BottomNavigationBar ile beraber kullanımıdır. Burada da normalde hiçbir değişiklik yapmadan ikisini birleştirdiğimizde, üst üste binmiş bir şekilde görsel çıkar. Fakat aşağıdaki kodu, BottomNavigationBar’ın içine eklersek iki widget’ın birbirinden ayrı durduğunu görebiliriz.

        shape:CircularNotchedRectangle,

– Raised Button

Raised Button, en klasik butonlardan biridir. Oluşturduğumuz bu widget’ın içine hiçbir şey yazmasak bile, default olarak gri renkli ve dikdörtgen şeklinde bir buton karşımıza çıkar tıpkı aşağıdaki gibi.

Diğer butonlarla aynı özelliklere sahiptir. Sadece, tıklama özelliği vermeden rengini değiştiremediğimizi belirtmek isterim. Eğer onPress() methodunu yazmazsak, ne kadar renk verirsek verelim bunu göremeyiz.

 RaisedButton(
            color: Colors.blueAccent,
            child: Text("Raised Buton örneği", style: TextStyle(color: Colors.white),),
            onPressed: (){
                 debugPrint("Butona tıklandı");
            },
          )

Raised Butona da splash veya shape gibi genel özellikleri verebiliriz.

Flutter’ın widget’larını incelerken daha detaylı bilgi almak istiyorsanız, mutlaka kendi websitesine bir göz atmalısınız.

– Icon Button

Icon button, ismi gibi sadece ikonla buton oluşturabildiğimiz bir widget’tır. Bu butonda daha çok ikon özellikleriyle oynuyoruz. Farklı olarak içine başka bir widget almıyor. Öncelikle aşağıda görünen butonlarımızı inceleyelim. İlk olarak sadece ikon seçtiğimiz için, splash özelliği yani butona basarken arkaplanda oluşan rengimiz gridir.

IconButton(
              icon: Icon(Icons.play_arrow),
              color: Colors.pinkAccent,
              onPressed: (){
                debugPrint("Butona tıklandı");
              },
              iconSize: 24,
            )

Icon button’da, hem kullandığımız Icon widget’ının içinde özelliklerini belirtirken(renk ve boyut gibi) hem de IconButton’ın içinde kullandığımız ikonun özelliklerini belirleyebiliriz. Özellikle boyutlarda bazı çakışmalar olabilir. İlk olarak, aşağıdaki kodun çıktısına bakalım. Burada, iconsize’ların farklı olduğunu görebilirsiniz.

IconButton(
              icon: Icon(
                  Icons.play_arrow,
              size: 50,
              ),
              color: Colors.pinkAccent,
              onPressed: (){
                debugPrint("Butona tıklandı");
              },
              splashColor: Colors.greenAccent,
              iconSize: 20,
            )

Ve aynı büyüklükte olan kodun çıktısına bakalım.

IconButton(
              icon: Icon(
                  Icons.play_arrow,
              size: 50,
              ),
              color: Colors.pinkAccent,
              onPressed: (){
                debugPrint("Butona tıklandı");
              },
              splashColor: Colors.greenAccent,
              iconSize: 50,
            )

– Flat Button

Flat button ise içine alacağı widget’a göre şekillenen bir buton türüdür. Yani eğer, içine Text widget’ını eklersek sadece yazı çıkar karşımıza ve istediğimiz gibi onu buton olarak kullanarak. Tıpkı aşağıdaki gibi,

FlatButton(
              onPressed: (){},
              child: Text(
                "Flat Button",
                style: TextStyle(fontSize: 24),
              )
            )

Buton türleriyle aynı özelliklere sahiptir, sadece arkaplanı default renksizdir. Bu yüzden içine aldığı widget önplandadır. Tabi ki dilerseniz, renk verebilirsiniz. Şimdi içine ikon widget’ını alırsak nasıl şekillenir, ona bakalım.

FlatButton(
              onPressed: (){},
              child: Icon(
                  Icons.notifications,
              size: 50,),
            )

Flutter Button dersimizde anlatmak istediklerim şimdilik bu kadar. Bahsettiğimiz bu buton çeşitlerinden başka da birçok buton kullanılmaktadır, fakat bu dersimizde en temel ve genelde rutin olarak kullanabileceğimiz buton çeşitlerine ve özelliklerine değindik. Bir sonraki dersimizde de resim widget’ına değineceğiz. Resim ekleme yolları ve özellikleri de bilmemiz gereken temel konulardandır.

Flutter eğitim serisine ulaşmak için tıklayabilirsiniz.