Horizontal scrollable tabs in flutter

Tabs adalah pengelompokan konten yang sering sekali ditampilkan menggunakan tabs. Sebut saja, Whatsapp, Youtube, Facebook, Instagram, Tabs biasanya ditempatkan pada top position ataupun bottom position dan mungkin juga menggunakan keduanya. Tabs membuat sekat agar dapat memuat lebih banyak konten dalam satu halaman.

1. Start a new Flutter project

2. Pilih flutter pplication

3. Konfigurasi project anda


4. Buat directory baru dengan nama gambar dan isikan beberapa gambar didalamnya

‘Saran berilah nama yang mudah pada gambar, agar lebih mudah ketika kita ingin memanggil gambar tesebut di codingan


5. Pada pubspec.yaml edit pada assets

6. Edit main.dart menjadi seperti ini

import 'package:flutter/material.dart';

void main() => runApp(MyApp());

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      debugShowCheckedModeBanner: false,
      home: DefaultTabController(
        length: 8,
        child: Scaffold(
          appBar: AppBar(
            backgroundColor: Colors.deepPurpleAccent,
            title: Center(child: Text('Tab Bar Scroll')),
            bottom: TabBar(
              isScrollable: true,indicator: UnderlineTabIndicator(
                borderSide: BorderSide(width: 15.0),
                insets: EdgeInsets.symmetric(horizontal:10.0)
            ),
              tabs: [
                new Tab(icon: new Image.asset('gambar/shuttlecock.png')),
                new Tab(icon: new Image.asset('gambar/football.png')),
                new Tab(icon: new Image.asset('gambar/basketball.png')),
                new Tab(icon: new Image.asset('gambar/volleyball.png')),
                new Tab(icon: new Image.asset('gambar/tennis.png')),
                new Tab(icon: new Image.asset('gambar/bowling.png')),
                new Tab(icon: new Image.asset('gambar/golf.png')),
                new Tab(icon: new Image.asset('gambar/ping-pong.png')),
              ],
            ),
          ),
          body: TabBarView(
            children: [
              Image.asset('gambar/shuttlecock.png'),
              Image.asset('gambar/football.png'),
              Image.asset('gambar/basketball.png'),
              Image.asset('gambar/volleyball.png'),
              Image.asset('gambar/tennis.png'),
              Image.asset('gambar/bowling.png'),
              Image.asset('gambar/golf.png'),
              Image.asset('gambar/ping-pong.png'),
            ],
          ),
        ),
      ),
    );
  }
}

7. Penjelasan kode

      home: DefaultTabController(
length: 8,
//ada 8 tabs yang dideklarasi, sehingga untuk tabs dan juga pada view pastikan sesuai dengan yang dideklarasi yaitu 8
-------------------
isScrollable: true,// agar tabs bisa di scroll
------------------
UnderlineTabIndicator(
//sebagai penanda di setiap menu (ini sangat berpengaruh agar user tahu sedang berada di menu yang mana user berada)
           borderSide: BorderSide(width: 15.0),
           insets: EdgeInsets.symmetric(horizontal:10.0)
            ), 
-------------------
tabs: [//pastika tabs ada 8 tidak boleh lebih maupung kurang
new Tab(icon: new Image.asset('gambar/shuttlecock.png')),
new Tab(icon: new Image.asset('gambar/football.png')),
new Tab(icon: new Image.asset('gambar/basketball.png')),
new Tab(icon: new Image.asset('gambar/volleyball.png')),
new Tab(icon: new Image.asset('gambar/tennis.png')),
new Tab(icon: new Image.asset('gambar/bowling.png')),
new Tab(icon: new Image.asset('gambar/golf.png')),
new Tab(icon: new Image.asset('gambar/ping-pong.png')),
              ],
-------------------
body: TabBarView( 
//pastika view ada 8 tidak boleh lebih maupung kurang
            children: [
              Image.asset('gambar/shuttlecock.png'),
              Image.asset('gambar/football.png'),
              Image.asset('gambar/basketball.png'),
              Image.asset('gambar/volleyball.png'),
              Image.asset('gambar/tennis.png'),
              Image.asset('gambar/bowling.png'),
              Image.asset('gambar/golf.png'),
              Image.asset('gambar/ping-pong.png'),
            ],
          ),
        ),

spot_imgspot_img

Subscribe

Related articles

Memanfaatkan Include Dan Required Function Pada PHP

 Halo teman-teman sobat baraja udacoding, selamat datang kembali di...

CARA MEMBUAT KONEKSI DATABASE DI PHP

Halo teman-teman, selamat datang kembali di baraja uda coding....

Pseudo Class Dan Penggunaannya part 2

Anchor Pseudo-classesMerubah link dengan beberapa cara yang berbeda tergantung...

Gridview and Container with Random Colors

Hallo sobat flutter, selamat pagi, siang, sore, malam. Apa...

Mengenal Pseudo Element Dan Penggunaannya part 2

Seperti yang kita semua ketahui tentang Pseudo Element pada artikel...
spot_imgspot_img

LEAVE A REPLY

Please enter your comment!
Please enter your name here