Tutorial Flutter Membuat Tab dan Efek Menarik

Tutorial Flutter Tab Bar
Tutorial Flutter Tab Bar
Codingtive.com - Tab merupakan widget yang sering kita temui pada aplikasi yang digunakan sehari-hari. Nah, sebelumnya apa itu Tab ? Tab merupakan widget yang posisinya berada diatas berupa menu untuk menampilkan beberapa halaman, dan biasanya dapat di slide.

Contoh penggunaan Tab yaitu pada aplikasi Whatsapp, Facebook, dan masih banyak lagi.
Tab example
Tab example
Pada tutorial ini, kita akan belajar membuat tab pada Flutter mulai dari yang sederhana sampai memberikan efek yang menarik. Ikuti langkah-langkah berikut untuk mulai membuatnya :

1. Buat project flutter

Pertama, buat project baru dan pastikan laptop kamu terkoneksi dengan internet.

2. Membuat halaman

Selanjutnya kita akan membuat 2 halaman, yaitu halaman home dan profile, caranya buat file baru 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 digunakan untuk menampilkan tab untuk halaman home dan profile yang sudah kita buat sebelumnya, buat file baru dengan nama main_view.dart dan tambahkan kode 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 : digunakan untuk mengatur animasi dan state pada tab.
- Untuk menggunakan tab membutuhkan controller berupa TabController.
- Untuk membuat Tab Bar yaitu seperti pada fungsi _buildTabBar().
- Untuk menampilkan halaman tab, yaitu pada TabBarView().
- Untuk mengatur style yang berhubungan dengan tab, dapat dilakukan didalam TabBar
- Untuk mengubah jumlah tab, kamu juga perlu mengatur pada TabController, yaitu pada kode ini :
_tabController = new TabController(length: 2, vsync: this);
Contoh kode diatas, menampilkan 2 tab dengan tab pertama icon saja, dan yang kedua icon dan text.

Buka file main.dart dan ubah kodenya menjadi seperti 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, hasilnya seperti berikut :
Basic Flutter Tab
Basic Flutter Tab

4. Menambahkan efek menarik

Untuk menambahkan efek menarik pada tab kamu dapat menggunakan gradient, kamu dapat mempelajari penggunaan gradient lengkap pada artikel tutorial flutter membuat efek gradient.

Caranya kita akan memanfaatkan flexibleSpace pada widget AppBar, caranya tambahkan kode berikut didalam widget AppBar untuk membuat efek gradient :
appBar: AppBar(
  centerTitle: true,
  title: Text("Flutter Tabs"),
  flexibleSpace: Container(
    decoration: BoxDecoration(
      gradient: LinearGradient(
        colors: [
          Colors.red,
          Colors.orangeAccent,
        ],
      ),
    ),
  ),
  bottom: _buildTabBar(),
),
Kamu dapat mengubah efek gradient dan warnanya didalam widget BoxDecoration, sekarang coba jalankan kembali maka hasilnya lebih menarik dibandingkan sebelumnya.
Flutter tab gradient
Flutter tab gradient
Demikian tutorial flutter cara membuat tab dengan efek yang menarik, selain itu kamu juga dapat belajar membuat navigasi yang lain seperti bottom navigation. Bagaimana caranya ? Yuk, pelajari juga pada artikel tutorial flutter membuat bottom navigation.

Semoga bermanfaat ya.

Berlangganan update artikel terbaru via email:

Belum ada Komentar untuk "Tutorial Flutter Membuat Tab dan Efek Menarik"

Posting Komentar

Iklan Atas Artikel

Iklan Tengah Artikel 1

Iklan Tengah Artikel 2

Iklan Bawah Artikel