Flutter BottomAppBar Widgeti Kullanımı

Herkese merhaba, Flutter yazılarımıza kaldığımız yerden devam ediyoruz. Bu yazımızda BottomAppBar widgetini ve kullanımını anlatacağım. Hadi başlayalım !

Flutter, Google tarafından geliştirilen ve hızlı mobil uygulama geliştirme için kullanılan açık kaynaklı bir UI çerçevesidir. Flutter, birçok widget içerir ve bu widget’lar sayesinde uygulamaların tasarımı daha kolay hale gelir. Bu makalede, Flutter’ın BottomAppBar widget’ının özellikleri ve kullanımı hakkında bilgi vereceğim.

BottomAppBar, bir uygulamanın alt kısmında yer alan bir çubuk olarak tanımlanabilir. BottomAppBar, genellikle Scaffold widget’ı içinde kullanılır ve uygulamadaki sayfalar arasında gezinmek için kullanılan bir menü çubuğu olarak da işlev görebilir. BottomAppBar, uygulamaya birçok farklı özellik ekleyebilir ve kullanımı oldukça kolaydır.

BottomAppBar Özellikleri

• shape: BottomAppBar’ın şeklini ayarlar. Default değeri CircularNotchedRectangle’dir.
• notchMargin: Eğer shape değeri CircularNotchedRectangle ise, bu değer çentik boyutunu ayarlar.
• color: BottomAppBar’ın arka plan rengini ayarlar.
• elevation: BottomAppBar’ın yükselti değerini ayarlar.
• clipBehavior: BottomAppBar’ın kesme davranışını ayarlar.
• notch: BottomAppBar’ın kesilmiş bir şekilde görüntülenip görüntülenmeyeceğini belirler.
• child: BottomAppBar’a eklenen widget’ları ayarlar.

BottomAppBar Kullanımı

Öncelikle, uygulamanızda Scaffold widget’ını kullanmanız gerekiyor. Scaffold widget’ı, uygulamanın temel yapısını oluşturur. Scaffold widget’ının içinde BottomAppBar widget’ını kullanarak uygulamanızın alt kısmındaki menü çubuğunu oluşturabilirsiniz.

Aşağıdaki örnek, BottomAppBar’ın nasıl kullanılacağına dair basit bir örnektir:

import 'package:flutter/material.dart';

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
        home: Scaffold(
      appBar: AppBar(title: Text('Flutter BottomAppBar')),
      body: Center(child: Text('Flutter BottomAppBar')),
      bottomNavigationBar: BottomAppBar(
        shape: CircularNotchedRectangle(),
        color: Colors.white,
        child: Row(
          mainAxisAlignment: MainAxisAlignment.spaceBetween,
          children: [
            IconButton(
              icon: Icon(Icons.menu),
              onPressed: () {},
            ),
            IconButton(
              icon: Icon(Icons.search),
              onPressed: () {},
            ),
          ],
        ),
      ),
      floatingActionButton: FloatingActionButton(
        onPressed: () {},
        child: Icon(Icons.add),
      ),
      floatingActionButtonLocation: FloatingActionButtonLocation.centerDocked,
    ));
  }
}

Yukarıdaki örnekte, BottomAppBar’ın şekli CircularNotchedRectangle olarak ayarlanmıştır ve uygulamanın alt kısmında iki adet IconButton widget’ı bulunmaktadır. Row widget’ı kullanılarak IconButton widget’ları alt kısmın ortasında hizalanmıştır.

Scaffold widget’ı içinde kullanılan floatingActionButton, BottomAppBar’ın üzerinde de görüntülenmektedir. Bunun nedeni, floatingActionButtonLocation değerinin centerDocked olarak ayarlanmasıdır.

Ayrıca, IconButton widget’larına basıldığında yapılacak işlemler onPressed fonksiyonu içinde belirtilmiştir.

Sonuç

Sonuç olarak, BottomAppBar widget’ı, bir uygulamanın alt kısmında kullanılan bir menü çubuğu olarak işlev görebilir. Özellikleri sayesinde BottomAppBar’ı uygulamanıza özelleştirebilir ve kullanımı oldukça kolaydır. Yukarıdaki örnekte, Scaffold widget’ının içinde kullanılarak BottomAppBar’ın nasıl kullanılabileceği ve özelleştirilebileceği gösterilmiştir.

Evet BottomAppBar widgeti ve kullanımı bu şekilde olmakta. Tüm Flutter yazılarımıza buraya tıklayarak ulaşabilirsiniz. Herkese hayırlı günler.