SelectableTags is not rebuilt

[hntan]

I have two separated SelectableTags, I just want one of them to be displayed on at a time depends on given criteria named '_category'. the problem is whenever the '_category' changed, the first SelectableTags is always displayed. Noted that if I replace SelectableTags to another widget like 'Text', the logic works fine.

Can someone help me here? and sorry for my bad English.

import 'package:flutter/material.dart';
import 'package:flutter_tags/selectable_tags.dart';

class XYZState extends State<XYZWidget> {

  String _category = 'Clothing';
  List<Tag> _tagsBooks = [];
  List<Tag> _tagsClothing = [];

  @override
  void initState() {
    super.initState();

    _tagsBooks = ['fantacy', 'comic'].map((s) => Tag(title: s, active: false)).toList().cast<Tag>();
    _tagsClothing = ['shirt', 'coat'].map((s) => Tag(title: s, active: false)).toList().cast<Tag>();
  }

  void _onCategoryChange(String selectedCategory) {
    setState(() {
      _category = selectedCategory;
    });
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: SingleChildScrollView(
        child: Padding(
            padding: new EdgeInsets.all(20.0),
              child: Form(
                child: Column(
                  crossAxisAlignment: CrossAxisAlignment.start,
                  children: <Widget>[
                    DropdownButton<String>(
                      items: ['Clothing', 'Books'].map((c) => DropdownMenuItem<String>(
                        value: '$c',
                        child: Text('$c'),
                      )).toList(),
                      value: _category,
                      onChanged: _onCategoryChange,
                    ),
                    _category == 'Clothing' 
                        ? SelectableTags(
                            tags: _tagsBooks,
                            columns: 3,
                            symmetry: true, // default false
                            onPressed: (t) {
                              print(t.toString());
                            },
                          )
                        : SelectableTags(
                            tags: _tagsClothing,
                            columns: 3, // default 4
                            symmetry: true, // default false
                            onPressed: (t) {
                              print(t.toString());
                            },
                        ),
                  ],
                )
              )
            )
        )
    );
  }
}

[Dn-a]

@hntan you must use the key parameter for each selectable tags... es: SelectableTags( key: Key("id1"), .. )

[hntan]

Oops thank so much @Dn-a . It works now after adding the 'key' property