Widget Günlükleri 5 - İleri seviye AppBar kullanımı -

Geçtiğimiz hafta Flutter’da Navigator üzerine konuşmuştuk. Widget günlüklerinde, şubatın artık gününde bir yazıyla karşınızdayım. Yazımızın bu konusunda Scaffold içerisinde bulunan önemli elementlerden biri olan AppBar’ı inceleyeceğim!

Genellikle eğitim yazılarında AppBar içerisine yalnızca ‘title’ girilir fakat AppBar bunlardan daha fazlasına sahiptir ve AppBar üzerinde ‘actions’ dahi tanımlayabilirsiniz. AppBar, ‘title’, ‘actions’, ‘leading’ ve ‘bottom’ niteliklerine sahiptir.

‘title’ yalnızca bir Text widget’ı içerisine almaz. Bildiğiniz üzere Flutter’da her UI elementi bir Widget’tır. Yani ‘title’ içerisine istediğiniz şekilde Widget yerleştirebilirsiniz. Bunlar buton, arama çubuğu, icon ve daha fazlası olabilir.

AppBar içerisinde elementlerin yerleşimi önemlidir. Adından da anlayacağınız üzere ‘leading’ en önce gelir. ‘title ise ortada bulunan elementtir. Ardından en son da ‘actions’ gelir. Bu kısma profile kısayoldan erişim için yönlendirici bir, tıklanabilir icon konulabilir örneğin.

Peki nedir bu ‘bottom’? Bu Widget, Flutter’da TabBar oluşturmanızı sağlar ve yukarıda saydığım tüm elementlerin altında yer alır. Bu TabBar ile birlikte farklı veri girişleri yapılan sayfalar arasında yumuşak geçişler yapılmasını sağlayabilirsiniz. TabBar kullanımının ucu bucağı yok! Çünkü hepsi birer Widget. 🙂 TabBar ile tab üzerindeki iconları, yazıları ayarlarken, TabBarView ile sayfalar içerisinde gösterilecek içeriği düzenleyebilirisiniz. Burada her sayfa için tek tek özel sayfa oluşturmaktansa, sayfalara icon eklemeyi uygun gördüm. Lakin siz, kendi yapacağınız sayfaların state’lerini burada çağırarak sayfada görülmesini sağlayabilirsiniz.

Bu kadar konuşma yeter, bu konuda yaptığım örnek kodu aşağıda paylaşıyorum.

import 'package:flutter/material.dart';

class HomePage extends StatefulWidget {
  @override
  _HomePageState createState() => _HomePageState();
}
class _HomePageState extends State<HomePage> {
  Widget appBarTitle = Text('Sample App');
  @override
  Widget build(BuildContext context) {
    return DefaultTabController(
      length: 3,
      child: Scaffold(
        appBar: AppBar(
            title: appBarTitle,
            leading: Icon(Icons.access_time),
            actions: <Widget>[
              Icon(Icons.account_balance),
              Container(
                child: Text('Actions'),
                alignment: Alignment.centerLeft,
              )
            ],
            bottom: TabBar(
              tabs: <Widget>[
                Tab(icon: Icon(Icons.backup)),
                Tab(icon: Icon(Icons.zoom_out_map)),
                Tab(
                  icon: Icon(Icons.email),
                )
              ],
            )),
        body: TabBarView(
          children: [
            Icon(Icons.backup),
            Icon(Icons.zoom_out_map),
            Icon(Icons.email),
          ],
        ),
      ),
    );
  }
}

Uygulama içerisinden örnek bir ekran görüntüsü

Bir sonraki yazıda hangi konuyu işlerim bilinmez fakat siz yine de takipte kalın! 🙂

Widget Günlükleri 5 – İleri seviye AppBar kullanımı

One Comment