TabBar on bottom of app with Column

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

I fixed your code, take a look.

  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"),
              bottom: 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 TabBar(
        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),
          ),
        ],
      );
    }
  }

You have to create a scaffold in order to use the AppBar, then put the tabs inside the bottom property.

UPDATE

Using bottomNavigationBar to positioned 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),
      ),
    ],
  ),
);

} }