Question 229882 in Flutter Question posted in
The official Flutter documentation can be found here.

Not able to change design of Tab Bar Flutter

I am trying to create a tab bar inside a container


return Container(
              padding: const EdgeInsets.symmetric(horizontal: 5),
              decoration: customDecorationsObject.getCustomContainer(
                  containerColor: AppColors.mediumBlackColor, borderRadius: 12),
              child: TabBar(
                enableFeedback: true,
                dividerColor: Colors.transparent,
                onTap: homePageController.changeFeedTab,
                indicator: BoxDecoration(
                  color: AppColors.whiteColor,
                  borderRadius: BorderRadius.circular(12),
                ),
                tabs: [
                  Tab(
                    child: Text(
                      "All",
                      style: AppTextStyle.regular.copyWith(
                          color: homePageController.feedTabIndex.value == 0
                              ? AppColors.blackColor
                              : AppColors.whiteColor),
                    ),
                  ),
                  Tab(
                    child: Text(
                      "Business",
                      style: AppTextStyle.regular.copyWith(
                          color: homePageController.feedTabIndex.value == 1
                              ? AppColors.blackColor
                              : AppColors.whiteColor),
                    ),
                  ),
                  Tab(
                    child: Text(
                      "My Posts",
                      style: AppTextStyle.regular.copyWith(
                          color: homePageController.feedTabIndex.value == 2
                              ? AppColors.blackColor
                              : AppColors.whiteColor),
                    ),
                  ),
                ],
              ),
            )

The result I am able to achieve is this:
enter image description here

The white container is just enclosing the text and not the whole tab. Can anyone please point out where am I doing a mistake and how can I correct it?

Tags:

2

Answers


  1. 0

    Try below code:

     TabBar(
        tabs: <Widget>[
          Tab(
            text: "All",
          ),
          Tab(
            text: "Business",
          ),
          Tab(
            text: "My Posts",
          ),
        ],
        indicator: ShapeDecoration(
            shape: RoundedRectangleBorder(
                borderRadius: BorderRadius.circular(10)),
            color: Colors.green),
        onTap: (value) {
          print('Sel In - $value');
        },
      ),

    Result-> image

    Login or Signup to reply.
  2. 0

    You can adjust the padding using labelPadding

    indicatorPadding: EdgeInsets.all(8), // padding of indicator

labelPadding: EdgeInsets.all(8),  // padding of text

    see final result

    Full code

    Container(
                  color: Colors.black,
                  padding: const EdgeInsets.symmetric(horizontal: 5),
                  child: TabBar(
                    controller: TabController(length: 3, vsync: this),
                    enableFeedback: true,
                    dividerColor: Colors.transparent,
                    labelColor: Colors.black,
                    unselectedLabelColor: Colors.white,
                    indicatorPadding: EdgeInsets.all(8), // padding of indicator
                    labelPadding: EdgeInsets.all(8),  // padding of text
                    indicator: BoxDecoration(
                      color: Colors.white,
                      borderRadius: BorderRadius.circular(12),
                    ),
                    tabs: const [
                      Tab(
                        child: Text(
                          "All",
                        ),
                      ),
                      Tab(
                        child: Text(
                          "Business",
                        ),
                      ),
                      Tab(
                        child: Text(
                          "My Posts",
                        ),
                      ),
                    ],
                  ),
                ),
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search