Halo lagi temen-temen coder! 🙋
Rani mau bahas bagaimana cara membuat tampilan tab bar pada flutter. Dan kali ini Rani mau move on, mau buat folder/project baru aja. Aplikasi ini diberi nama tab_bar.
Setelah dibuat, di main.dart kita kosongkan terlebih dahulu.
Kemudian seperti biasa kita import flutter material dan membuat void main.
import 'package:flutter/material.dart';
void main() {
runApp(new MaterialApp(
title: "Tab Bar",
home: HomePage(),
));
}
Pada void main kita panggil MaterialApp, beri judul "Tab Bar" dan HomePage() sebagai halaman/prosedur awal.
Bagian HomePage() pasti awalnya akan merah, itu karena kita emang belum bikin widget nya. Jadi yuk mari kita bikin.
Class HomePage() ini kita buat sebagai StateFullWidget, jika kita menggunakan Visual Studio code tinggal ketil stf lalu enter dia akan generate code otomatis dan muncul kursor yang banyak di beberapa tempat, langsung saja kita ketikan HomePage. Seperti gambar di bawah.
- Pada _HomePageState kita perlu menambahkan with SingleTickerProviderStateMixin.
- Kita juga perlu menambahkan TabController lengkap dengan initial dan dispose void.
- Pada TabController kita set length = 4, untuk membuat 4 buah tab.
- Lalu pada Widget Build kita ganti nilai yang dikembalikan menjadi Scaffold, baru setelah itu kita tambahkan dan setting appBar. Tab ini merupakan bagian appBar yang akan disimpan di bagian bottom.
Kode-nya sebagai berikut:
class _HomePageState extends State<HomePage> with SingleTickerProviderStateMixin {
late TabController controller;
@override
void initState() {
controller = new TabController(length: 4, vsync: this);
super.initState();
}
@override
void dispose() {
controller.dispose();
super.dispose();
}
Widget build(BuildContext context) {
return Scaffold(
appBar: new AppBar(
backgroundColor: Colors.green[200],
title: new Text("Foods & Beverages"),
bottom: new TabBar(controller: controller, tabs: <Widget>[
new Tab(
icon: new Icon(Icons.local_pizza),
),
new Tab(
icon: new Icon(Icons.cake),
),
new Tab(
icon: new Icon(Icons.coffee),
),
new Tab(
icon: new Icon(Icons.emoji_food_beverage),
),
])),
);
}
}
Saat run debug hasilnya akan sebagai berikut:
Setiap tab biasanya memuat konten yang berbeda, karena itu mari kita buat 4 buah halaman untuk di tampiklan. Kita buat 4 buah file baru:
- page_cake.dart
- page_coffee.dart
- page_pizza.dart
- page_tea.dart
Tinggal buka Explorer dengan klik icon explorer di kiri atas VS Code.
Cari folder lib yang memuat file main.dart, klik kanan kemudian pilih
New File. Kemudian beri nama dengan ekstensi file .dart.
Lalu tulis code di masing-masing page tersebut:
page_pizza.dart
import 'package:flutter/material.dart';
class Pizza extends StatelessWidget {
@override
Widget build(BuildContext context) {
return Container(
child: new Center(
child: new Column(
children: <Widget>[
new Text("Pizza", style: new TextStyle(fontSize: 32.0),),
new Padding(padding: new EdgeInsets.all(20.0),),
new Icon(Icons.local_pizza, size: 100.0,)
],
),
),
);
}
}
page_cake.dart
import 'package:flutter/material.dart';
class Cake extends StatelessWidget {
@override
Widget build(BuildContext context) {
return Container(
child: new Center(
child: new Column(
children: <Widget>[
new Text("Cake", style: new TextStyle(fontSize: 32.0),),
new Padding(padding: new EdgeInsets.all(20.0),),
new Icon(Icons.cake, size: 100.0,)
],
),
),
);
}
}
page_coffee.dart
import 'package:flutter/material.dart';
class Coffee extends StatelessWidget {
@override
Widget build(BuildContext context) {
return Container(
child: new Center(
child: new Column(
children: <Widget>[
new Text("Coffee", style: new TextStyle(fontSize: 32.0),),
new Padding(padding: new EdgeInsets.all(20.0),),
new Icon(Icons.coffee, size: 100.0,)
],
),
),
);
}
}
page_tea.dart
import 'package:flutter/material.dart';
class Tea extends StatelessWidget {
@override
Widget build(BuildContext context) {
return Container(
child: new Center(
child: new Column(
children: <Widget>[
new Text("Tea", style: new TextStyle(fontSize: 32.0),),
new Padding(padding: new EdgeInsets.all(20.0),),
new Icon(Icons.emoji_food_beverage, size: 100.0,)
],
),
),
);
}
}
Kembali ke main.dart, kita import keempat file tadi di bagian atas dibawah import package flutter material.
import 'package:flutter/material.dart';
import './page_pizza.dart' as pizza;
import './page_cake.dart' as cake;
import './page_coffee.dart' as coffee;
import './page_tea.dart' as tea;
Terakhir lengkapi widget build dengan bagian body:
Widget build(BuildContext context) {
return Scaffold(
appBar: new AppBar(
backgroundColor: Colors.green[200],
title: new Text("Foods & Beverages"),
bottom: new TabBar(controller: controller, tabs: <Widget>[
new Tab(
icon: new Icon(Icons.local_pizza),
),
new Tab(
icon: new Icon(Icons.cake),
),
new Tab(
icon: new Icon(Icons.coffee),
),
new Tab(
icon: new Icon(Icons.emoji_food_beverage),
),
])),
body: new TabBarView(controller: controller, children: <Widget>[
new pizza.Pizza(),
new cake.Cake(),
new coffee.Coffee(),
new tea.Tea(),
]),
);
}
Penamaan dan pemanggilan nama page dan widget untuk ditampilkan dalam TabBarView dijelaskan pada gambar di bawah ini. "pizza" dengan huruf kecil merupakan nama alias pada baris import sementara "Pizza" dengan hurup besar merupakan nama class yang kita buat di file page_pizza.dart.
Hasil run debug:
0 Comments