Flutter GetX代码报错：检测到GetX使用不当

问题描述 #

你编写的基于Flutter GetX的FilePicker文件选择组件，运行时抛出GetX使用错误，提示未在Obx/GetX中注入可观察变量或注入位置不符合更新要求。

组件代码 #

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

class FilePicker extends GetView {
  final FormControl? control;

  const FilePicker({
    this.control,
    Key? key,
  }) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return Obx(
      () => GestureDetector(onTap: () {}, child: const TextField()),
    );
  }
}

错误详情 #

═════════ Exception caught by widgets library ═══════════════════════════════════
构建Obx(has builder, dirty, state: _ObxState#d9976)时抛出以下信息：
[Get] the improper use of a GetX has been detected.
You should only use GetX or Obx for the specific widget that will be updated.
If you are seeing this error, you probably did not insert any observable variables into GetX/Obx
or insert them outside the scope that GetX considers suitable for an update
(example: GetX => HeavyWidget => variableObservable).
If you need to update a parent widget and a child widget, wrap each one in an Obx/GetX.
相关错误触发组件为Obx。

问题原因 #

Obx的核心作用是监听内部**GetX可观察变量（Rx类型）**的变化，自动重建对应的Widget。你当前的Obx包裹的Widget中，没有使用任何Rx变量，完全不需要Obx的监听能力，因此触发了GetX的使用校验错误。

解决方案 #

方案1：移除不必要的Obx包裹 #

如果当前组件不需要监听任何可观察变量，直接去掉Obx，代码修改如下：

@override
Widget build(BuildContext context) {
  return GestureDetector(onTap: () {}, child: const TextField());
}

方案2：结合文件选择需求添加可观察变量 #

既然你要做文件选择组件，需要记录选中的文件状态，因此可以添加Rx变量来存储选中的文件信息，让Obx监听该变量的变化来更新UI。示例代码如下：

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

class FilePicker extends GetView {
  final FormControl? control;
  // 定义可观察变量存储选中的文件路径
  final RxString _selectedFilePath = ''.obs;
  final ImagePicker _picker = ImagePicker();

  FilePicker({
    this.control,
    Key? key,
  }) : super(key: key);

  Future<void> _pickFile() async {
    final XFile? file = await _picker.pickImage(source: ImageSource.gallery);
    if (file != null) {
      _selectedFilePath.value = file.path;
      // 如果需要同步到FormControl
      control?.value = file.path;
    }
  }

  @override
  Widget build(BuildContext context) {
    return Obx(
      () => GestureDetector(
        onTap: _pickFile,
        // 根据选中的文件路径更新TextField的内容
        child: TextField(
          enabled: false,
          decoration: InputDecoration(
            hintText: _selectedFilePath.value.isEmpty ? '选择文件' : _selectedFilePath.value,
          ),
        ),
      ),
    );
  }
}

内容的提问来源于stack exchange，提问作者Dilip Kumar