TabBar - Dynamically set tabbar items with JS

[sharjeelyunus]

I have an array of categories coming from the API and I want to show each category in a TabBar. So I need to map the items of TabBar to be set dynamically. With JS it can be like this:

var tabItems = response.body.categories.map(function (category) {
              return {
                  label: category.name,
                  widget: {
                      "Category": {
                          "inputs": {
                              "category": category.name
                          }
                      }
                  }
              };
          });

tabbar.items = tabItems;

It has the label and widget defined including the inputs it need to pass the widget

[kmahmood74]

@sharjeelyunus please fix the js, it has to be exactly like the yaml. Write the tabbar items array in yaml, open a yaml to json online editor and paste it there to get the js. That's the js to use. If we divert it from that, we will have lots of maintainability issues.

[sharjeelyunus]

fixed, this will return an array of items like below

[{label: Pastries, widget: {Category: {inputs: {category: Pastries}}}}, {label: Cupcakes, widget: {Category: {inputs: {category: Cupcakes}}}}, {label: Brownies, widget: {Category: {inputs: {category: Brownies}}}}, {label: Lasagna, widget: {Category: {inputs: {category: Lasagna}}}}, {label: Pizza, widget: {Category: {inputs: {category: Pizza}}}}]

[kmahmood74]

assigning to @hemish11 as I may not get time for this for a few days. @hemish11 when I run even the TabBar example from kitchen sink in debugger, I get flutter exceptions -

We need to fix the widget and then add the js capability. Adding js capability is easy, just change the set items in TabBarController as follows -

  set items(dynamic _) {
    if (_ == null) {
      _items.clear();
      return;
    }
    List? tempItems;
    if ( _ is YamlList ) {
      tempItems = Utils.convertYamlToDart(_);
    }
    if (tempItems is List) {
      for (Map item in tempItems) {
        _items.add(TabItem(
          Utils.getString(item['label'], fallback: ''),
          item['widget'] ??
              item['body'], // item['body'] for backward compatibility
          item['tabItem'],
          icon: Utils.getIcon(item['icon']),
        ));
      }
    }
  }

But please fix the bug first.

[kmahmood74]

@hemish11 this is the issue with tabbar alignment exception - https://github.com/EnsembleUI/ensemble/issues/1162

Vinoth had a PR for it which is linked to the ticker