Flutter中使用GetX控制器的RadioListTile失效，页面仅显空白白屏

问题背景 #

使用Stateless Widget搭配GetX控制器开发表单，添加RadioListTile组件后页面显示空白白屏；注释该组件相关代码后，渐变背景与文本内容可正常显示。

相关代码 #

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();
}
}

main.dart（关键代码） #

Get.put(ProfileController());

问题原因 #

1. 布局溢出：RadioListTile默认带有内边距和标题占位区域，直接放在Row中时，三个组件总宽度超出屏幕可用空间，触发布局溢出错误，导致页面白屏。
2. 响应式UI未绑定：GetX的RxString title变量未用响应式包裹，即使值更新，UI也不会自动刷新（此为后续功能问题，当前白屏核心原因是布局溢出）。

解决方案 #

方案1：用Expanded包裹RadioListTile并添加标题 #

给每个RadioListTile添加标题文本，并用Expanded分配屏幕空间，同时减少内边距节省空间：

Row(
  mainAxisAlignment: MainAxisAlignment.spaceEvenly,
  children: [
    Expanded(
      child: RadioListTile(
        title: const Text("Mr"),
        value: "Mr",
        groupValue: controller.title.value,
        onChanged: (String? value) {
          controller.setGenderRadio(value);
        },
        contentPadding: EdgeInsets.zero,
      ),
    ),
    Expanded(
      child: RadioListTile(
        title: const Text("Ms"),
        value: "Ms",
        groupValue: controller.title.value,
        onChanged: (String? value) {
          controller.setGenderRadio(value);
        },
        contentPadding: EdgeInsets.zero,
      ),
    ),
    Expanded(
      child: RadioListTile(
        title: const Text("Mrs"),
        value: "Mrs",
        groupValue: controller.title.value,
        onChanged: (String? value) {
          controller.setGenderRadio(value);
        },
        contentPadding: EdgeInsets.zero,
      ),
    ),
  ],
)

方案2：用Wrap代替Row #

若屏幕宽度有限，Wrap会自动换行避免溢出：

Wrap(
  spacing: 10,
  children: [
    RadioListTile(
      title: const Text("Mr"),
      value: "Mr",
      groupValue: controller.title.value,
      onChanged: (String? value) {
        controller.setGenderRadio(value);
      },
    ),
    RadioListTile(
      title: const Text("Ms"),
      value: "Ms",
      groupValue: controller.title.value,
      onChanged: (String? value) {
        controller.setGenderRadio(value);
      },
    ),
    RadioListTile(
      title: const Text("Mrs"),
      value: "Mrs",
      groupValue: controller.title.value,
      onChanged: (String? value) {
        controller.setGenderRadio(value);
      },
    ),
  ],
)

补充：绑定响应式UI #

在RadioListTile的外层添加Obx，确保值更新时UI自动刷新：

Obx(() => Row(
  // 上述RadioListTile代码
))

内容的提问来源于stack exchange，提问作者Alsamil Mehboob