How do I style Flutter Form Builder Radio Group options?

user_951321 0
Viewed 509

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,
),
flutter-form-builder flutter-dependencies flutter
1 Answers

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
user_101571270
Related