Flutter AppBar Widgeti Kullanımı

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

Flutter, Google tarafından geliştirilen açık kaynaklı bir mobil uygulama geliştirme çerçevesidir. Flutter, hem Android hem de iOS için uygulama geliştirme için kullanılabilir. Flutter’da birçok özellik bulunmaktadır ve bu özelliklerden biri de AppBar özelliğidir. AppBar, kullanıcı arayüzünde en üstte bulunan öğedir ve uygulamadaki sayfalar arasında gezinmeyi sağlar.

AppBar, birçok özelliği içinde barındırır ve uygulama geliştiricilerin uygulama tasarımlarını zenginleştirmesine olanak tanır. AppBar özelliklerini kullanarak uygulama arayüzünde farklı stiller yaratabilirsiniz. Bu makalede, Flutter’da AppBar özelliğinin nasıl kullanılacağı ve bazı özelliklerinin neler olduğu açıklanacaktır.

AppBar Oluşturma

Flutter’da AppBar oluşturmak için Scaffold widget’ını kullanmanız gerekiyor. Scaffold, kullanıcı arayüzünü oluşturmanıza yardımcı olan bir widget’dir. Scaffold widget’ı, bir AppBar ve bir body widget’ı içerir. AppBar özelliği Scaffold’ın üst kısmında yer alır.

Aşağıdaki kod örneği, AppBar’ı bir Scaffold widget’ı içinde nasıl kullanacağınızı gösterir:

import 'package:flutter/material.dart';

void main() => runApp(MyApp());

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'AppBar Örneği',
      home: Scaffold(
        appBar: AppBar(
          title: Text('AppBar Örneği'),
        ),
        body: Center(
          child: Text('Merhaba Dünya!'),
        ),
      ),
    );
  }
}

Yukarıdaki kod örneğinde, Scaffold widget’ı home özelliği ile tanımlanır. AppBar widget’ı, appBar özelliği ile tanımlanır. AppBar özelliği, title özelliği ile birlikte kullanılarak AppBar’ın başlığı ayarlanır.

AppBar Özellikleri

Flutter’daki AppBar, birçok özelliği içinde barındırır ve uygulama geliştiricilere uygulama tasarımında esneklik sağlar. Aşağıdaki bölümlerde, AppBar özelliklerinin birçoğu açıklanacaktır.

Başlık

AppBar’ın en önemli özelliklerinden biri başlığıdır. Başlık, AppBar’ın merkezinde yer alır ve uygulamanızın adını veya sayfa başlıklarını göstermek için kullanılabilir. Başlık, Text widget’ı ile tanımlanabilir.

AppBar(
  title: Text('Başlık'),
)

Arka Plan Rengi

AppBar’ın arka plan rengi backgroundColor özelliği ile belirlenebilir. Bu özellik, Color sınıfından bir nesne alır.

AppBar(
  backgroundColor: Colors.blue
)

İşlem Butonları

AppBar’a işlem butonları ekleyebilirsiniz. İşlem butonları, kullanıcının uygulama içindeki işlemleri gerçekleştirmesine yardımcı olur. İşlem butonları, actions özelliği ile eklenir ve bir IconButton veya PopupMenuButton widget’ı olabilir.

<pre class="wp-block-syntaxhighlighter-code">AppBar(
  actions: <Widget>[
    IconButton(
      icon: Icon(Icons.search),
      onPressed: () {},
    ),
    PopupMenuButton<String>(
      itemBuilder: (BuildContext context) {
        return <PopupMenuEntry<String>>[
          PopupMenuItem<String>(
            value: 'ayarlar',
            child: Text('Ayarlar'),
          ),
          PopupMenuItem<String>(
            value: 'cikis',
            child: Text('Çıkış Yap'),
          ),
        ];
      },
    ),
  ],
)</pre>

Yukarıdaki örnekte, actions özelliği iki widget içerir: bir IconButton ve bir PopupMenuButton. IconButton, bir arama işlemi için kullanılırken, PopupMenuButton, uygulama ayarlarına veya çıkış yapma işlemine erişmek için kullanılır.

Önceki Sayfaya Dönme Butonu

AppBar’a geri gitmek için önceki sayfaya dönme butonu ekleyebilirsiniz. Önceki sayfaya dönme butonu, leading özelliği ile eklenir.

AppBar(
  leading: IconButton(
    icon: Icon(Icons.arrow_back),
    onPressed: () {
      Navigator.pop(context);
    },
  ),
)

Yukarıdaki örnekte, leading özelliği bir IconButton içerir ve kullanıcı önceki sayfaya dönmek için bu butonu kullanabilir.

Sonuç

Bu makalede, Flutter’da AppBar özelliğinin nasıl kullanılacağı, önemi ve bazı özellikleri hakkında bilgi verildi. AppBar özelliği, kullanıcı arayüzünde birçok özelliği içinde barındırır ve uygulama tasarımında esneklik sağlar. AppBar, uygulama geliştiricilerin uygulama tasarımlarını zenginleştirmelerine yardımcı olur ve uygulama kullanıcılarına daha iyi bir deneyim sunar.

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