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.

Image for post

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.


What's Your Reaction?

hate hate
0
hate
fail fail
0
fail
fun fun
0
fun
geeky geeky
0
geeky
love love
0
love
lol lol
0
lol
omg omg
0
omg
win win
0
win
Murat Bilginer
21 Şubat 1992 Doğumlu. Endüstri Mühendisi olarak Lisansını 2016 yılında tamamlamıştır. Industryolog Akademi - NGenius oluşumlarının kurucusudur. Şu anda kendi şirketi Brainy Tech ile hem Yazılım Hizmetleri Sunmakta Hem de Online Eğitimler Vermektedir.