Flutter自定义FormField时如何获取WidgetRef访问Riverpod状态

你有几种方式可以在FormFieldState中获取WidgetRef，无需继承ConsumerState：

方法一：在build方法中嵌套Consumer组件 #

直接在build方法内用Consumer包裹需要访问Provider的逻辑部分，即可拿到ref：

class _LocationFieldState extends FormFieldState<Location> {
  @override
  Widget build(BuildContext context) {
    return Consumer(
      builder: (context, ref, child) {
        final locationsData = ref.watch(locationsProvider);
        final List<String> options = locationsData.value?.map((location) => location.name) ?? [];

        // 示例：构建下拉选择表单组件
        return DropdownButtonFormField<String>(
          value: options.isNotEmpty ? options.first : null,
          items: options.map((name) => DropdownMenuItem(value: name, child: Text(name))).toList(),
          onChanged: (value) {
            final selectedLocation = locationsData.value?.firstWhere((loc) => loc.name == value);
            if (selectedLocation != null) {
              didChange(selectedLocation);
            }
          },
          decoration: const InputDecoration(labelText: "选择地点"),
        );
      },
    );
  }
}

方法二：从父组件传递WidgetRef #

在LocationField的构造函数中添加WidgetRef参数，再在状态类中引用该参数：

class LocationField extends FormField<Location> {
  final WidgetRef ref;

  LocationField({
    super.key,
    required this.ref,
  }) : super(
          builder: (context) {
            throw UnimplementedError();
          },
        );

  @override
  FormFieldState<Location> createState() => _LocationFieldState();
}

class _LocationFieldState extends FormFieldState<Location> {
  late WidgetRef _ref;

  @override
  void initState() {
    super.initState();
    _ref = (widget as LocationField).ref;
  }

  @override
  Widget build(BuildContext context) {
    final locationsData = _ref.watch(locationsProvider);
    final List<String> options = locationsData.value?.map((location) => location.name) ?? [];

    // 构建对应的选择UI
    return DropdownButtonFormField<String>(
      // 实现逻辑同上...
    );
  }
}

// 父组件中使用示例（需在Consumer内传入ref）：
// Consumer(
//   builder: (context, ref, child) {
//     return LocationField(ref: ref);
//   },
// )

方法三：通过ProviderScope获取容器（不推荐） #

可直接从上下文获取Provider容器再拿到ref，但这种方式会让组件与ProviderScope强耦合，灵活性较差：

@override
Widget build(BuildContext context) {
  final container = ProviderScope.containerOf(context);
  final ref = container.read;
  final locationsData = ref(locationsProvider);

  // 构建UI逻辑...
}

额外提示 #

• 优先使用watch而非read监听Provider，确保数据更新时组件能自动重建
• 若locationsProvider是异步类型（如FutureProvider/StreamProvider），需处理加载、错误状态：

  locationsData.when(
    loading: () => const CircularProgressIndicator(),
    error: (err, stack) => Text("加载失败: $err"),
    data: (locations) {
      // 基于获取到的locations构建选项UI
    },
  )
  

内容的提问来源于stack exchange，提问作者Stephen Vaudreuil