Navigating Screen Dengan DefaultTabController

Pada modul ini akan dibahas penggunaan DefaultTabController untuk navigasi. Untuk itu kita akan buat 2 file baru, yaitu :

• favorite_scr.dart, isi tab yang akan menampilkan resep favorite.
• resept_tab_scr.dart sebagai screen yang akan menyimpan DefaultTabController yang akan menampilkan isi tab dari favorite_scr.dart dan category_scr.dart.

favorite_scr.dart untuk keperluan tutorial ini hanya akan menampilkan statis text saja.

//favorite_scr.dart

import 'package:flutter/material.dart';

class FavoriteScr extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Center(
      child: Text('Fav goes here'),
    );
  }
}

Pada resept_tab_scr.dart, widgetDefaultTabController adalah tab controller. Memiliki property

• length, untuk mengatur jumlah tab.
• child, yang diisi dengan tab child.

Agar aplikasi tetap memiliki appbar, maka digunakan Scaffold. Body dari Scaffold akan diisi dengan tab child.

Text dan Icon pada masing-masing tab bar dapat kita atur.

bottom: TabBar(
  tabs: <Widget>[
    Tab(
      icon: Icon(Icons.category),
      text: 'Category',
    ),
    Tab(
      icon: Icon(Icons.favorite),
      text: 'Favorite',
    ),
  ],
),

Isi tab didefinisikan dengan widget TabBarView. Child pertama akan diisi dengan widget CategoryChar yang kita buat pada tutorial sebelumnya. Dan child kedua akan diisi dengan FavoriteScr yang baru kita buat pada tutorial ini.

body: TabBarView(children: <Widget>[
  CategoriesScr(),
  FavoriteScr(),
]),

//resep_tab_scr.dart

import 'package:flutter/material.dart';

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

class ResepTabScr extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return DefaultTabController(
      length: 2,
      child: Scaffold(
        appBar: AppBar(
          title: Text('Buku Resep'),
          bottom: TabBar(
            tabs: <Widget>[
              Tab(
                icon: Icon(Icons.category),
                text: 'Category',
              ),
              Tab(
                icon: Icon(Icons.favorite),
                text: 'Favorite',
              ),
            ],
          ),
        ),
        body: TabBarView(children: <Widget>[
          CategoriesScr(),
          FavoriteScr(),
        ]),
      ),
    );
  }
}