How to add tabs in flutter using for loop?

Question

Situation:

I have a list called tabsText and I want to make tabs of each item from the list inside TabBar. List is below:

List<String> tabsText = ["Top","Outdoor","Indoor", "Seeds", "Flowers"];

Tried:

I made a function called, tabsMaker like this.

tabMaker(){
  for (var i = 0; i < tabsText.length; i++) {
    return Tab(text: tabsText[i],);
};
}

And used this inside TabBar like this,

            child: DefaultTabController(
              length: 5,
                          child: ListView(
                children: [
                  TabBar(
                    isScrollable: true,
                    tabs: 
                      [
                        tabMaker()
                      ]
                  )
                ],
              ),
            ),

but gives an error like this
Controller's length property (5) does not match the number of tabs (1) present in TabBar's tabs property.

Question:

I want this

How can I achieve this?

Full Code:

import 'package:flutter/material.dart';
import 'package:font_awesome_flutter/font_awesome_flutter.dart';

class PlantFeatureScreen1 extends StatefulWidget {
  @override
  _PlantFeatureScreen1State createState() => _PlantFeatureScreen1State();
}

class _PlantFeatureScreen1State extends State<PlantFeatureScreen1> {
  List<String> tabsText = ["Top","Outdoor","Indoor", "Seeds", "Flowers"];
  
 tabMaker(){
  for (var i = 0; i < tabsText.length; i++) {
    return Tab(text: tabsText[i],);
};
}
  @override
  Widget build(BuildContext context) {
    return Column(
      children:<Widget> [
        Expanded(
          flex:1,
          child: Container(

            decoration: BoxDecoration(
              color:Colors.grey,
            ),
            child: ListTile(leading: Icon(Icons.donut_small,size: 35,color: Color(0xFFC1C2C4), ),
            trailing: Icon(Icons.search,size: 35,color: Color(0xFFC1C2C4),),
            ),
          
        ),),
        Expanded(
          flex:1,
          child: Align(
            alignment: Alignment(-1, 0),
                      child: Container(
              decoration: BoxDecoration(
                color:Colors.white,
              ),
              child: Text(
                
                "Plants", style: TextStyle(
                  fontSize: 30,fontWeight: FontWeight.w700
                ),
                
              ),
            
        ),
          ),),
        Expanded(
          flex:1,
          child: Container(
            decoration: BoxDecoration(
              color:Colors.blue,
            ), 
            child: DefaultTabController(
              length: 5,
                          child: ListView(
                children: [
                  TabBar(
                    isScrollable: true,
                    tabs: 
                      [
                        tabMaker()
                        // Tab(text: tabsText[0],),
                        // Tab(text: tabsText[1],),
                        // Tab(text: tabsText[2],),
                        // Tab(text: tabsText[3],),
                        // Tab(text: tabsText[4],)




                      ]
                  )
                ],
              ),
            ),
          
        ),),
],
    
    );
  }
}

Answer 1

You can use for loops in arrays

            child: DefaultTabController(
              length: tabsText.length,
                          child: ListView(
                children: [
                  TabBar(
                    isScrollable: true,
                    tabs: 
                      [
                        for (var tabText in tabsText)
                          Tab(text: tabText)
                      ]
                  )
                ],
              ),
            ),

Edit:

To clarify why your code isn't working is because you return 1 tab item in your tabMaker function and the DefaultTabController is expecting 5.

If you want to use your method this should work:

List<Tab> tabMaker(){  //return type is specified

  List<Tab> tabs = []; //create an empty list of Tab
  for (var i = 0; i < tabsText.length; i++) {
    tabs.add(Tab(text: tabsText[i])); //add your tabs to the list
  }
  return tabs; //return the list
}

and change

tabs:
  [
     tabMaker()
  ]

to

tabs: tabMaker()

Otherwise your list is put in a list.

Answer 2

The for loop is returning a single tab.

tabMaker(){
  List<Tab> tabs = List();
  for (var i = 0; i < tabsText.length; i++) {
    tabs.add(Tab(text: tabsText[i],));
 };
 return tabs;
}

And in the TabBar use it like this:

tabs: tabMaker()