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,
                                    ),
                                ),
                            ],
                        ),
                    ),
                ),
            ],
        );
    }
}

why do you use Container inside Tab, tab has icon and text properties — diegoveloper, Aug 13 '18 at 14:50
Hey that is bad coding style, just ignore it. The main purpose is getting the tabbar to the bottom. I managed to do that but now TabBarView isn't working. — TheUniqueProgrammer, Aug 13 '18 at 15:24

score 39 · Accepted Answer · edited May 31 '22 at 08:01

39

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),
      ),
    ],
  ),
);

} }

edited May 31 '22 at 08:01

Jago

2,751
4
27
41

answered Aug 13 '18 at 14:56

diegoveloper

93,875
20
236
194

Hey, I want the AppBar on the bottom like on my screenshot. That is how I tried it and it did not work. Actually it did but the pages were unresponsive. Screenshot again: https://i.imgur.com/dTTcj2X.png - it should look like this. – TheUniqueProgrammer Aug 13 '18 at 15:06
Thank you but now the TabBar effects are gone. – TheUniqueProgrammer Aug 13 '18 at 15:42
what do you mean? could you put a screenshot? – diegoveloper Aug 13 '18 at 15:43
I mean that the opacity / transparency of the other icons change when you change the page. This doesn't happen with your version anymore. Also the line under the selection doesn't have the same width. It's coming close though. – TheUniqueProgrammer Aug 13 '18 at 16:36
just change the properties bro, I updated my answer , check the menu() method – diegoveloper Aug 13 '18 at 16:44
1

Thanks man, I gave you an upvote and correct answer. I will work up from there on. Sorry for the problems, I'm new to this Flutter thing. – TheUniqueProgrammer Aug 13 '18 at 17:50
@diegoveloper Great job, but I have one question.. if we use bottomnavigation bar will I be able to save the state in each tab... I am hearing there are issues w.r.t state? – anoop4real Oct 09 '20 at 09:43

TabBar on bottom of app with Column

1 Answers1

Linked