TabBar on bottom of app with Column - flutter

Question

I am trying to put the TabBar on the bottom of the app.
It worked so far, yet I can't get the pages to work (TabBarView). It just looks black and unresponsive. The TabBar is unresponsive too. Have I taken the wrong approach?
Currently, it looks like that:
And the code looks like this:
import 'package:flutter/material.dart';
void main() => runApp(Bookkeeper());
class Bookkeeper extends StatelessWidget {
#override
Widget build(BuildContext context) {
return MaterialApp(
home: DefaultTabController(
length: 4,
child: Column(
crossAxisAlignment: CrossAxisAlignment.start,
verticalDirection: VerticalDirection.up,
mainAxisSize: MainAxisSize.min,
children: [
AppBar(
backgroundColor: Color(0xFF3F5AA6),
title: Container(
padding: EdgeInsets.only(top: 8.0),
child: menu(),
),
),
TabBarView(
children: [
Icon(Icons.directions_car),
Icon(Icons.directions_transit),
Icon(Icons.directions_bike),
Icon(Icons.directions_bike),
],
),
],
),
),
);
}
Widget menu() {
return TabBar(
tabs: [
Tab(
child: Container(
height: 45.0,
child: Column(
children:
[
Icon(Icons.euro_symbol),
Text(
"Transactions",
style: new TextStyle(
height: 1.5,
fontSize: 9.8,
color: Colors.white,
),
),
],
),
),
),
Tab(
child: Container(
height: 45.0,
child: Column(
children:
[
Icon(Icons.assignment),
Text(
"Bills",
style: new TextStyle(
height: 1.5,
fontSize: 9.5,
color: Colors.white,
),
),
],
),
),
),
Tab(
child: Container(
height: 45.0,
child: Column(
children:
[
Icon(Icons.account_balance_wallet),
Text(
"Balance",
style: new TextStyle(
height: 1.5,
fontSize: 9.5,
color: Colors.white,
),
),
],
),
),
),
Tab(
child: Container(
height: 45.0,
child: Column(
children:
[
Icon(Icons.settings),
Text(
"Options",
style: new TextStyle(
height: 1.5,
fontSize: 9.5,
color: Colors.white,
),
),
],
),
),
),
],
);
}
}

Answer 1

Use bottomNavigationBar to position the Tabs at the bottom of the screen
class Bookkeeper extends StatelessWidget {
#override
Widget build(BuildContext context) {
return MaterialApp(
home: DefaultTabController(
length: 4,
child: Scaffold(
appBar: AppBar(
backgroundColor: Color(0xFF3F5AA6),
title: Text("Title text"),
),
bottomNavigationBar: menu(),
body: TabBarView(
children: [
Container(child: Icon(Icons.directions_car)),
Container(child: Icon(Icons.directions_transit)),
Container(child: Icon(Icons.directions_bike)),
Container(child: Icon(Icons.directions_bike)),
],
),
),
),
);
}
Widget menu() {
return Container(
color: Color(0xFF3F5AA6),
child: TabBar(
labelColor: Colors.white,
unselectedLabelColor: Colors.white70,
indicatorSize: TabBarIndicatorSize.tab,
indicatorPadding: EdgeInsets.all(5.0),
indicatorColor: Colors.blue,
tabs: [
Tab(
text: "Transactions",
icon: Icon(Icons.euro_symbol),
),
Tab(
text: "Bills",
icon: Icon(Icons.assignment),
),
Tab(
text: "Balance",
icon: Icon(Icons.account_balance_wallet),
),
Tab(
text: "Options",
icon: Icon(Icons.settings),
),
],
),
);
}
}