How to use tabbar as a bottom navigation bar in flutter?

UI Image

use Tabbar as a bottom navigation bar, is it possible?

Tabbar working smooth compare to bottom bar?

>Solution :

enter image description here

 DefaultTabController(
          length: 3,
          child: Scaffold(
            backgroundColor: ColorConstant.whiteColor,
            body: const TabBarView(
              children: [
                Container(),
                Container(),
                Container(),
              ],
            ),
            bottomNavigationBar: Container(
              height: 9.0.h,
              decoration: const BoxDecoration(
                color: ColorConstant.yellowColor,
                borderRadius: BorderRadius.only(
                  topLeft: Radius.circular(24),
                  topRight: Radius.circular(24),
                ),
              ),
              child: TabBar(
                indicatorSize: TabBarIndicatorSize.tab,
                indicatorPadding: const EdgeInsets.all(12),
                indicator: BoxDecoration(
                  color: ColorConstant.lightYellowColor,
                  borderRadius: BorderRadius.circular(24),
                ),
                tabs: [
                  Tab(
                    child: Image.asset(homeIcon),
                  ),
                  Tab(
                    child: Image.asset(addPostIcon),
                  ),
                  Tab(
                    child: Image.asset(feedIcon),
                  ),
                ],
              ),
            ),
          ),
        );

Leave a Reply