Flutter BottomNavigationBar Widgeti Kullanımı

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

Flutter, kullanıcılara mobil uygulamalar geliştirmek için çeşitli araçlar sağlar. Bunlar arasında, uygulamanın alt kısmında bulunan navigasyon çubuğunu içeren BottomNavigationBar Widgeti de bulunur. Bu Widget, kullanıcılara uygulamada farklı sayfalar arasında gezinmelerine izin verir. Bu makalede, Flutter’da BottomNavigationBar Widgeti’nin nasıl kullanılacağına dair özellikleri ve kod örnekleri ile birlikte anlatılmaktadır.

BottomNavigationBar Widgeti

Flutter’da BottomNavigationBar Widgeti, sayfa yönlendirmesi yapabilen ve genellikle uygulamanın alt kısmında bulunan bir navigasyon çubuğudur. Bu Widget, uygulama tasarımınızı daha kullanıcı dostu hale getirir ve sayfalar arasında geçiş yapmayı kolaylaştırır.

BottomNavigationBar Özellikleri

Flutter’da BottomNavigationBar Widgeti, aşağıdaki özelliklere sahiptir:

• items: BottomNavigationBar’ın içinde görüntülenecek öğelerin listesi.
• onTap: Kullanıcının navigasyon çubuğundaki öğelerden birine tıkladığında çağrılacak işlev.
• currentIndex: Seçili öğenin dizini.
• backgroundColor: BottomNavigationBar’ın arka plan rengi.
• selectedItemColor: Seçili öğenin rengi.
• unselectedItemColor: Seçili olmayan öğelerin rengi.
• elevation: BottomNavigationBar’ın yüksekliği.

BottomNavigationBar Örneği

Aşağıdaki kod örneği, Flutter’da BottomNavigationBar Widgeti’nin kullanımını göstermektedir.

import 'package:flutter/material.dart';

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter BottomNavigationBar Demo',
      home: MyHomePage(),
    );
  }
}

class MyHomePage extends StatefulWidget {
  @override
  _MyHomePageState createState() => _MyHomePageState();
}

class _MyHomePageState extends State {
  int _selectedIndex = 0;
  static const List _widgetOptions = [
    Text('Ana Sayfa'),
    Text('Arama'),
    Text('Profil')
  ];

  void _onItemTapped(int index) {
    setState(() =>_selectedIndex = index);
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: const Text('Flutter BottomNavigationBar Demo')),
      body: Center(child: _widgetOptions.elementAt(_selectedIndex)),
      bottomNavigationBar: BottomNavigationBar(
        items: const [
          BottomNavigationBarItem(
            icon: Icon(Icons.home),
            label: 'Ana Sayfa',
          ),
          BottomNavigationBarItem(
            icon: Icon(Icons.search),
            label: 'Arama',
          ),
          BottomNavigationBarItem(
            icon: Icon(Icons.person),
            label: 'Profil',
          ),
        ],
        currentIndex: _selectedIndex,
        selectedItemColor: Colors.blue,
        onTap: _onItemTapped,
      ),
    );
  }
}

Yukarıdaki kod örneği, üç farklı sayfa arasında gezinmek için bir BottomNavigationBar Widgeti oluşturur. Her sayfa, sadece bir metin widget’ı içerir. _selectedIndex değişkeni, seçili olan öğenin dizinini tutar ve _onItemTapped işlevi, kullanıcının navigasyon çubuğundaki öğelerden birine tıkladığında çağrılır.

Sonuç

Flutter’da BottomNavigationBar Widgeti, mobil uygulamalarınızda kullanıcılara gezinme işlevselliği sağlar. Bu makalede, BottomNavigationBar Widgeti’nin özellikleri ve kullanımı ile birlikte kod örnekleri sunulmuştur. Bu örneklerden yola çıkarak, Flutter’da BottomNavigationBar Widgeti’ni projelerinizde kullanabilirsiniz.

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