Radio Tile using Getx controller is not working, getting only white blank screen

Question

I am trying to make a form in flutter, here I am using the Flutter Stateless widget with a Getx controller, but when ever I am trying to add the radio list tile, getting only white blank output, if I am commenting that part, getting the gradient background with a text data.

myProfile.dart:

    import 'package:flutter/material.dart';
import 'package:get/get.dart';
import 'package:money_transfer/controller/profileController.dart';

class MyProfile extends StatelessWidget {
  MyProfile({super.key});
  final controller = Get.find<ProfileController>();
  // final controller = Get.put(ProfileController());

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: SafeArea(
        child: Container(
          width: MediaQuery.of(context).size.width,
          height: MediaQuery.of(context).size.height,
          decoration: BoxDecoration(
            gradient: LinearGradient(
              colors: [
                Colors.red.withOpacity(0.4),
                Colors.yellowAccent.withOpacity(0.5),
              ],
              begin: Alignment.topLeft,
              end: Alignment.bottomRight,
            ),
          ),
          child: Column(
            mainAxisAlignment: MainAxisAlignment.center,
            children: [
              const Text("data"),

              Form(
                key: controller.globalFormKey,
                child: Column(
                  mainAxisAlignment: MainAxisAlignment.spaceEvenly,
                  children: [
                    Row(
                      mainAxisAlignment: MainAxisAlignment.spaceEvenly,
                      children: [
                        RadioListTile(
                          value: "Mr",
                          groupValue: controller.title.value,
                          onChanged: (String? value) {
                            controller.setGenderRadio(value);
                          },
                        ),
                        RadioListTile(
                          value: "Ms",
                          groupValue: controller.title.value,
                          onChanged: (String? value) {
                            controller.setGenderRadio(value);
                          },
                        ),
                        RadioListTile(
                          value: "Mrs",
                          groupValue: controller.title.value,
                          onChanged: (String? value) {
                            controller.setGenderRadio(value);
                          },
                        ),
                      ],
                    ),
                  ],
                ),
              ),

            ],
          ),
        ),
      ),
    );
  }
}

profileController.dart:

import 'package:flutter/material.dart';
import 'package:get/get.dart';

class ProfileController extends GetxController{

  GlobalKey<FormState> globalFormKey = GlobalKey<FormState>();

  RxString title="Mr".obs;
  String? firstName;
  String? middleName;
  String? LastName;
  String? mob;
  String? email;
  String? postalCode;
  String? town;
  String? country;
  String? street;
  String? buildingNo;
  String? dateOfBirth;

setGenderRadio(String? val){
  title.value = val.toString();
}
}

in main.dart:

Get.put(ProfileController());

also is there.

Answer 1

I found the issue in my code, I used RadioListTile widget, and tried to put in Rows, instead of Column, to solve the issue and put in Row, I used the RadioMenuButton instead of RadioListTile. here is my updated code:

import 'package:flutter/material.dart';
import 'package:get/get.dart';
import 'package:money_transfer/controller/profileController.dart';
    class MyProfile extends StatelessWidget {
      MyProfile({super.key});
      final controller = Get.find<ProfileController>();
      // final controller = Get.put(ProfileController());
    
      GlobalKey<FormState> globalFormKey = GlobalKey<FormState>();
    
      @override
      Widget build(BuildContext context) {
        return Scaffold(
          body: SafeArea(
            child: Container(
              width: double.infinity,
              height: double.infinity,
              decoration: BoxDecoration(
                gradient: LinearGradient(
                  colors: [
                    Colors.red.withOpacity(0.4),
                    Colors.yellowAccent.withOpacity(0.5),
                  ],
                  begin: Alignment.topLeft,
                  end: Alignment.bottomRight,
                ),
              ),
              child: Obx(
                () => Column(
                  children: [
                    Container(
                      child: Row(
                        mainAxisAlignment: MainAxisAlignment.spaceEvenly,
                        children: [
                          RadioMenuButton(
                            value: "Mr",
                            groupValue: controller.title.value,
                            onChanged: (String? value) {
                              controller.setGenderRadio(value);
                            },
                            child: Text("Mr"),
                          ),
                          RadioMenuButton(
                            value: "Ms",
                            groupValue: controller.title.value,
                            onChanged: (String? value) {
                              controller.setGenderRadio(value);
                            },
                            child: Text("Ms"),
                          ),
    
                          RadioMenuButton(
                            value: "Mrs",
                            groupValue: controller.title.value,
                            onChanged: (String? value) {
                              controller.setGenderRadio(value);
                            },
                            child: Text("Mrs"),
                          ),
                          // RadioListTile(
                          //   value: "Mr",
                          //   groupValue: controller.title.value,
                          //   onChanged: (String? value) {
                          //     controller.setGenderRadio(value);
                          //   },
                          // ),
                          // RadioListTile(
                          //   value: "Ms",
                          //   groupValue: controller.title.value,
                          //   onChanged: (String? value) {
                          //     controller.setGenderRadio(value);
                          //   },
                          // ),
                          // RadioListTile(
                          //   value: "Mrs",
                          //   groupValue: controller.title.value,
                          //   onChanged: (String? value) {
                          //     controller.setGenderRadio(value);
                          //   },
                          // ),
                        ],
                      ),
                    ),
                  ],
                ),
              ),
            ),
          ),
        );
      }
    }