Posts

Assalammualaikum warahmatullahi wabarakatu sobat Uda …

Artikel kali ini akan membahas gimana caranya membuat tabbar di flutter. So, langsung aja yaa. Check It Out !!!!

• Disini kita membutuhkan 3 class yaitu main.dart, page_satu.dart dan page_dua.dart.
• pada main.dart, arahkan kepada class utama yaitu TabFlutter

void main() => runApp(MaterialApp(
  home: TabFlutter(),
  debugShowCheckedModeBanner: false,
));

• Pada class TabFlutter buat dengan menggunakan Stateful. kemudian isikan seperti sourcecode berikut

import 'package:flutter/material.dart';
import 'package:coba_apps/page_satu.dart' as tabpagesatu;
import 'package:coba_apps/page_dua.dart' as tabpagedua;


class TabFlutter extends StatefulWidget {
  @override
  _TabFlutterState createState() => _TabFlutterState();
}

class _TabFlutterState extends State<TabFlutter>  with SingleTickerProviderStateMixin{
  TabController controller;

  @override
  void initState() {
    // TODO: implement initState
    super.initState();
    controller = TabController(vsync: this, length: 2);
  }

  @override
  void dispose() {
    // TODO: implement dispose
    controller.dispose();
    super.dispose();
  }

  @override
  Widget build(BuildContext context) {
    return new Scaffold(
      //create appBar
      appBar: new AppBar(
        //warna background
        backgroundColor: Colors.lightGreen,
        title: new Text("Tab Bar"),
        bottom: TabBar(
          controller: controller,
          tabs: <Widget>[
            Tab(
              text: 'Page 1',
            ),
            Tab(
              text: 'Page 2',
            ),
          ],
        ),
      ),

      bottomNavigationBar: Material(
        color: Colors.white,
        child: TabBar(
          controller: controller,
          tabs: <Widget>[
            GestureDetector(
                onTap: () {},
                child: Tab(
                  icon: Icon(
                    Icons.home,
                    color: Colors.green,
                  ),
                )),
            Tab(
                child: Icon(
                  Icons.person,
                  color: Colors.black,
                ),
            ),
          ],
        ),
      ),
      body: TabBarView(
        controller: controller,
        children: <Widget>[
          tabpagesatu.PageSatu(controller),
          tabpagedua.PageDua(),
        ],
      ),
    );
  }
}

• kemudian buat class dengan nama page_satu.dart. kemudian ikuti sourcecode berikut

import 'package:flutter/material.dart';

class PageSatu extends StatelessWidget {
  TabController controller;

  PageSatu(this.controller);

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: Center(
        child: Text('HALAMAN SATU'),
      ),
    );
  }
}

• kemudian buat class dengan nama page_dua.dart. kemudian ikuti sourcecode berikut

import 'package:flutter/material.dart';

class PageDua extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: Center(
        child: Text('HALAMAN DUA'),
      ),
    );
  }
}

• Berikut tampilan tabbar yang akan muncul