TabBar merupakan salah satu widget yang disediakan oleh flutter untuk membuat layout dengan model tab. TabBar ditampilkan di bagian bawah appbar dan digunakan untuk mengklasifikasikan atau mengkategorikan konten,
Source :
// Top Tab Bar View Flutter Gesture
import 'package:flutter/material.dart';
void main() => runApp(MyApp());
class MyApp extends StatelessWidget {
// This widget is the root of your application.
@override
Widget build(BuildContext context) {
return MaterialApp(
title: 'Flutter 100 Days',
theme: ThemeData(
primarySwatch: Colors.teal,
),
home: MyHomePage(title: 'Flutter Demo Home Page'),
);
}
}
class MyHomePage extends StatefulWidget {
MyHomePage({Key key, this.title}) : super(key: key);
final String title;
@override
_MyHomePageState createState() => _MyHomePageState();
}
class _MyHomePageState extends State<MyHomePage> {
int _counter = 0;
int _selectedIndex = 1;
// set up the button
void _incrementCounter() {
setState(() {
_counter++;
});
}
void _setTime() {
print('Set Time');
}
void _addTime() {
print('ADD TIME');
}
void itemTapped(int index) {
setState(() {
_selectedIndex = index;
});
}
@override
Widget build(BuildContext context) {
return MaterialApp(
home: DefaultTabController(
length: 3,
child: Scaffold(
appBar: AppBar(
bottom: TabBar(tabs: [
Tab(icon: Icon(Icons.directions_railway)),
Tab(icon: Icon(Icons.directions_subway)),
Tab(icon: Icon(Icons.directions_bike)),
]),
title: Text("Tab Bar")),
body: TabBarView(children: [
// Taruh Layout Kamu Disini
Icon(Icons.directions_railway),
Icon(Icons.directions_subway),
Icon(Icons.directions_bike),
]))));
}
}
Hasil :
Baca juga artikel yang berkaitan :
