skip to Main Content

I am using DefaultTabController for tabbar view but i have many tabs to filter data but its not scrolling and i cant see text of tab

how to make it scrollable so that all tabs can be viewed properly

 Widget build(BuildContext context) {
    final list = ['Furniture', 'Clothe', 'Mobiles', 'Laptop','Accessories','Stationary',];
    return DefaultTabController(
        length: list.length,
        child: Scaffold(
          appBar: AppBar(
            bottom: TabBar(
              tabs: list
                  .map((e) => Tab(
                        text: e,
                      ),
              )
                  .toList(),
            ),
          ),
          body: TabBarView(
            children: list.map((e) => CustomScreen(string: e)).toList(),
          ),
        ));
  }

2

Answers


  1. You can add isScrollable to true in Tabbar:

    TabBar(
       isScrollable: true,
       ...
    ),
    
    Login or Signup to reply.
  2. To make the TabBar scrollable when there are many tabs, you can wrap it with a SingleChildScrollView and set the scrollDirection property to Axis.horizontal. Here’s how you can modify your code to achieve this:

     Widget build(BuildContext context) {
      final list = ['Furniture', 'Clothe', 'Mobiles', 'Laptop', 'Accessories', 'Stationary'];
      return DefaultTabController(
        length: list.length,
        child: Scaffold(
          appBar: AppBar(
            bottom: PreferredSize(
              preferredSize: Size.fromHeight(kToolbarHeight),
              child: SingleChildScrollView(
                scrollDirection: Axis.horizontal,
                child: Row(
                  children: list.map((e) => Tab(text: e)).toList(),
                ),
              ),
            ),
          ),
          body: TabBarView(
            children: list.map((e) => CustomScreen(string: e)).toList(),
          ),
        ),
      );
    }
    
    Login or Signup to reply.
Please signup or login to give your own answer.
Back To Top
Search