Flutter’da Alt Gezinme Çubuğu (Bottom Navigation Bar) Nasıl Oluşturulur?

Bu yazı dil eğitimi üzerine pratik yapmaya olanak sağlayan projemde kullandığım kütüphaneler ve oluşturduğum yapıları yayınladığım bir seriden bir parçadır. Bu yazıda, Flutter uygulamalarında alt gezinme çubuğunun nasıl oluşturulacağını ve kullanılacağını öğreneceğiz. Alt gezinme çubuğu, farklı sayfalar veya sekmeler arasında gezinme işlevselliği eklemenin popüler bir yoludur. Aşağıda, alt gezinme çubuğunu oluşturmak ve özelleştirmek için adım adım nasıl ilerleyeceğinizi göstereceğim Eğer bu yazı ilginizi çekerse, diğer yazılarıma da göz atmayı unutmayın.

• Uygulamayı incelemek için: GooglePlay
• Kaynak kodlarına göz atmak için: Github
• Diğer yazılarıma göz atmak için: MediumProfile

1. Temel Alt Gezinme Çubuğu Oluşturma

• Basit bir alt gezinme çubuğunun nasıl oluşturulduğu ve kullanıldığı.

class _BottomBarPageState extends State<BottomBarPage> {
  int _currentIndex = 0;
  final List<Widget> _pages = [
    SaveWordPage(),
    WordListPage(),
    WordQuestionPage(),
    RandomQuestionPage(),
  ];

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        body: _pages[_currentIndex],
        bottomNavigationBar: BottomNavigationBar(
          currentIndex: _currentIndex,
          onTap: (index) {
            setState(() {
              _currentIndex = index;
            });
          },
          items: [
            BottomNavigationBarItem(
              icon: Icon(Icons.home),
              label: 'Kaydet',
            ),
            BottomNavigationBarItem(
              icon: Icon(Icons.list),
              label: 'Kelime Listesi',
            ),
            BottomNavigationBarItem(
              icon: Icon(Icons.question_answer),
              label: 'Kelime Sorusu',
            ),
            BottomNavigationBarItem(
              icon: Icon(Icons.shuffle),
              label: 'Rastgele Soru',
            ),
          ],
        ),
      ),
    );
  }
}

2. Alt Gezinme Çubuğunu Özelleştirme

• Alt gezinme çubuğunun tasarımını ve davranışını nasıl özelleştireceğiniz.

bottomNavigationBar: BottomNavigationBar(
  currentIndex: _currentIndex,
  onTap: (index) {
    setState(() {
      _currentIndex = index;
    });
  },
  items: [
    BottomNavigationBarItem(
      icon: Icon(Icons.home),
      label: 'Kaydet',
      backgroundColor: Colors.blue,
    ),
    BottomNavigationBarItem(
      icon: Icon(Icons.list),
      label: 'Kelime Listesi',
      backgroundColor: Colors.green,
    ),
    // Diğer özelleştirmeler...
  ],
),

3. Sayfalar Arası Geçiş

• Alt gezinme çubuğu sekmeleri arasında nasıl geçiş yapılacağı.

void _onTabTapped(int index) {
  setState(() {
    _currentIndex = index;
  });
}

4. Alt Gezinme Çubuğu İpuçları

• Alt gezinme çubuğunu kullanırken dikkate almanız gereken bazı önemli ipuçları.

Bu yazıda, Flutter uygulamalarında alt gezinme çubuğu oluşturmanın temellerini öğrendik. Alt gezinme çubuğunu kullanarak uygulamanızdaki farklı sayfalar veya sekmeler arasında gezinme işlevselliği ekleyebilirsiniz. Alt gezinme çubuğunu özelleştirerek uygulamanızın tasarımını geliştirmeniz mümkün.