title: How to add tabs dynamically to TabBar in Flutter?
body: <p>How do I add tabs dynamically to the TabBar Widget in Flutter? The list of tabs is fetched from the internet using a REST API.</p>
  <p>When I fetch the list using the code below I get the following errors:</p>
  <blockquote>
  <p>RangeError (index): Invalid value: Only valid value is 0: 1</p>
  </blockquote>
  <blockquote>
  <p>A RenderFlex overflowed by 99896 pixels on the bottom.</p>
  </blockquote>
  <pre><code>class HomePage extends StatefulWidget {
    @override
    _HomePageState createState() =&gt; _HomePageState();
  }
  
  class _HomePageState extends State&lt;HomePage&gt; {
    Future&lt;List&lt;Categories&gt;&gt; categoriesList;
  
    final categoryTabs = &lt;Tab&gt;[
      Tab(text: 'Home'),
    ];
  
    @override
    void initState() {
      super.initState();
  
      categoriesList = NewsServices.fetchCategoriesList(lang: 'en');
      categoriesList.then((categories) {
        categories.forEach((category) {
          setState(() {
            categoryTabs.add(Tab(
              text: category.name,
            ));
          });
        });
      });
    }
  
    @override
    Widget build(BuildContext context) {
      return DefaultTabController(
        length: categoryTabs.length,
        child: Scaffold(
          appBar: AppBar(
            title: Text('Example App'),
            bottom: TabBar(
              isScrollable: true,
              tabs: categoryTabs,
            ),
          ),
          body: SafeArea(...),
          ),
        ),
      );
    }
  
  </code></pre>
  <p><a href="https://i.stack.imgur.com/rAseP.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/rAseP.png" alt="App demo for the error on iOS simulator" /></a></p>