Home Android Using TabBar Flutter

Using TabBar Flutter

0
Using TabBar Flutter

Halo teman – teman,
kali ini kita akan membahas bagaimana caranya untuk menggunakan TabBar di FLutter. Penggunaan TabBar sendiri tidaklah susah,

Adapun file yang kita perlukan seperti berikut :

File page_help.dart ini merupakan file yang akan menampung Tabbar itu sendiri dan tampilan Tabbar (widget TabbarView).

Berikut code untuk page_help.dart :

class PageHelp extends StatefulWidget {

  @override
  _PageHelpState createState() => _PageHelpState();
}

class _PageHelpState extends State<PageHelp> with SingleTickerProviderStateMixin {
  TabController? tabController;

  @override
  void initState() {
    tabController = TabController(length: 3, vsync: this);
    super.initState();
  }

  @override
  void dispose() {
    tabController?.dispose();
    super.dispose();
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      backgroundColor: Color(0xffFBFBFB),
      appBar: AppBar(
        elevation: 0,
        backgroundColor: Colors.white,
        automaticallyImplyLeading: false,
        title: Row(
          mainAxisAlignment: MainAxisAlignment.center,
          children: [
            Icon(Icons.help, color: Color(0xff7D7D7D),size: 35,),
            SizedBox(width: 9),
            Text(
              'Help',
              style: TextStyle(color: Colors.black),
            ),
          ],
        ),
      ),
      body: Column(
        children: [
          Container(
            color: Colors.white,
            child: Expanded(
              child: TabBar(
                controller: tabController,
                labelColor: Colors.amber,
                unselectedLabelColor: Colors.black,
                indicatorColor: Colors.amber,
                indicatorPadding: EdgeInsets.symmetric(horizontal: 10),
                labelStyle: TextStyle(
                  fontSize: 14,
                  fontFamily: 'Roboto',
                ),
                tabs: [
                  Tab(
                    child: Text('About'),
                  ),
                  Tab(
                    child: Text("Training"),
                  ),
                  Tab(
                    child: Text("What's New"),
                  ),
                ],
              ),
            ),
          ),
          Container(
            child: Expanded(
              child: TabBarView(
                controller: tabController,
                children: [
                  PageHelpAbout(),
                  PageHelpTraining(),
                  PageHelpWhatsNew(),
                ],
              ),
            ),
          )
        ],
      ),
    );
  }
}

Pada widget TabBar kita juga bisa menambahkan physics: NeverScrollableScrollPhysics() agar tabbar tidak dapat di swipe kiri – kanan, melainkan harus dengan mengklik Tabbar nya sekaligus. Selain itu, kita juga dapat menambahkan isScrollable: true agar TabBar dapat di swipe kiri – kanan jika jumlah tabbar banyak.

Berikut untuk code page_help_about.dart :

import 'package:flutter/material.dart';

class PageHelpAbout extends StatefulWidget {
  const PageHelpAbout({Key? key}) : super(key: key);

  @override
  _PageHelpAboutState createState() => _PageHelpAboutState();
}

class _PageHelpAboutState extends State<PageHelpAbout> {
  @override
  Widget build(BuildContext context) {
    return Container(
      color: Colors.green,
      child: Center(child: Text('About'),),
    );
  }
}

untuk code page_help_training dan page_help_whatsnew sama saja dengan code di atas, yang terpenting yaitu karena kita hanya menampilkan view dari tabbar yang kita miliki, dimana tabbar sendiri sudah berada dalam Scaffold, sehingga file view dari TabBarView ini langsung memakai widget seperti Column atau Container tanpa harus menambahkan Scaffold lagi.

Berikut hasil running program saat dijalankan :