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'),
            ],
          ),
        ),

Leave a Comment