woocommerce rest api - Flutter - Grabbing the Id's of individual Tabs

Question

Hello please am a new developer in flutter, developing a mobile app using the woocommerce api. I have passed the individual categories into tabs but I need to grab their individual id to pass to the api to call their products. What am getting is all the id's in the tabs.

Image here

This is the ui code

  CategoryDetails({Key key, this.categoryId, this.categoryName})
      : super(key: key);

  final String categoryName;
  final int categoryId;

  @override
  _CategoryDetailsState createState() => _CategoryDetailsState();
}

class _CategoryDetailsState extends State<CategoryDetails> {
  APIService apiService;

  @override
  void initState() {
    apiService = APIService();
    super.initState();
  }

  @override
  Widget build(BuildContext context) {
    return _brandsList();
  }

  Widget _brandsList() {
    return FutureBuilder(
      future: apiService.getbrands(this.widget.categoryId),
      builder:
          (BuildContext context, AsyncSnapshot<List<ProductCategory>> model) {
        if (model.hasData) {
          return _brandsTab(model.data);
        }
        return Center(
          child: CircularProgressIndicator(),
        );
      },
    );
  }

  Widget _brandsTab(brands) {
    return DefaultTabController(
      length: brands.length,
      child: Scaffold(
          appBar: AppBar(
            elevation: 1,
            centerTitle: true,
            bottomOpacity: 1.0,
            backgroundColor: Colors.white,
            iconTheme: IconThemeData(color: Colors.black),
            automaticallyImplyLeading: true,
            title: Text(
              //'Franko Trading',
              this.widget.categoryName,
              style: TextStyle(color: Colors.black),
            ),
            actions: <Widget>[
              IconButton(
                  icon: Icon(Icons.search),
                  onPressed: () {},
                  color: Colors.black),
              IconButton(
                  icon: Icon(Icons.shopping_cart),
                  onPressed: () {},
                  color: Colors.black),
            ],
            bottom: TabBar(
              labelPadding: EdgeInsets.all(15),
              indicatorSize: TabBarIndicatorSize.label,
              isScrollable: true,
              labelColor: Colors.black87,
              indicator: UnderlineTabIndicator(),
              labelStyle: TextStyle(
                  fontSize: 19,
                  fontWeight: FontWeight.bold),
              unselectedLabelColor: Colors.black45,
              unselectedLabelStyle: TextStyle(
                  fontSize: 18,
                  fontWeight: FontWeight.normal),
              tabs: List<Widget>.generate(
                  brands.length, (index) => Text(brands[index].categoryName)),
            ),
          ),
          body: TabBarView(
              children: List.generate(brands.length, (index) {
            return ListView.builder(
              itemCount: brands.length,
              itemBuilder: (context, index) {
                return Center(child: Text(brands[index].categoryId.toString()));
              },
            );
          })
              //Center(child: Text("Settings Tab")),
              )),
    );
  }

}

Answer 1

tabs are stacked in the order you put them. so, the first tab is always having the index of 0. you can use that index to cross-reference a list of Category IDs.

List<String> catIDList = ['A','B','C'];

if you need the id of the tab 1,

String id = catIDList[index];