0

0

0

share


#dart#flutter#TAB-BAR#bottombar
0 Reaksi

0 Komentar

Membuat Tab Bar di Flutter

Profile
sheli indriani

5 September 2019

Membuat Tab Bar di Flutter

Pada pembahasan kali ini, Penulis akan membahas bagaimana cara membuat Tab Bar dengan beberapa halaman. Kali ini Penulis membuat empat halaman untuk icon telepon, shopping, email dan music.

Langsung saja buka aplikasi Visual Studio Code dan buat project baru dengan nama apptabbar. Kemudian masukkan source code di bawah ini ke dalam file main.dart project flutter yang sudah Anda dibuat.

import 'package:flutter/material.dart'; void main(){ runApp(new MaterialApp( title: "Tampilan Tab Bar", home: new Home(), )); } class Home extends StatefulWidget { _HomeState createState() => _HomeState(); } class _HomeState extends State<Home> with SingleTickerProviderStateMixin { //create controller untuk tabBar TabController controller; void initState(){ controller = new TabController(vsync: this, length: 4); //tambahkan SingleTickerProviderStateMikin pada class _HomeState super.initState(); } void dispose(){ controller.dispose(); super.dispose(); } Widget build(BuildContext context) { return new Scaffold( //create appBar appBar: new AppBar( //warna background backgroundColor: Colors.lightGreen, //judul title: new Text("Tampilan Home "), //bottom bottom: new TabBar( controller: controller, tabs: <Widget>[ new Tab() ], ), ), ); } }

Selanjutnya buat file baru untuk source code halaman Tab Bar dari menu Home yang akan dibuat. Beri nama telepon.dart shopping.dart email.dart dan terakhir music.dart.

Setelah Anda selesai membuat file baru, silahkan masukan source code berikut ke dalam file telepon.dart :

import 'package:flutter/material.dart'; class Telepon extends StatelessWidget { Widget build(BuildContext context) { return new Container( child: new Center( child: Column( children: <Widget>[ new Padding(padding: new EdgeInsets.all(20.0),), new Padding(padding: new EdgeInsets.all(20.0),), new Icon(Icons.phone_android,size: 90.0, color: Colors.lightBlueAccent,), new Text("PHONE", style: new TextStyle(fontSize: 30.0, color: Colors.lightGreen),) ], ), ), ); } }

Masukkan juga source code di bawah ke dalam file shopping.dart :

import 'package:flutter/material.dart'; class Shopping extends StatelessWidget { Widget build(BuildContext context) { return new Container( child: new Center( child: Column( children: <Widget>[ new Padding(padding: new EdgeInsets.all(20.0),), new Padding(padding: new EdgeInsets.all(20.0),), new Icon(Icons.shopping_cart,size: 90.0,color: Colors.lightBlueAccent,), new Text("SHOP", style: new TextStyle(fontSize: 30.0, color: Colors.lightGreen),) ], ), ), ); } }

email.dart :

import 'package:flutter/material.dart'; class Email extends StatelessWidget { Widget build(BuildContext context) { return new Container( child: new Center( child: Column( children: <Widget>[ new Padding(padding: new EdgeInsets.all(20.0),), new Padding(padding: new EdgeInsets.all(20.0),), new Icon(Icons.email,size: 90.0, color: Colors.lightBlueAccent,), new Text("EMAIL", style: new TextStyle(fontSize: 30.0, color: Colors.lightGreen),) ], ), ), ); } }

music.dart :

import 'package:flutter/material.dart'; class Music extends StatelessWidget { Widget build(BuildContext context) { return new Container( child: new Center( child: Column( children: <Widget>[ new Padding(padding: new EdgeInsets.all(20.0),), new Padding(padding: new EdgeInsets.all(20.0),), new Icon(Icons.queue_music,size: 90.0, color: Colors.lightBlueAccent,), new Text("MUSIC", style: new TextStyle(fontSize: 30.0, color: Colors.lightGreen),) ], ), ), ); } }

Ketika Anda run aplikasi nya maka akan tampil error seperti gambar di bawah karena tab yang sedang dibuat belum selesai.

Image

Sekarang buka lagi file project main.dart, lalu masukkan source code seperti di bawah ini :

import 'package:flutter/material.dart'; void main(){ runApp(new MaterialApp( title: "Tampilan Tab Bar", home: new Home(), )); } class Home extends StatefulWidget { _HomeState createState() => _HomeState(); } class _HomeState extends State<Home> with SingleTickerProviderStateMixin { //create controller untuk tabBar TabController controller; void initState(){ controller = new TabController(vsync: this, length: 4); //tambahkan SingleTickerProviderStateMikin pada class _HomeState super.initState(); } void dispose(){ controller.dispose(); super.dispose(); } Widget build(BuildContext context) { return new Scaffold( //create appBar appBar: new AppBar( //warna background backgroundColor: Colors.lightGreen, //judul title: new Text("Tampilan Home "), //bottom bottom: new TabBar( controller: controller, //source code lanjutan tabs: <Widget>[ new Tab(icon: new Icon(Icons.email),text: "Email",), new Tab(icon: new Icon(Icons.queue_music),text: "Music",), new Tab(icon: new Icon(Icons.shopping_cart),text: "Shop",), new Tab(icon: new Icon(Icons.phone_android),text: "Phone",), ], ), ), ); } }

Setelah itu Anda run kembali aplikasi yang sedang dibuat tersebut maka sudah ada animasinya ketika di klik icon garis akan berpindah atau berjalan, maka tampilannya akan terlihat seperti video digambar ini:

Image

Selanjutnya tambahkan source code didalam file main.dartuntuk membuat tab view nya:

//buat body untuk tab viewnya body: new TabBarView( //controller untuk tab bar controller: controller, children: <Widget>[ //kemudian panggil halaman sesuai tab yang sudah dibuat

Setelah itu halaman-halaman yang sudah dibuat harus di-import terlebih dahulu ke dalam file main.dart.

import './email.dart' as email; import './music.dart' as music; import './shopping.dart' as shopping; import './telepon.dart' as telepon;

Kemudian kembali lagi ke tab bar view panggil halaman sesuai tab yang telah dibuat di dalam main.dart pada bagian atas.

//kemudian panggil halaman sesuai tab yang sudah dibuat new email.Email(), new music.Music(), new shopping.Shopping(), new telepon.Telepon()

Untuk detail source code pada main.dart akan terlihat seperti gambar di bawah ini :

import 'package:flutter/material.dart'; import './email.dart' as email; import './music.dart' as music; import './shopping.dart' as shopping; import './telepon.dart' as telepon; void main(){ runApp(new MaterialApp( title: "Tampilan Tab Bar", home: new Home(), )); } class Home extends StatefulWidget { _HomeState createState() => _HomeState(); } class _HomeState extends State<Home> with SingleTickerProviderStateMixin { //create controller untuk tabBar TabController controller; void initState(){ controller = new TabController(vsync: this, length: 4); //tambahkan SingleTickerProviderStateMikin pada class _HomeState super.initState(); } void dispose(){ controller.dispose(); super.dispose(); } Widget build(BuildContext context) { return new Scaffold( //create appBar appBar: new AppBar( //warna background backgroundColor: Colors.lightGreen, //judul title: new Text("Tampilan Home "), //bottom bottom: new TabBar( controller: controller, tabs: <Widget>[ new Tab(icon: new Icon(Icons.email),), new Tab(icon: new Icon(Icons.queue_music),), new Tab(icon: new Icon(Icons.shopping_cart),), new Tab(icon: new Icon(Icons.phone_android),), ], ), ), //source code lanjutan //buat body untuk tab viewnya body: new TabBarView( //controller untuk tab bar controller: controller, children: <Widget>[ //kemudian panggil halaman sesuai tab yang sudah dibuat new email.Email(), new music.Music(), new shopping.Shopping(), new telepon.Telepon() ], ), ); } }

Setelah selesai silahkan Anda run kembali aplikasi yang sedang dibuat, maka tampilannya akan seperti video dibawa ini, Anda dapat menekan tombol icon ataupun dapat menggesernya untuk berpindah ke halaman lain atau icon lain.

Image

Jika Anda ingin merubah warna icon gambar, tambahkan source code seperti dibawah ini untuk merubah warna icon-nya.

telepon.dart

new Icon(Icons.phone_android,size: 90.0, color: Colors.lightGreen,),

shopping.dart

new Icon(Icons.shopping_cart,size: 90.0,color: Colors.lightGreen,),

email.dart

new Icon(Icons.email,size: 90.0, color: Colors.lightGreen,),

music.dart

new Icon(Icons.queue_music,size: 90.0, color: Colors.lightGreen,),

Jika ingin merubah warna text pada widget-nya, tambahkan source code seperti gambar di bawah ini :

telepon.dart

new Text("PHONE", style: new TextStyle(fontSize: 30.0, color: Colors.lightBlue),),

shopping.dart

new Text("SHOP", style: new TextStyle(fontSize: 30.0, color: Colors.lightBlue),),

email.dart

new Text("EMAIL", style: new TextStyle(fontSize: 30.0, color: Colors.lightBlue),)

music.dart

new Text("MUSIC", style: new TextStyle(fontSize: 30.0, color: Colors.lightBlue),),

Silahkanan run kembali aplikasinya, Anda dapat menyesuaikan warna text, gambar dan lainnya hanya menambahkan color saja.

Image

Kemudian coba tambahkan text dibawah gambar yang ada di icon tab bar project aplikasi Anda, caranya tambahkan source code seperti dibawah ini didalam file main.dart.

new Tab(icon: new Icon(Icons.email),text: "Email",), new Tab(icon: new Icon(Icons.queue_music),text: "Music",), new Tab(icon: new Icon(Icons.shopping_cart),text: "Shop",), new Tab(icon: new Icon(Icons.phone_android),text: "Phone",),

Run kembali aplikasi dan akan terlihat seperti video berikut:

Image

Selanjutnya, Penulis akan membuat tab bar yang ada di bagian bawah. Tambahkan lagi source code di dalam file main.dart ke dalam body.

//untuk tab bar bagian bawah bottomNavigationBar: new Material( //warna samakan saja dengan tab bar atas color: Colors.lightGreen, child: new TabBar( controller: controller, tabs: <Widget>[ //copy saja pada bagian atas tab bar //hilangkan text agar lebih simple atau sesuka Anda new Tab(icon: new Icon(Icons.email),), new Tab(icon: new Icon(Icons.queue_music),), new Tab(icon: new Icon(Icons.shopping_cart),), new Tab(icon: new Icon(Icons.phone_android),), ], ), ),

Run kembali aplikasi, maka tampilannya akan seperti video di bawah ini:

Image

Selamat mencoba.

Referensi:

Flutter-tab-bar

0

0

0

share