How do I style Flutter Form Builder Radio Group options?

763

Using unselectedWidgetColor from theme, change the default black/gray color on radio button. Or you can use radioTheme's fillColor to change this.

Theme(
  data: Theme.of(context).copyWith(
    ///selected radio button color
    selectedRowColor: Colors.green, 
    
    // unselected radio button
    unselectedWidgetColor: Colors.yellow, 
    radioTheme: Theme.of(context).radioTheme.copyWith(
          fillColor: MaterialStateProperty.all(Colors.purple),
        ),
  ),
  child: FormBuilderRadioGroup(

activeColor on FormBuilderRadioGroup change the default blue color of selected radio button.

child: FormBuilderRadioGroup(
  name: "role",
  activeColor: Colors.white, // this
Share:
763
markhorrocks
Author by

markhorrocks

Updated on November 26, 2022

Comments

  • markhorrocks
    markhorrocks over 1 year

    I am using Flutter Form Builder with a FormBuilderRadioGroup but I can't figure out how to style the options which are always black. Changing the app's primary swatch makes no difference. The color options in the code below also have no effect. The label style works but not the options content style. The selected option is always blue.

    My form has a dark background and I need the options content to be white.

    FormBuilderRadioGroup(
      name: "role",
      decoration: InputDecoration(
        labelText: "Role",
        labelStyle: TextStyle(color: personLabelColor, fontSize: _user.fontsize, fontWeight: FontWeight.normal),
        fillColor: Colors.red,
        focusColor: Colors.blue,
        hoverColor: Colors.yellow,
      ),
      options: const [
        FormBuilderFieldOption(value: 0),
        FormBuilderFieldOption(value: 1),
        FormBuilderFieldOption(value: 2),
        FormBuilderFieldOption(value: 3),
        FormBuilderFieldOption(value: 4),
        FormBuilderFieldOption(value: 5),
      ],
      initialValue: _person.role,
    ),