Flutter BottomNavigationBar not clickable when treated as a child widget in a separate file

Question

I am working on this flutter app, and trying to separate some code to make things neat. So I have a home page, which contains an app bar with a tab bar inside it (works perfectly), the tab view body (works fine), and a bottom navigation bar (not working: somehow not clickable).

My footBar.dart:

import 'package:flutter/material.dart';

class FootBar extends StatefulWidget {
  @override
  _FootBarState createState() => _FootBarState();
}

class _FootBarState extends State<FootBar> {
  int _currentIndex = 0;

  Widget build(BuildContext context) {
    return Container(
      child: BottomNavigationBar(
        type: BottomNavigationBarType.fixed,
        currentIndex: _currentIndex,
        backgroundColor: Colors.white,
        selectedItemColor: Colors.black,
        unselectedItemColor: Colors.black.withOpacity(.3),
        selectedFontSize: 14,
        unselectedFontSize: 14,
        showSelectedLabels: false,
        showUnselectedLabels: false,
        onTap: (value) {
          // Respond to item press.
          setState(() => _currentIndex = value);
        },
        items: [
          BottomNavigationBarItem(
            label: '',
            icon: Text('a'),
          ),
          BottomNavigationBarItem(
            label: '',
            icon: Text('b'),
          ),
          BottomNavigationBarItem(
            label: '',
            icon: Text('c'),
          ),
          BottomNavigationBarItem(
            label: '',
            icon: Text('d'),
          ),
        ],
      ),
    );
  }
}

and I imported it in homepage.dart like this:

import 'package:flutter/material.dart';
import 'appbar/appBar.dart';
import 'footbar/footBar.dart';

void main() => runApp(HomePage());

class HomePage extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return DefaultTabController(
      length: 2,
      child: Scaffold(
        appBar: TopAppBar(),
        body: TabBarView(
          children: [
            Center(child: Text('DOGS')),
            Center(child: Text('CATS')),
          ],
        ),
        bottomNavigationBar: FootBar(),
      ),
    );
  }
}

Any help is appreciated. Thanks in advance guys!

Answer 1

Okey I just found out what went wrong. So in my footBar.dart file, I should not have this:

        showSelectedLabels: false,
        showUnselectedLabels: false,

I commented those two lines, and put text into label, and use a 0.0 height container to hide the icons(icons: Container(height: 0.0,),), and finally got what I wanted.