FormBuilder radio buttons, value and image next to each other-CodePudding

I stumbled across this question of styling FormBuilderRadioGroup. I want to make a row for each option. In that row I want the value of the radio button and an image. See picture: https://imgur.com/a/v1qzA6X.

I tried to do this in the options property, but that property is expecting a list of <FormBuilderFieldOption>so I cannot return a row...

Code

FormBuilder(
            autovalidateMode: AutovalidateMode.always,
            key: _formKey,
            child: Column(
              mainAxisAlignment: MainAxisAlignment.start,
              crossAxisAlignment: CrossAxisAlignment.start,
              children: [
                FormBuilderRadioGroup(
                    onChanged: (value) {
                      String paymentMethod = value.toString();
                      paymentViewModel.setPaymentMethod(paymentMethod);

                      print(paymentMethod);
                    },
                    initialValue: "mollie_wc_gateway_ideal",
                    decoration: const InputDecoration(
                      border: InputBorder.none,
                      contentPadding: EdgeInsets.symmetric(horizontal: 0),
                    ),
                    orientation: OptionsOrientation.vertical,
                    name: "paymentMethod",
                    options: paymentViewModel.paymentOptions!
                        .map((option) => FormBuilderFieldOption(
                              value: option.id,
                              child: Text(option.title),
                            ))
                        .toList(growable: false)),
              ],
            )),

The code above just displays 3 radio buttons with plain text. I really want an image of the payment method on the right side.

CodePudding user response：

Maybe you should not use the package flutter_form_builder. Just use the built in Form in Flutter. Maybe that could help?

CodePudding user response：

you can try this one :

options: paymentViewModel.paymentOptions!
                    .map((option) => FormBuilderFieldOption(
                          value: option.id,
                          child: Row(
  children: [Text('option.title'),Image.network('URL')]
  ,mainAxisAlignment: MainAxisAlignment.spaceEvenly
),
                        ))
                    .toList(growable: false)),
          ],
        )),

CodePudding user response：

Did you try like this?

.map((option) => FormBuilderFieldOption(
      value: option.id,
      child: Row(
      mainAxisAlignment: MainAxisAlignment.spaceBetween,
          children:[
            Text(option.title),
            Image
          ],
      ),
    )).toList(growable: false)),