CODEWITHSUNDEEP
flutterflutter-dependenciesflutter-form-builder
markhorrocks
markhorrocks

Reputation: 1418

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

Upvotes: 1

Views: 2787

Answers (1)

Md. Yeasin Sheikh
Md. Yeasin Sheikh

Reputation: 63604

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

Upvotes: 1

Related Questions