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

how to make tabbar scrollable when list is big in flutter

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(),
          ),
        ));
  }
Tags:

2

Answers


  1. 0

    You can add isScrollable to true in Tabbar:

    TabBar(
   isScrollable: true,
   ...
),
    Login or Signup to reply.
  2. 0

    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