UDACODING

Posts

Membuat TabBar di Flutter

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
image-27 Membuat TabBar di Flutter

Leave a Reply :

* Your email address will not be published.