How to make tabs scrollable in flutter

Question

I've been developing android apps for a while now and I'm currently porting an android app to flutter which I started not long ago. I have been able to make tabs scrollable in android but I'm finding it difficult to do that in flutter. I am able to create the tabs but they are about 7 and they exceed the screen width. Hence I want to make it scrollable to avoid that. Below is what I did in the android app and I want to achieve something similar. Any help would be appreciated. Thanks.

Answer 1

You can use a DefaultTabController widget , also the Tab widget has a property called : isScrollable , set true and you will see. This is a basic sample:

   final List<Tab> myTabs = List.generate(
      10,
      (index) => Tab(text: 'TAB $index'),
    );

    @override
    Widget build(BuildContext context) {
      return DefaultTabController(
        length: myTabs.length,
        child: Scaffold(
          appBar: AppBar(
            bottom: TabBar(
              isScrollable: true,
              tabs: myTabs,
            ),
          ),
          body: TabBarView(
            children: myTabs.map((Tab tab) {
              return Center(child: Text(tab.text));
            }).toList(),
          ),
        ),
      );
    }

You can find more info here: https://docs.flutter.io/flutter/material/DefaultTabController-class.html