Flutter中无法创建唯一Provider：StateProviderFamily类型不匹配问题

我有一个可复用的Select组件，用于构建带筛选功能的页面，需要每个Select组件拥有唯一状态以便后续获取其值。尝试使用Riverpod的StateProviderFamily时出现以下错误：

Unhandled Exception: type 'AutoDisposeProviderFamily<String, String>' is not a subtype of type 'StateProviderFamily<String, String>' of 'function result'

对应的代码如下：

final selectValueProvider = StateProviderFamily<String,String>((ref, arg) =>'' );

class Select extends HookConsumerWidget {
    const Select({Key? key, required this.name}) : super(key: key);

    final String name;
    
     @override
    Widget build(BuildContext context, WidgetRef ref) {
    return Padding(
      padding: const EdgeInsets.only(top: 10.0),
      child: Center(
        child: FractionallySizedBox(
          widthFactor: 0.6,
          child: Container(
            decoration: BoxDecoration(color: Color.fromARGB(255, 189, 177, 177)),
            child:DropdownButton(
                  hint: Text("   " + name),
                  isExpanded: true,
                  items: [
                    DropdownMenuItem(child: Text('Audi'), value: 'Audi'),
                    DropdownMenuItem(child: Text('BMW'), value: 'BMW'),
                    DropdownMenuItem(child: Text('Yugo'), value: 'Yugo'),
                  ],
                  onChanged: (value) {
                    ref.read(selectValueProvider(name).notifier).update((state) => value!);
                 //   print('ji: '+ref.read(selectValueProvider(name)));
                  },
                  
                  
            ),
          ),
        ),
      ),
    );
  }
}

尝试过使用StateProvider.autodispose等不同状态，但错误依旧。

解决方案 #

这个错误的核心原因是Riverpod 2.x中不再直接使用StateProviderFamily类来声明家族状态Provider，正确的声明方式是通过StateProvider.family（非自动销毁）或StateProvider.autoDispose.family（自动销毁）的链式调用。

修正Provider声明 #

将原来的Provider声明替换为以下两种方式之一：

1. 非自动销毁的家族Provider：

final selectValueProvider = StateProvider.family<String, String>((ref, arg) => '');

2. 需要自动销毁的家族Provider（对应你尝试的autodispose场景）：

final selectValueProvider = StateProvider.autoDispose.family<String, String>((ref, arg) => '');

组件代码无需修改 #

你的Select组件中读取和更新状态的逻辑是正确的，修正Provider声明后，ref.read(selectValueProvider(name).notifier).update((state) => value!)可以正常工作。

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