title: Controller's length property does not match the number of tabs present in TabBar's tabs property
body: <p>I am implementing an TabBar but getting the error, as state above. I know the reason this is happening, but can't figure how to fix this.</p>
  
  <p>I have an async function designed to pull data from Firebase which populates a list. The function is described below. The data pulled by this function is used to pass the length to the TabController.</p>
  
  <p>Function to call data from Firebase:</p>
  
  <pre><code>Future functionName async {
  
  await function actions...
    List example = ['item1', 'item2', 'item3', 'item4'];
  } 
  </code></pre>
  
  <p>This function is used in a <strong>Future Builder</strong>, which returns a widget to display, as soon as the function execution is complete.</p>
  
  <p>The future of the Future Builder is initialised in the initState() of the class. The init() state looks like:</p>
  
  <pre><code>  @override
    void initState() {
      super.initState();
  
      _future = functionName();
  
      tabController = TabController(length: example.length, vsync: this, initialIndex: 0);
  
      tabController.addListener(_setActiveTabIndex);
   }
  </code></pre>
  
  <p>Now, I get the error, as stated above. Which is obvious, why! 
  As the function is an async function and is built in a Future Builder, initially the list 'example' is empty. And the TabController gets a length of 0. But as this list gets populated, the length increases, but the length of the TabController does not change.</p>
  
  <p>I have tried using :</p>
  
  <pre><code>    @override
      void initState() {
        super.initState();
  
      _future = functionName();
  
      setState(() {
         tabController = TabController(length : example. length, vsync : this, initialIndex : 0)
    } 
  ) 
  </code></pre>
  
  <p>But this doesn't work either.
  It's annoying to know the issue, but not being able to fix it. Any help on this will be highly appreciated.</p>