sarah joy
 · indie app dev

Can you have different colors for individual Choice Chips?

Hi all!

I'm using a Choice Chips widget for selecting a theme color and would like to have each chip's border be in the color it is for. Selected state would show the background as that color, as well.


Right now I have a custom function that takes a string (eg "pink") and returns a Color. I use it to save the selected color as a Color to an app state variable. My thought was to also use it to set the chips' border and background colors, but I haven't figured out how to have the chip reference its own option text.

I'm new to FlutterFlow (and Flutter, and Dart ), so when looking at the code, what I want to do is pass some sort of instance variable to function.getColor(), instead of the hard-coded 'orange'.

Is this possible? Or should I be looking at another way to do this, like creating a custom widget? Thanks!

Expanded(
  child: Padding(
    padding: EdgeInsetsDirectional.fromSTEB(14, 0, 0, 0),
    child: FlutterFlowChoiceChips(
      options: [
        ChipData('orange'),
        ChipData('blue'),
        ChipData('green'),
        ChipData('pink'),
        ChipData('black')
      ],
      onChanged: (val) =>
          setState(() => _model.choiceChipsValue = val?.first),
      selectedChipStyle: ChipStyle(
        backgroundColor: functions.getColor('orange'),
        // can I pass in a variable referencing ChipData instead of 'orange' here?
        ...
      ),
      ...
    )
  )
)


1
6 replies