flutterflutter-dependenciesflutter-form-builder

How do I style Flutter Form Builder Radio Group options?


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,
),

Solution

  • 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