Tutorial Flutter Menciptakan Tab Dan Efek Menarik

Tutorial Flutter Tab Bar

- Tab merupakan widget yang sering kita temui pada aplikasi yang dipakai sehari-hari. Nah, sebelumnya apa itu Tab ? Tab merupakan widget yang posisinya berada diatas berupa sajian untuk menampilkan beberapa halaman, dan biasanya sanggup di slide.

Contoh penggunaan Tab ialah pada aplikasi Whatsapp, Facebook, dan masih banyak lagi.

Tab example

Pada tutorial ini, kita akan berguru menciptakan tab pada Flutter mulai dari yang sederhana hingga memperlihatkan imbas yang menarik. Ikuti langkah-langkah berikut untuk mulai membuatnya :

1. Buat project flutter

Pertama, buat project gres dan pastikan laptop kau terkoneksi dengan internet.

2. Membuat halaman

Selanjutnya kita akan menciptakan 2 halaman, ialah halaman home dan profile, caranya buat file gres pada folder lib dan berikut kodenya :

home_view.dart :

import 'package:flutter/material.dart';  class HomePage extends StatelessWidget {   @override   Widget build(BuildContext context) {     return Container(       child: Center(         child: Text("Halaman Home"),       ),     );   } } 

profile_view.dart

import 'package:flutter/material.dart';  class ProfilePage extends StatelessWidget {   @override   Widget build(BuildContext context) {     return Container(       child: Center(         child: Text("Halaman Profile"),       ),     );   } } 

3. Membuat halaman utama

Halaman utama dipakai untuk menampilkan tab untuk halaman home dan profile yang sudah kita buat sebelumnya, buat file gres dengan nama main_view.dart dan tambahkan arahan berikut :

import 'package:flutter/material.dart'; import 'home_view.dart'; import 'profile_view.dart';  class MainPage extends StatefulWidget {   @override   _MainPageState createState() => _MainPageState(); }  class _MainPageState extends State<MainPage> with SingleTickerProviderStateMixin {    TabController _tabController;    @override   void initState() {     _tabController = new TabController(length: 2, vsync: this);     super.initState();   }    @override   void dispose() {     _tabController.dispose();     super.dispose();   }    @override   Widget build(BuildContext context) {     return Scaffold(       appBar: AppBar(         centerTitle: true,         title: Text("Flutter Tabs"),         bottom: _buildTabBar(),       ),       body: TabBarView(         controller: _tabController,         children: <Widget>[           HomePage(),           ProfilePage(),         ],       ),     );   }    TabBar _buildTabBar() {     return TabBar(       controller: _tabController,       labelColor: Colors.white,       tabs: <Widget>[         Tab(           icon: Icon(Icons.home),         ),         Tab(           icon: Icon(Icons.person),           text: "PROFILE",         ),       ],     );   } } 

Berikut penjelasannya :
- SingleTickerProviderSateMixin : dipakai untuk mengatur animasi dan state pada tab.
- Untuk memakai tab membutuhkan controller berupa TabController.
- Untuk menciptakan Tab Bar ialah menyerupai pada fungsi _buildTabBar().
- Untuk menampilkan halaman tab, ialah pada TabBarView().

- Untuk mengatur style yang berafiliasi dengan tab, sanggup dilakukan didalam TabBar

- Untuk mengubah jumlah tab, kau juga perlu mengatur pada TabController, ialah pada arahan ini :

_tabController = new TabController(length: 2, vsync: this); 

Contoh arahan diatas, menampilkan 2 tab dengan tab pertama icon saja, dan yang kedua icon dan text.

Buka file main.dart dan ubah kodenya menjadi menyerupai berikut:

import 'main_view.dart'; import 'package:flutter/material.dart';  void main() {   runApp(MaterialApp(     title: "Flutter Tabs",     debugShowCheckedModeBanner: false,     home: MainPage(),   )); } 

Sebelum coba dijalankan, buka file widget_test.dart pada folder test. Ubah class MyApp menjadi MainPage(), seperti berikut :

// tambahkan import dulu sebelumnya import 'main_view.dart';  await tester.pumpWidget(MainPage()); 

Sekarang coba jalankan dengan emulator, balasannya menyerupai berikut :

Basic Flutter Tab

4. Menambahkan imbas menarik

Untuk menambahkan imbas menarik pada tab kau sanggup memakai gradient, kau sanggup mempelajari penggunaan gradient lengkap pada artikel tutorial flutter menciptakan imbas gradient.

Caranya kita akan memanfaatkan flexibleSpace pada widget AppBar, caranya tambahkan arahan berikut didalam widget AppBar untuk menciptakan imbas gradient :

appBar: AppBar(   centerTitle: true,   title: Text("Flutter Tabs"),   flexibleSpace: Container(     decoration: BoxDecoration(       gradient: LinearGradient(         colors: [           Colors.red,           Colors.orangeAccent,         ],       ),     ),   ),   bottom: _buildTabBar(), ), 

Kamu sanggup mengubah imbas gradient dan warnanya didalam widget BoxDecoration, kini coba jalankan kembali maka balasannya lebih menarik dibandingkan sebelumnya.

Flutter tab gradient

Demikian tutorial flutter cara menciptakan tab dengan imbas yang menarik, selain itu kau juga sanggup berguru menciptakan navigasi yang lain menyerupai bottom navigation. Bagaimana caranya ? Yuk, pelajari juga pada artikel tutorial flutter menciptakan bottom navigation.

Semoga bermanfaat ya.

Share this post