CODEWITHSUNDEEP
flutterdartflutter-layouttabbarflutter-navigation
edn
edn

Reputation: 2193

How to conditionally show bottom navigation bar when changing upper tab bar in flutter

I have the following test screen on my app:

enter image description here

As seen, my intention is that I will have 3 widgets connected to each upper tab. And I also want to have a bottom navigation bar but I only want it to be visible when the user is under Upper Tab 3. For instance, the user is under Upper Tab 1 in the screenshot above but the bottom navigation bar is still visible.

Here is my code that I have written to achieve this but it just does not work. I keep seeing the bottom navigation bar no matter under which upper tab bar I am. What am I supposed to do to achieve that my bottom navigation bar is only seen when the user is under Upper Tab 3 tab bar?

import 'package:flutter/material.dart';

class TestPage extends StatefulWidget {
  @override
  _TestPageState createState() => _TestPageState();
}

class _TestPageState extends State<TestPage>
    with AutomaticKeepAliveClientMixin {
  @override
  void initState() {
    super.initState();
  }

  @override
  bool get wantKeepAlive => true;

  int _currentBottomBarIndex = 0;
  bool _showBottomBar = false;

  final _tabs = [
    Center(child: Text('Bottom Tab 1')),
    Center(child: Text('Bottom Tab 2')),
  ];

  Widget _changeUpperTab(upperTabIdx, isBottomBar) {
    setState(() {
      _showBottomBar = isBottomBar;
    });

    if (_showBottomBar) {
      return _tabs[_currentBottomBarIndex];
    } else {
      return Center(child: Text('Tab ' + upperTabIdx.toString()));
    }
  }

  @override
  Widget build(BuildContext context) {
    super.build(context);
    return DefaultTabController(
      length: 3,
      child: Scaffold(
        appBar: AppBar(
          title: Text('Test App'),
          bottom: TabBar(
            indicatorColor: Colors.white,
            tabs: [
              Tab(
                  child: Text(
                'Upper Tab 1',
                style: TextStyle(fontWeight: FontWeight.bold),
              )),
              Tab(
                  child: Text(
                'Upper Tab 2',
                style: TextStyle(fontWeight: FontWeight.bold),
              )),
              Tab(
                  child: Text(
                'Upper Tab 3',
                style: TextStyle(fontWeight: FontWeight.bold),
              )),
            ],
          ),
        ),
        body: TabBarView(
          children: [
            _changeUpperTab(1, false),
            _changeUpperTab(2, false),
            _changeUpperTab(3, true),
          ],
        ),
        bottomNavigationBar: (_showBottomBar)
            ? BottomNavigationBar(
                currentIndex: _currentBottomBarIndex,
                items: [
                  BottomNavigationBarItem(
                      icon: Icon(Icons.search),
                      label: 'Search',
                      backgroundColor: Colors.yellow),
                  BottomNavigationBarItem(
                      icon: Icon(Icons.home),
                      label: 'Home',
                      backgroundColor: Colors.red),
                ],
                onTap: (index) {
                  setState(() {
                    _currentBottomBarIndex = index;
                  });
                },
              )
            : null,
      ),
    );
  }
}

Upvotes: 0

Views: 1390

Answers (1)

Ayad
Ayad

Reputation: 691

You can use this code to create it in the tab you want, but i would recommend you to create a separate statelessWidget for that tab and you can have it more organized.

class TestPage extends StatefulWidget {
  @override
  _TestPageState createState() => _TestPageState();
}

class _TestPageState extends State<TestPage>
    with AutomaticKeepAliveClientMixin {
  @override
  void initState() {
    super.initState();
  }

  @override
  bool get wantKeepAlive => true;

  int _currentBottomBarIndex = 0;
  bool _showBottomBar = false;

  final _tabs = [
    Center(child: Text('Bottom Tab 1')),
    Center(child: Text('Bottom Tab 2')),
  ];

  Widget _changeUpperTab(upperTabIdx, isBottomBar) {
    setState(() {
      _showBottomBar = isBottomBar;
    });

    if (_showBottomBar) {
      return Scaffold(
        body: _tabs[_currentBottomBarIndex],
        bottomNavigationBar: BottomNavigationBar(
          currentIndex: _currentBottomBarIndex,
          items: [
            BottomNavigationBarItem(
                icon: Icon(Icons.search),
                label: 'Search',
                backgroundColor: Colors.yellow),
            BottomNavigationBarItem(
                icon: Icon(Icons.home),
                label: 'Home',
                backgroundColor: Colors.red),
          ],
          onTap: (index) {
            setState(() {
              _currentBottomBarIndex = index;
            });
          },
        ),
      );
    } else {
      return Center(child: Text('Tab ' + upperTabIdx.toString()));

    }
  }

  @override
  Widget build(BuildContext context) {
    super.build(context);
    return DefaultTabController(
      length: 3,
      child: Scaffold(
        appBar: AppBar(
          title: Text('Test App'),
          bottom: TabBar(
            indicatorColor: Colors.white,
            tabs: [
              Tab(
                  child: Text(
                    'Upper Tab 1',
                    style: TextStyle(fontWeight: FontWeight.bold),
                  )),
              Tab(
                  child: Text(
                    'Upper Tab 2',
                    style: TextStyle(fontWeight: FontWeight.bold),
                  )),
              Tab(
                  child: Text(
                    'Upper Tab 3',
                    style: TextStyle(fontWeight: FontWeight.bold),
                  )),
            ],
          ),
        ),
        body: TabBarView(
          children: [
            _changeUpperTab(1, false),
            _changeUpperTab(2, false),
            _changeUpperTab(3, true),
          ],
        ),

      ),
    );
  }
}

Upvotes: 1

Related Questions