Navigating Screen Dengan BottomNavigationBar

Alternative penggunaan tab adalah dengan menggunakan BottomNavigationBar, dimana tab akan ditempatkan di bawah screen.

BottomNavigationBar sedikit lebih kompleks, harus menggunakan StateFullWidget dan ada sedikit coding untuk menampilkan content dari tab saat tab menu ditekan.

Property onTap akan diassign dengan fungsi yang akan mengatur variable index page yang terpilih yang akan diassign ke property currentIndex.

Property lainnya seperti backgroundColor dan lainnya adalah untuk mengatur styling dari tab selector. Silakan bereksperimen.

bottomNavigationBar: BottomNavigationBar(
  onTap: _pageonTap,
  backgroundColor: Theme.of(context).primaryColor,
  unselectedItemColor: Colors.white38,
  selectedItemColor: Colors.white,
  currentIndex: _activePage,
  items: [
    BottomNavigationBarItem(
      icon: Icon(Icons.category),
      title: Text('Category'),
    ),
    BottomNavigationBarItem(
      icon: Icon(Icons.favorite),
      title: Text('Favorite'),
    ),
  ],
),

Untuk handling saat tab dipilih, kita perlu mendefinisikan beberapa variable dan membuat fungsi _pageonTap.

Variable _pages akan berisi page yang akan ditampilkan dan title. Sementara _activepage bertujuan sebagai penunjuk page yang aktif.

final List<Map<String, Object>> _pages = [
  {'page': CategoriesScr(), 'title': 'Category'},
  {'page': FavoriteScr(), 'title': 'Favorite'}
];

int _activePage = 0;

void _pageonTap(int idx) {
  setState(() {
    _activePage = idx;
  });
}

Berikut isi dari resep_tab_scr.dart versi BottomNavigationBar

import 'package:flutter/material.dart';

import './categories_scr.dart';
import './favorite_scr.dart';

class ResepTabScr extends StatefulWidget {
  @override
  _ResepTabScrState createState() => _ResepTabScrState();
}

class _ResepTabScrState extends State<ResepTabScr> {
  final List<Map<String, Object>> _pages = [
    {'page': CategoriesScr(), 'title': 'Category'},
    {'page': FavoriteScr(), 'title': 'Favorite'}
  ];
  int _activePage = 0;

  void _pageonTap(int idx) {
    setState(() {
      _activePage = idx;
    });
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text(_pages[_activePage]['title']),
      ),
      body: _pages[_activePage]['page'],
      bottomNavigationBar: BottomNavigationBar(
        onTap: _pageonTap,
        backgroundColor: Theme.of(context).primaryColor,
        unselectedItemColor: Colors.white38,
        selectedItemColor: Colors.white,
        currentIndex: _activePage,
        items: [
          BottomNavigationBarItem(
            icon: Icon(Icons.category),
            title: Text('Category'),
          ),
          BottomNavigationBarItem(
            icon: Icon(Icons.favorite),
            title: Text('Favorite'),
          ),
        ],
      ),
    );
  }
}