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

Flutter – Add button to beginning of tabbar without tab indicator

I want to create a TabBar that add IconButtonto start of the TabBar without having any TabIndicator which is just used as action.

const TabBar(
  isScrollable: true,
  tabs: [
    Tooltip(
        message: "Customize your interest",
        child: Icon(Icons.add),
    ),
    Tooltip(
        message: "For you",
        child: Tab(text: "For you"),
    ),
                      Tooltip(
                        message: "Following",
                        child: Tab(text: "Following"),
                      ),
                    ],
                  )

The add button still has TabIndicator when clicked and I have to add one extra Page to TabBarView I don’t need a page for the add button, just wanna use it as an action button

Tags:

2

Answers


  1. Chosen as BEST ANSWER
    0

    Thanks to Samgi, I was able to think clearly. I used SingleScrollChild to make both TabBar and IconButton scroll together. This is the code below

    SingleChildScrollView(
                scrollDirection: Axis.horizontal,
                child: Row(
                  children: <Widget>[
                    IconButton(
                      icon: const Icon(Icons.add),
                      tooltip: "Customize your interest",
                      onPressed: () {},
                    ),
                    const TabBar(
                      isScrollable: true,
                      tabs: <Widget>[
                        Tooltip(
                          message: "For you",
                          child: Tab(text: "For you"),
                        ),
                        Tooltip(
                          message: "Following",
                          child: Tab(text: "Following"),
                        ),
                        Tooltip(
                          message: "Following",
                          child: Tab(text: "Following"),
                        ),
                        Tooltip(
                          message: "Following",
                          child: Tab(text: "Following"),
                        ),
                      ],
                    ),
                  ],
                ),
              )

  2. 0 
    class CustomTabBar extends StatelessWidget {
  const CustomTabBar({Key key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return Row(
      children: <Widget>[
        IconButton(
          icon: Icon(Icons.add),
          tooltip: "Customize your interest",
          onPressed: () {
            // Handle your button tap here
          },
        ),
        Expanded(
          child: TabBar(
            isScrollable: true,
            indicatorColor: Colors.transparent, // hides the tab indicator
            tabs: <Widget>[
              Tooltip(
                message: "For you",
                child: Tab(text: "For you"),
              ),
              Tooltip(
                message: "Following",
                child: Tab(text: "Following"),
              ),
              // Add more tabs as needed
            ],
          ),
        ),
      ],
    );
  }
}

    You need to wrap CustomTabBar with a DefaultTabController

    DefaultTabController(
  length: 2, // number of tabs
  child: Scaffold(
    appBar: AppBar(
      bottom: CustomTabBar(),
    ),
    body: TabBarView(
      children: <Widget>[
        // Add your tab views here
        Center(child: Text("For You")),
        Center(child: Text("Following")),
      ],
    ),
  ),
);
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search