Tabbar
pada Flutter
Sering kali kita jumpai pada sebuah aplikasi mobile
dengan design tab, Tabbar pada flutter dapat kita buat menggunakan widget yang
bernama TabBar. Pada tutotial ini kita akan membuat tiga buah file dart. Yaitu yang pertama main.dart yang degenerate otomatis
saat pembuatan projek, kemudian file yang lain yaitu FirstScreen.dart dan
SecondScreen.dart.
Main.dart
import
'package:flutter/material.dart';
import
'FirstScreen.dart';
import
'SecondScreen.dart';
void main() {
runApp(MyApp());
}
class MyApp extends
StatelessWidget {
@override
Widget build(BuildContext context) {
// TODO: implement build
return MaterialApp(
home: DefaultTabController(
length: 2,
child: Scaffold(
appBar: AppBar(
bottom: TabBar(
tabs: [
Tab(icon:
Icon(Icons.directions_car)),
Tab(
icon: Icon(
Icons.directions_transit,
))
],
),
title: Text("Contoh
Tab Tab"),
),
body: TabBarView(children: [
FirstScreen(),
SecondScreen(),
]),
),
));
}
}
FirstScreen.dart
import
'package:flutter/material.dart';
class FirstScreen extends
StatelessWidget{
@override
Widget build(BuildContext context) {
// TODO: implement build
return Container(
child:Center(
child:Text('TAB 1')
)
);
}
}
SecondScreen.dart
import
'package:flutter/material.dart';
class SecondScreen extends
StatelessWidget{
@override
Widget build(BuildContext context) {
// TODO: implement build
return Container(
child:Center(
child:Text('TAB 2')
)
);
}
}
Hasil dari script diatas
dapat dilihat pada video demo dibawah :
Tidak ada komentar:
Posting Komentar