Pada kali ini kita membuat sebuah Tabbar pada Flutter. Tabbar merupakan salah satu widget yang disediakan oleh flutter untuk membuat layout dengan model tab yang umumnya terdapat pada aplikasi android. Biasanya TabBar ditampilkan di bagian bawah appbar. berikut ini cara membuat sebuah tabbar pada flutter, yaitu:

• Buatlah sebuah project baru pada flutter
• Buatlah sebuah tabbar pada project

return DefaultTabController(
    length: 4,
    child: Scaffold(
      appBar: AppBar(
        title: Text("Tabbar Apps"),
        bottom: TabBar(
            tabs: [
              Tab(icon: Icon(Icons.home)),
              Tab(icon: Icon(Icons.dashboard)),
              Tab(icon: Icon(Icons.camera)),
              Tab(icon: Icon(Icons.close)),
            ]
        ),
      ),
      body: TabBarView(
        children: [
          Center(child: Text("Halaman Home")),
          Center(child: Text("Halaman Dashboard")),
          Center(child: Text("Halaman Camera")),
          Center(child: Text("Halaman Logout")),
        ],
      ),
    ));

• Full Source Code

import 'package:flutter/material.dart';

void main() {
  runApp(const MyApp());
}

class MyApp extends StatelessWidget {
  const MyApp({Key? key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: HomePage(),
      debugShowCheckedModeBanner: false,
    );
  }
}

class HomePage extends StatefulWidget {
  const HomePage({Key? key}) : super(key: key);

  @override
  State<HomePage> createState() => _HomePageState();
}

class _HomePageState extends State<HomePage> {
  @override
  Widget build(BuildContext context) {
    return DefaultTabController(
        length: 4,
        child: Scaffold(
          appBar: AppBar(
            title: Text("Tabbar Apps"),
            bottom: TabBar(
                tabs: [
                  Tab(icon: Icon(Icons.home)),
                  Tab(icon: Icon(Icons.dashboard)),
                  Tab(icon: Icon(Icons.camera)),
                  Tab(icon: Icon(Icons.close)),
                ]
            ),
          ),
          body: TabBarView(
            children: [
              Center(child: Text("Halaman Home")),
              Center(child: Text("Halaman Dashboard")),
              Center(child: Text("Halaman Camera")),
              Center(child: Text("Halaman Logout")),
            ],
          ),
        ));
  }
}