Flutter 0’dan Mobil Uygulama Geliştirme 29 – Scaffold Detaylı İnceleme 3 BottomNavigationBar


Merhabalar.

Scaffold’un özelliklerini incelemeye devam ediyoruz.

Hiçbir uygulama yoktur ki birkaç sayfadan oluşmasın. Bu sayfa geçişlerini sayfanın en altında oluşturulacak butonlarla geçiş yapabiliriz.

İşte bunu yapabilmeyi sağlayacak olan Scaffold özelliği BottomNavigationBar.

Bottom Navigation Bar Flutter ile bizlere sunulan bir menü çeşididir. Bottom Navigation Bar’ı diğer menü çeşitlerinden ayıran özellik ise altta olmasıdır. Eğer uygulamamızda 3–4 ana sayfa var ve uygulama bu sayfalar arasında işlem görüyorsa kullanmamız harika olacaktır. Fakat çok daha sayıda sayfamız varsa Bottom Navigation Bar yerine Drawer Menu kullanmak çok daha iyidir.

Aşağıda gördüğünüz menu bir BottomNavigationBar ile yapılmıştır.

Biz de şimdi adım adım nasıl yapıldığına bakacağız.

Bu arada burada bu Bar’ın oluşturulabilmesi için tek bir metod ve yöntem yoktur. Ben bir tanesini göstermeye çalışacağım. Değişik örnekleri lütfen inceleyerek farklı tasarımlar ve yapma yöntemlerini görünüz.

Henüz butonlara tıklanarak ilgili sayfalara yönlendirme işlemini görmediğimiz için buna girmeden sadece butonları nasıl oluşturabileceğimizi göstermeye çalışacağım.

Yapmak istediğim şey çok basit aslında. Uygulamanın tabanına bir Container koyacağım ve yan yana butonlar koyacağım içinde bunun içine bir Row koyacağım. Sonrasında yan yana 4 IconButton koyacağım.

İlk halini bir yapalım.

Burada önemli olan bottomNavigationBar’ın aldığı widget. BottomAppBar widgetını verdik ve bize sağladığı özelliklerden faydalandık.

import 'package:flutter/material.dart';

void main() {
  runApp(MaterialApp(
    debugShowCheckedModeBanner: false, // Debug modda şeriti kaldırır.
    title: "Brainy Tech", // MaterialApp'ın Title'dır.
    home: Scaffold(
        appBar: AppBar(
          title: Text("Brainy Tech"),
          backgroundColor: Colors.blue,
          elevation: 12,
          toolbarHeight: 100,
          centerTitle: true,
        ),
        bottomNavigationBar: BottomAppBar(
          child: Container(
            color: Colors.blueAccent,
            alignment: Alignment.bottomCenter,
            height: 60,
            

            child: Row(
              mainAxisAlignment: MainAxisAlignment.spaceAround,
              crossAxisAlignment: CrossAxisAlignment.stretch,

              children: [
                IconButton(icon: Icon(Icons.home, color: Colors.white,), onPressed:
                null),
                IconButton(icon: Icon(Icons.last_page, color: Colors.white,), onPressed: null),
                IconButton(icon: Icon(Icons.list, color: Colors.white,), onPressed: null),
                IconButton(icon: Icon(Icons.contact_phone, color: Colors.white,), onPressed: null),
              ],

            ),

          ),

        )),
  ));
}
Container(
            color: Colors.blueAccent,
            alignment: Alignment.bottomCenter,
            height: 60,
            child:
)        

Container’a bir yükseklik verdik, renk verdik. Ve en önemlisi. aligment vererek tabana yaslanmasını sağladık.

Daha sonra child özelliğine bir Row widget atadık.

İlk işlemlerimiz sonrası BottomBar’ımız oluştu. İlerde bunlara tıklanabilir özellikler vereceğiz ve tıklandığında ilgili sayfalara gitmesini sağlayacağız.

Şimdi biraz daha özelleştirelim.

import 'package:flutter/material.dart';

void main() {
  runApp(MaterialApp(
    debugShowCheckedModeBanner: false, // Debug modda şeriti kaldırır.
    title: "Brainy Tech", // MaterialApp'ın Title'dır.
    home: Scaffold(
        appBar: AppBar(
          title: Text("Brainy Tech"),
          backgroundColor: Colors.blue,
          elevation: 12,
          toolbarHeight: 100,
          centerTitle: true,
        ),
        bottomNavigationBar: BottomAppBar(
          elevation: 20,
          child: Container(
            alignment: Alignment.bottomCenter,
            height: 60,
            decoration: BoxDecoration(
              borderRadius: BorderRadius.vertical(top: Radius.circular(40)),
              color: Colors.blueAccent,
            ),

            child: Row(
              mainAxisAlignment: MainAxisAlignment.spaceAround,
              crossAxisAlignment: CrossAxisAlignment.stretch,

              children: [
                IconButton(icon: Icon(Icons.home, color: Colors.white,), onPressed:
                null),
                IconButton(icon: Icon(Icons.last_page, color: Colors.white,), onPressed: null),
                IconButton(icon: Icon(Icons.list, color: Colors.white,), onPressed: null),
                IconButton(icon: Icon(Icons.contact_phone, color: Colors.white,), onPressed: null),
              ],

            ),

          ),

        )),
  ));
}
decoration: BoxDecoration(
              borderRadius: BorderRadius.vertical(top: Radius.circular(40)),
              color: Colors.blueAccent,
            ),

Container’ın border’ına üstten güzel bir radius vererek tatlı bir tasarım elde ettik.

Burada önemli bir konu var. Decoration özelliğinde color değeri vermelisiniz ve Container’ın kendi color değeri artık hata verecektir. O yüzden onu silmelisiniz.

Bottom bar bu şekilde oluşturulur ve kullanılabilir.

Bir sonraki yazımda görüşmek üzere.

Exit mobile version