Change chip color according to its value

[mathlizee]

Hello!

In chipConfig, I can change the background color of all chips easily.

However, I would like to have a different background color for each chip according to its value. My usecase is that each chip represents a document state (In Progress, Closed, Billed, etc.) and that each state is represented by a color.

Would it be possible to allow configuring a chip according to its binded value?

Thanks! Mathieu

[Yogesh070]

You can do that using selectedItemBuilder property to conditionally style item. However you have to manage remove selected chip yourself using controller. Example : Assuming you are using v2 of the API. @mathlizee

selectedItemBuilder: (context,item) {
                              return Chip(
                                label: Text(
                                  item.label,
                                  style: const TextStyle(color: Colors.white),
                                ),
                                backgroundColor: switch (item.label) {
                                  'Closed' => Colors.red,
                                  'Billed' => Colors.blue,
                                  _ => Colors.green,
                                },
                              );
                            },

Using v3 api

selectedItemBuilder: (item) {
                              return Chip(
                                label: Text(
                                  item.label,
                                  style: const TextStyle(color: Colors.white),
                                ),
                                backgroundColor: switch (item.label) {
                                  'Closed' => Colors.red,
                                  'Billed' => Colors.blue,
                                  _ => Colors.green,
                                },
                              );
                            },