Buatlah aplikasi_tabbar berikut menggunakan

framework flutter !

main.dart
import 'package:flutter/material.dart';
import './hal_komputer.dart' as komputer;
import './hal_headset.dart' as headset;
import './hal_radio.dart' as radio;
import './hal_smartphone.dart' as smartphone;

void main() {
runApp(new MaterialApp(
title: "Tab Bar",
home: new Home(),
));
}

class Home extends StatefulWidget {

@override
State<Home> createState() => new _HomeState();
}

class _HomeState extends State<Home> with SingleTickerProviderStateMixin {

TabController controller;

@override
void initState() {
controller = new TabController(vsync: this, length: 4);
super.initState();
}

@override
void dispose() {
controller.dispose();
super.dispose();
}

@override
Widget build(BuildContext context) {
return Scaffold(
appBar: new AppBar(
backgroundColor: Colors.amber,
title: new Text("Daftar Elektronik"),
bottom: new TabBar(
controller: controller,
tabs: <Widget>[
new Tab(
icon: new Icon(Icons.computer),
text: "Komputer",
),
new Tab(icon: new Icon(Icons.headset), text: "Headset"),
new Tab(icon: new Icon(Icons.radio), text: "Radio"),
new Tab(icon: new Icon(Icons.smartphone), text: "Smartphone"),
],
),
),
 body: new TabBarView(
controller: controller,
children: <Widget>[
new komputer.Komputer(),
new headset.Headset(),
new radio.Radio(),
new smartphone.Smartphone(),
],
),
bottomNavigationBar: new Material(
color: Colors.amber,
child: new TabBar(
controller: controller,
tabs: <Widget>[
new Tab(
icon: new Icon(Icons.computer),
),
new Tab(
icon: new Icon(Icons.headset),
),
new Tab(
icon: new Icon(Icons.radio),
),
new Tab(
icon: new Icon(Icons.smartphone),
),
],
),
),
);
}
}

hal_headset.dart
import 'package:flutter/material.dart';

class Headset extends StatelessWidget {

@override
Widget build(BuildContext context) {
return new Container(
child: new Center(
child: new Column(
children: <Widget>[
new Padding(
padding: new EdgeInsets.all(20.0),
),
new Text(
"HEADSET",
style: new TextStyle(fontSize: 30.0),
),
new Padding(
padding: new EdgeInsets.all(20.0),
),
new Icon(
Icons.headset,
size: 90.0,
)
],
 ),
),
);
}
}

hal_komputer.dart
import 'package:flutter/material.dart';

class Komputer extends StatelessWidget {

@override
Widget build(BuildContext context) {
return new Container(
child: new Center(
child: new Column(
children: <Widget>[
new Padding(
padding: new EdgeInsets.all(20.0),
),
new Text(
"KOMPUTER",
style: new TextStyle(fontSize: 30.0),
),
new Padding(
padding: new EdgeInsets.all(20.0),
),
new Icon(
Icons.computer,
size: 90.0,
)
],
),
),
);
}
}

hal_radio.dart
import 'package:flutter/material.dart';

class Radio extends StatelessWidget {

@override
Widget build(BuildContext context) {
return new Container(
child: new Center(
child: new Column(
children: <Widget>[
new Padding(
padding: new EdgeInsets.all(20.0),
),
new Text(
"RADIO",
style: new TextStyle(fontSize: 30.0),
),
new Padding(
padding: new EdgeInsets.all(20.0),
 ),
new Icon(
Icons.radio,
size: 90.0,
)
],
),
),
);
}
}

hal_smartphone.dart
import 'package:flutter/material.dart';

class Smartphone extends StatelessWidget {

@override
Widget build(BuildContext context) {
return new Container(
child: new Center(
child: new Column(
children: <Widget>[
new Padding(
padding: new EdgeInsets.all(20.0),
),
new Text(
"SMARTPHONE",
style: new TextStyle(fontSize: 30.0),
),
new Padding(
padding: new EdgeInsets.all(20.0),
),
new Icon(
Icons.smartphone,
size: 90.0,
)
],
),
),
);
}
}
Hasilnya sebagai berikut: