Programatically select a tag during build and trigger onPressed event

[trifox83]

My suggestion is to add a new attribute, so when the tags are building, that particular tag will be automatically selected and the onPressed event triggered.

Tags(
  itemCount: list.length,
  itemBuilder: (index) {
    return ItemTags(
      index: index,
      title: list[index].title,
      selected: true, /* ADD THIS ATTRIBUTE */
      onPressed: (item) {
        // Do something
      }
    ),
  };
),

[Dn-a]

hi @trifox83 the active parameter already exists

Tags(
      key:_tagStateKey,

      itemBuilder: (int index){              
            return ItemTags(                
                  active: item.active, // this one
     }
)

I seem to have understood that in addition you would like a onPressed trigger event, if item is true?

[Akiat]

I need the same behaviour for my app, and I already used the active parameter, without chance: the tag stay unselected. I have the following code:

return GFAccordion(
      margin: EdgeInsets.all(5.0),
        title: 'Filter results',
        contentChild: Container(
          child: Tags(
            key: _tagStateKey,
            itemCount: _items.length,
            horizontalScroll: false,
            heightHorizontalScroll: 50,
            itemBuilder: (int index) {
              final TagModel item = _items[index];

              return ItemTags(
                // Each ItemTags must contain a Key. Keys allow Flutter to
                // uniquely identify widgets.
                key: Key(index.toString()),
                index: index,
                title: item.name,
                active: tabDetails.selectedTag == item ? true : false,
                customData: item,
                singleItem: true,
                activeColor: Colors.green,
                textStyle: TextStyle(
                  fontSize: _fontSize,
                ),
                onPressed: (item) => onTagPressed(item),
              );
            },
          ),
        ),
        collapsedIcon: Text('Show tags'),
        expandedIcon: Text('Hide tags')
    );

Maybe I done something wrong ?

For the second part, I also thought it will be good to trigger the active element ònPressed`, or maybe have a bool parameter for this choice (maybe in some case, this is not the desired behavior).

EDIT: My tabDetails.selectedTag == item? true: false, returns obviously one active element among the others.

[trifox83]

hi @trifox83 the active parameter already exists

Tags(
      key:_tagStateKey,

      itemBuilder: (int index){              
            return ItemTags(                
                  active: item.active, // this one
     }
)

I seem to have understood that in addition you would like a onPressed trigger event, if item is true?

This one does not work for singleItem: true. I'm using single item tags for selector as alternative to dropdown. So when the user navigate to the page the previously selected option needs to be highlighted.

As for item onPressed, it's good to have, but optional as there are workarounds.

[Dn-a]

@trifox83 I will see what I can do

[Dn-a]

@Akiat Do you mean that when you change the status in tabDetails.selectedTag then this should be reflected automatically in the tag?

[Akiat]

@Akiat Do you mean that when you change the status in tabDetails.selectedTag then this should be reflected automatically in the tag?

If there is a rebuild and with this line active: tabDetails.selectedTag == item ? true : false, I think it should be the normal behaviour yes, but maybe I'm wrong ?

[lijusparkt]

Hello Guys, You can achieve this using pressEnabled property. Set SingleItem property = true; only if the user click an 'inactive' item.

Also set pressEnabled = false on active item ( ie, block selection of active item )

This is the Only simple way...

int _technology_index = -1;

active: (_technology_index ==index), singleItem:_technology_index != index, pressEnabled: _technology_index != index, onPressed: (item) { setStateChild(() { _technology_index = item.index; });},